如何根据子级中的拆分文本查找 HTML 元素

Question

我试图查找的元素有一个散列的 classId，因此我知道如何查找它的最简单方法是通过文本或使用

cy.focused()

。不幸的是，我需要取消聚焦并再次聚焦，但该元素在此过程中被重新安装，因此我无法使用之前的

.focused()

结果。这导致我尝试做这样的事情：

cy.contains('abcdefgh').click();

但是找不到像这样分割文本的元素：

<div class="input-text">
  <div>ab</div>
  <div>cd</div>
  <div>ef</div>
  <div>gh</div>
</div>

有没有办法通过像这样分割的文本找到元素？

Answer 1

一种方法是运行一系列遍历命令来断言每个文本部分。

对于您的示例 HTML，这将是

cy.contains('div', 'ab')      // this specifies the child that owns the text
  .siblings(':contains(cd)')  // next child
  .siblings(':contains(ef)')  // etc
  .siblings(':contains(gh)')
  .parent()                   // presuming this is what you want to click
  .should('have.class', 'input-text') 

我添加了最终断言来证明最终主题是父 div，但是当然你的 actual 类已被散列，因此你不能使用断言。

参考 :contains() 伪选择器

准确文字

一个问题是

:contains()

选择器执行 部分匹配 ，可能会给出错误的元素。

您可以滚动自己的伪文字，这是我用于精确文本的伪文字

测试顶部或/cypress/support/e2e.js

const {$} = Cypress
$.expr.pseudos.textEquals = Cypress.$.expr.createPseudo(function(arg) {
  return function( elem ) {
    /* strip arg leading and trailing dbl quote */ 
    const expected = arg.replace(/^"/, '').replace(/"$/, '')
    return $(elem).text() === expected
  }
})

cy.get('div:textEquals(ab)')
  .siblings(':textEquals(cd)')
  .siblings(':textEquals(ef)')
  .siblings(':textEquals(gh)')
  .parent()
  .should('have.class', 'input-text')