I am having trouble selecting buttons on a page which has the same class name, but different data-ids in Cypress.

There are multiple courses with different ids, and I need to loop through each course and click on the Register button. There are other buttons on the page (View Course), but I only want to click on the Register button.

I tried the code below but no luck in Cypress:

cy.get(`.university [data-course-id=${id}] > button`).click()

cy.get(`.university [data-course-id=“1234”}] > button`).click()

Also tried this in Chrome Dev Tools to get a specific button. I need to get each Register button on the page.

$('.university [data-course-id=“1234”] > button')

But Cypress says it cannot find this element.

What is the issue? How would we select all the Register buttons and click each one?

Thanks for the help!

<div class="university">
  <div class="course" data-course-id="1234">
    <div class="courseTitle">
      <span>Computer Science</span>
       <button>View Course</button>
     </div>
     <button>Register</button>
  </div>
  <br>
  
  <div class="course" data-course-id="bio3">
    <div class="courseTitle">
      <span>Biology</span>
       <button>View Course</button>
     </div>
     <button>Register</button>
  </div>
  <br>
  
  <div class="course" data-course-id="987b">
    <div class="courseTitle">
      <span>English</span>
       <button>View Course</button>
     </div>
     <button>Register</button>
  </div>
</div>

I am having trouble selecting buttons on a page which has the same class name, but different data-ids in Cypress.

There are multiple courses with different ids, and I need to loop through each course and click on the Register button. There are other buttons on the page (View Course), but I only want to click on the Register button.

I tried the code below but no luck in Cypress:

cy.get(`.university [data-course-id=${id}] > button`).click()

cy.get(`.university [data-course-id=“1234”}] > button`).click()

Also tried this in Chrome Dev Tools to get a specific button. I need to get each Register button on the page.

$('.university [data-course-id=“1234”] > button')

But Cypress says it cannot find this element.

What is the issue? How would we select all the Register buttons and click each one?

Thanks for the help!

<div class="university">
  <div class="course" data-course-id="1234">
    <div class="courseTitle">
      <span>Computer Science</span>
       <button>View Course</button>
     </div>
     <button>Register</button>
  </div>
  <br>
  
  <div class="course" data-course-id="bio3">
    <div class="courseTitle">
      <span>Biology</span>
       <button>View Course</button>
     </div>
     <button>Register</button>
  </div>
  <br>
  
  <div class="course" data-course-id="987b">
    <div class="courseTitle">
      <span>English</span>
       <button>View Course</button>
     </div>
     <button>Register</button>
  </div>
</div>

cy.get(.appMovieContainer [data-movie-id=${id}] > button).click()

• javascript
• html
• jquery
• cypress
• selector

3 Answers 3

You can do something like this. This will iterate through all the .course classes and inside that click on the button with text as Register one by one.

cy.get('.course').each(($ele) => {
    cy.wrap($ele).find('button').contains('Register').click()
})

OR

cy.get('.course').each(($ele) => {
    cy.wrap($ele).find('button').eq(1).click()
})

The problem with

cy.get(`.university [data-course-id=“1234”}] > button`).click()

is

• the rogue }, which is probably a typo
• the quote marks around 1234 are not recognized by Cypress.
  Try this out:

expect('“').not.to.eq('"')       // true  
console.log('“'.charCodeAt(0))   // 8220  
console.log('"'.charCodeAt(0))   // 34

The correct version is

cy.get('.university [data-course-id="1234"] > button')

There's nothing wrong with .each(), but another approach is to use :contains() in the selector

cy.get('.university .course button:contains("Register")')
  .click({multiple: true})                          // "multiple" will click all matching buttons

You can try cy.get('[button="Register"]') and then use each method to perform click operation.

Cypress each