html - 编写cypress测试时如何选择相同名称的div元素

Question

我正在使用 cypress 为我们的新应用程序创建 E2E 测试。

该应用程序有一个菜单，其中包含在 map 屏幕上显示不同数据的按钮。所有这些按钮都有相同的 div 名称，我可以通过输入按钮的文本名称来区分:

    cy.get('div.sb-item-body').contains('Historical Land Uses').click()
    cy.get('div.sb-item-body').contains('Potentially Contaminative Industrial Uses (Past Land Use)').click()
    cy.get('div.sb-item-body').contains('Potentially Infilled Land (Water)').click()

更复杂的是，其中两个按钮具有相同的标题(垃圾填埋场和废物)，因为该数据集位于两个不同的部分。因此，当我尝试访问第二个时 -

    cy.get('div.sb-item-body').contains('Landfill and Waste').click()

它正在尝试选择具有该名称的第一个按钮，但由于该按钮已折叠且不再可选，因此失败。

任何帮助，将不胜感激。

Answer 1

请参阅 .eq() 语法。

You can use this when the selector returns multiple elements, e.g

cy.get('div.sb-item-body').contains('Landfill and Waste').eq(0).click()
cy.get('div.sb-item-body').contains('Landfill and Waste').eq(1).click()

我不确定“折叠”的第一个按钮是否会干扰它。

更冗长的方法是使用 .then() 来处理返回值的数组，例如

cy.get('div.sb-item-body').contains('Landfill and Waste').then(els => {
  const buttons = [...els];
  cy.wrap(buttons[0]).click()
  expect(..).to...
  cy.wrap(buttons[1]).click()
  expect(..).to...
})

spread 运算符将包装的元素转换为您可以使用的数组， cy.wrap() 重新包装所选项目使其可点击。