如何在编写赛普拉斯测试时 select 相同地命名 div 元素

Question

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

该应用程序有一个菜单，其中包含用于在地图屏幕上显示不同数据的按钮。所有这些按钮都有相同的 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()

还有一个更复杂的问题，其中两个按钮具有相同的标题（Landfill 和 Waste），因为该数据集位于两个不同的部分。所以当我尝试访问第二个 -

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

它正在尝试 select 具有该名称的第一个按钮，但失败了，因为该按钮已折叠并且不再 select 可用。

如有任何帮助，我们将不胜感激。

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

我不确定 'collapsed' 第一个按钮是否会干扰它。

更long-winded的方法是用.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...
})

展开运算符将包裹的元素转换为您可以使用的数组，cy.wrap() re-wraps 所选项目使其可点击。

如何在编写赛普拉斯测试时 select 相同地命名 div 元素

How to select identically names div elements when writing cypress tests

html

dom

bdd

e2e-testing

cypress