Search code examples
cypressrelative-locators

How to to write cypress locator for dynamic input field

enter image description here

How to write locator for this highlighted input field element when ID and Class attribute are dynamic?

Also for this button

enter image description here

Solution

  • The "Course name" text is a notable feature of that block of HTML. Select it and use traversal commands to get to the <input>

    cy.contains('span', 'Course name')
  .next()
  .find('input')

    Alternatively, the placeholder text could be used (but it seems a bit generic)

    cy.get('input[placeholder="Enter"]')

    For the <button> a similar tactic

    cy.contains('p', 'Add new course')
  .prev('button')
  .click()