如何在Cypress中等待至少一个元素包含指定精确文本？

你的问题出在原代码的执行逻辑上：cy.getTestid('container').get('h2')会立即获取当前页面中所有已渲染的<h2>元素，随后.contains()只会检查第一个匹配到的<h2>是否符合文本规则。如果先渲染的<h2>不是目标内容，测试就会直接失败，不会等待后续区块加载。

下面是几种可靠的实现方式，无需依赖元素顺序：

方法1：直接结合选择器与文本匹配 #

这是最简洁的写法，让Cypress在容器内主动查找符合条件的<h2>，直到找到或超时：

cy.getTestid('container').contains('h2', /^\s*Title\s*$/);

这里contains的第二个参数指定了元素选择器，Cypress会持续在container范围内搜索文本匹配的<h2>，完全忽略渲染顺序。

方法2：使用filter过滤元素 #

通过filter筛选出符合文本条件的<h2>，再断言其存在：

cy.getTestid('container')
  .find('h2')
  .filter((index, el) => el.textContent.trim() === 'Title')
  .should('exist');

filter会遍历所有已加载和后续加载的<h2>，直到找到匹配的元素，should('exist')会触发Cypress的重试机制，确保等待到目标元素出现。

方法3：自定义断言验证 #

如果需要更灵活的文本校验逻辑，可以用自定义断言：

cy.getTestid('container')
  .find('h2')
  .should(($h2s) => {
    const hasTargetTitle = $h2s.some(el => el.textContent.trim() === 'Title');
    expect(hasTargetTitle).to.be.true;
  });

这种方式允许你编写复杂的校验规则，Cypress会不断重试直到断言成立。

内容的提问来源于stack exchange，提问作者Leo Jiang