编写柏树测试时如何选择名称相同的div元素答案

【问题标题】：How to select identically names div elements when writing cypress tests编写柏树测试时如何选择名称相同的div元素
【发布时间】：2018-08-21 21:32:03
【问题描述】：

我正在使用 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()

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

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

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

任何帮助将不胜感激。

【问题讨论】：

我猜您无权联系开发人员来更改代码，因此存在某种使它们独一无二的 id。我也相信有一种方法可以在某个元素上选择一个元素。如果我找到它，我会发布答案..

标签： html dom bdd e2e-testing cypress

【解决方案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() 重新包装选定的项目，使其可点击。

【讨论】：