Cypress中正确获取和验证HTML元素文本内容的方法

本文详细介绍了在cypress测试框架中如何准确获取并验证html元素的文本内容。核心在于区分`have.value`和`have.text`断言，前者适用于表单元素，后者则用于获取非表单元素的内部文本。此外，教程还演示了如何利用`invoke('text')`结合类型转换，对提取的数值文本进行高级的数值比较验证。

Cypress中HTML元素文本内容的提取与断言

在进行前端自动化测试时，经常需要验证页面上各种元素的文本内容，例如标题、段落、或显示数据的区域。Cypress作为一款流行的端到端测试框架，提供了强大的断言机制来处理这些场景。然而，对于初学者来说，一个常见的困惑是何时使用have.value以及何时使用have.text。本文将深入探讨这两种断言的区别，并展示如何正确地提取和验证HTML元素的文本内容，包括高级的数值比较。

理解 have.value 与 have.text 的区别

Cypress的should()命令可以与多种断言链式调用，其中have.value和have.text是用于验证元素内容的两种常见断言。它们的区别在于所针对的HTML元素类型和内容类型：

• have.value: 此断言主要用于验证表单元素（如<input>、<textarea>、<select>）的value属性。例如，一个文本输入框的当前值。
• have.text: 此断言用于验证非表单元素（如<h1>、<span>、<p>、<div>等）的内部文本内容（即DOM节点之间的文本）。

常见误区： 许多用户在尝试获取<h1>或<span>这类元素的内部文本时，会错误地使用have.value。例如，对于以下HTML结构：

<h1 class="heading-1 page-header-heading">Collectie</h1>
<span class="results">4655</span>

如果尝试使用cy.get('.heading-1').should('have.value', 'Collectie')，Cypress会报告错误，因为<h1>元素没有value属性，其内部文本不通过value属性暴露。

正确做法：使用 have.text

立即学习“前端免费学习笔记（深入）”；

要正确获取并验证<h1>或<span>等元素的内部文本，应使用have.text断言。

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

// 验证<h1>元素的文本内容
cy.get('.heading-1').should('have.text', 'Collectie');

// 验证<span>元素的文本内容
cy.get('.results').should('have.text', '4655');

此外，在选择元素时，为了提高选择器的精确性，可以组合使用多个类名：

// 使用多个类名精确选择<h1>元素
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie');

高级文本内容验证：数值比较

在某些场景下，元素的内部文本可能是一个数字，并且我们需要对其进行数值上的比较，例如判断一个数量是否大于某个阈值。在这种情况下，仅仅使用have.text断言是不够的，因为它只能进行字符串的精确匹配。

Cypress提供了invoke('text')命令来提取元素的内部文本，然后我们可以利用JavaScript的特性将其转换为数字，再进行数值比较。

cy.get('.results')
  .invoke('text') // 提取<span>元素的内部文本，返回一个字符串
  .then((text) => +text) // 使用一元加号操作符将字符串转换为数字
  .should('be.gt', 4000); // 断言数字大于4000 (greater than)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.gte', 4000); // 断言数字大于或等于4000 (greater than or equal to)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lt', 9000); // 断言数字小于9000 (less than)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lte', 9000); // 断言数字小于或等于9000 (less than or equal to)

在这个例子中：

1. cy.get('.results').invoke('text')：获取.results元素的内部文本，例如"4655"，它是一个字符串。
2. .then((text) => +text)：这是一个回调函数，text参数接收上一步获取的字符串。+text是JavaScript中将字符串快速转换为数字的一种方法（等同于Number(text)或parseInt(text, 10)）。
3. .should('be.gt', 4000)：Cypress集成了Chai断言库，be.gt（greater than）是Chai提供的数值比较断言，用于判断当前值是否严格大于4000。类似地，还有be.gte (greater than or equal to), be.lt (less than), be.lte (less than or equal to)。

总结与注意事项

• 区分 have.value 和 have.text：这是Cypress中验证元素内容的关键。记住have.value用于表单元素的value属性，而have.text用于获取其他元素的内部文本。
• 精确选择器：使用组合类名（如.class1.class2）可以更精确地定位元素，减少测试的脆弱性。
• 数值验证：当需要对提取的文本进行数值比较时，务必使用invoke('text')获取文本，并通过then((text) => +text)将其转换为数字，再利用Chai的数值比较断言。
• 错误信息：仔细阅读Cypress的错误信息。例如，"expected ... to have value ..., but the value was ''"通常意味着你错误地使用了have.value来验证非表单元素的内部文本。

掌握这些技巧将使您在Cypress中进行元素文本内容的验证更加高效和准确，从而构建出更健壮的自动化测试套件。

以上就是Cypress中正确获取和验证HTML元素文本内容的方法的详细内容，更多请关注php中文网其它相关文章！