根据 Cypress 中的布局选择元素答案

【问题标题】：Select elements based on layout in Cypress根据 Cypress 中的布局选择元素
【发布时间】：2021-07-12 00:04:22
【问题描述】：

我正在寻找一种可以像 Playwright 中的以下代码一样工作的解决方案。

page.click('input:right-of(:text("Username"))');

通过在 Playwright 中使用该命令，将单击文本 Username 右侧的输入元素。我搜索了一段时间，但发现 Cypress 中似乎没有方便的等价物。是否有任何方法可以根据位置关系选择元素？

【问题讨论】：

【解决方案1】：

我认为你可以使用

cy.contains('Username')    // === :text("Username")
  .next()                  // === :right-of(<previous subject>)
  .click()

可能存在细微差别，例如 .contains() 是部分匹配，.next() 是 DOM 中的下一个兄弟，不一定是 x 坐标的“右”。

您可以添加cypress-testing-library，其中有

cy.findByLabelText('Username').type('myname')

我没有使用它，但语义上似乎是您的目标。如果移动模式下的相对位置发生变化（例如上面的标签），这将很有用。

不久前，我实现了自定义命令来断言元素的相对位置，因为我们遇到了很多 CSS 回归，但这很繁琐。

【讨论】：