赛普拉斯：断言文本是否在页面上被找到 X 次

Question

我正在为我的 JavaScript Web 应用程序编写功能测试。老实说，我没有太多使用 Cypress 编写测试的经验。我现在要测试的是，如果用户可以在页面上看到特定的文本消息 X 次。

这是我目前在测试中的断言。

cy.contains('Hello World').should('be.visible')

如您所见，我正在测试“Hello World”消息是否对用户可见。我还想测试的是，我想测试该消息是否被看到 3 次。我该怎么做？

以下是我的虚拟 HTML。

<form>

<div>
  <div>
  <input name="email" />
  </div>
  <ul>
    <li>This is required.</li>
  </ul>
</div>
<div>
  <div>
    <input name="password" />
  </div>
  <ul>
    <li>This is required.</li>
  </ul>
</div>

</form>

Answer 1

您可以使用each() (Cypress Docs) 来遍历元素并检查文本并像这样检查长度。 $list 将包含元素的出现次数。

cy.get('ul > li').each(($ele, $list) => {
    expect($ele).to.have.text('Hello World')
}).then(($list) => {
    expect($lis).to.have.length(3)
})

Answer 2

你应该可以使用

cy.contains('Hello World')
  .its('length')
  .should('eq', 3)

但这可能有点脆弱，因为.contains() 也适用于子元素。可能更具体一些更好 - 你能展示你正在使用的 HTML 吗？

---

要搜索列表，请验证包含“这是必需的”的<li> 的计数

cy.get('li:contains("This is required")')
  .its('length')
  .should('eq', 2)

见docs - contains()

产量
.contains() 产生它找到的新 DOM 元素。

这意味着赛普拉斯总是只返回一个元素，因此我们需要将contains() 移动到选择器中以获得准确的计数。

检查 Yields 段落总是很有用的，有些命令产生多个元素，有些甚至只产生第一个元素，即使多个匹配选择器。

请注意，这将忽略任何带有不同文本的 <li>。