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

Question

我在选择页面上具有相同类名但在 Cypress 中具有不同数据 ID 的按钮时遇到问题。

有多个具有不同 ID 的类(class)，我需要循环浏览每个类(class)并单击“注册”按钮。页面上还有其他按钮(查看类(class))，但我只想单击注册按钮。

我尝试了下面的代码，但在 Cypress 中没有运气:

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

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

还在 Chrome 开发工具中尝试过此操作来获取特定按钮。我需要获取页面上的每个注册按钮。

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

但是 Cypress 说它找不到这个元素。

有什么问题吗？我们如何选择所有注册按钮并单击每个按钮？

感谢您的帮助!

<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}] > 按钮).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()
})