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

Question

我正在为我的 JavaScript 网络应用程序编写功能测试。老实说，我没有太多使用 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

你应该可以使用

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()

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

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

检查 Yields 段落总是有用的，有些命令会产生多个元素，而有些命令只会产生第一个元素，即使多个匹配选择器也是如此。

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

Answer 2

您可以使用 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)
})

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

Cypress: asserting if the text is found X number of times on a page

javascript

functional-testing

cypress