CYPRESS

Question

我正在尝试使用 cy.get() 的 .filter 命令来 return 具有相同单词但大小写不同的 DOM 对象的多个实例，并且无法正常工作。

例如：我希望以下代码示例 return Hello、hello 甚至 heLLo

cy.get('tbody tr')
  .filter(':contains("hello")')

更新：可能影响事情的另一条信息是我在此之后所做的事情。这是一段更强大的代码示例：

cy.get('tbody tr')
  .filter(':contains("hello")')
  .within(() => {
     cy.get('td').then(($rows) => {
        <do stuff>
     };
  };

这可能吗？根据文档 here，文本选择区分大小写，但我希望有另一种选择，例如：我可以在这种情况下使用 Regex 吗？

非常感谢。

Answer 1

你只使用 .contains() 怎么样，然后你可以将区分大小写标志 matchCase 作为 false 传递。 Cypress Docs

cy.get('tbody tr').contains('hello', { matchCase: false })

Answer 2

你说的很对，.contains(...)不是这样，它只有returns一个结果，在docs

.contains() yields the new DOM element it found.

按不区分大小写的文本过滤的一种方法是使用 .filter() 回调。

正在测试这个

<table>
  <tbody>
    <tr><td>hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>heLLO</td></tr>
    <tr><td>goodbye</td></tr>
  </tbody>
</table>

本次测试成功

cy.get('tbody tr')
  .filter((i, el) => el.innerText.toLowerCase().includes('hello'))
  .should('have.length', 3)             // 3 out of 4 rows

或者您可以添加自己的伪

Cypress.$.expr.pseudos.containsInsensitive = function(a, i, m) {
  return Cypress.$(a).text().toLowerCase()
      .indexOf(m[3].toLowerCase()) >= 0;
};

cy.get('tbody tr')
  .filter(':containsInsensitive("hello")')
  .should('have.length', 3)             // 3 out of 4 rows

或者如果您更喜欢正则表达式

Cypress.$.expr.pseudos.match = function(a, i, m) {
  const expr = m[3].split('/')[1]
  const flags = m[3].split('/')[2]
  const regex = new RegExp(expr, flags)
  return regex.test(Cypress.$(a).text())
};

cy.get('tbody tr')
  .filter(':match(/hello/i)')
  .should('have.length', 3)             // 3 out of 4 rows

CYPRESS - 使过滤器选择器中的“:contains()”不区分大小写

CYPRESS - Making the ":contains()" in a filter selector case-insensitive

filter

case-insensitive