如何获取所有特定按钮并在 Cypress 中单击具有特定数据 ID 的每个按钮

Question

我在 select 在具有相同 class 名称但在 Cypress 中具有不同数据 ID 的页面上设置按钮时遇到问题。

有多个不同id的课程，我需要遍历每个课程并点击Register按钮。页面上还有其他按钮（查看课程），但我只想单击 Register 按钮。

我尝试了下面的代码，但在 Cypress 中没有成功：

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

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

也在 Chrome Dev Tools 中尝试过此操作以获取特定按钮。我需要获取页面上的每个注册按钮。

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

但是赛普拉斯说找不到这个元素。

这是什么问题？我们如何 select 所有注册按钮并单击每个按钮？

感谢您的帮助！

<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()

Answer 1

你可以这样做。这将遍历所有 .course 类并在其中单击带有文本的按钮，一一注册。

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

或

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

Answer 2

您可以尝试cy.get('[button="Register"]')，然后使用each方法进行点击操作

Cypress each

Answer 3

的问题

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

是

流氓}，可能是打错了
Cypress 无法识别 1234 周围的引号。
试试这个：

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

正确的版本是

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

.each()没有错，但是另一种做法是在选择器

中使用:contains()

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

如何获取所有特定按钮并在 Cypress 中单击具有特定数据 ID 的每个按钮

How to get all specific buttons and click on each one with a specific data-id in Cypress

html

javascript

jquery

selector

cypress