本文详细介绍了在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: 此断言主要用于验证表单元素（如、、<select>）的value属性。例如，一个文本输入框的当前值。</select>
• have.text: 此断言用于验证非表单元素（如

  、、

  、

  等）的内部文本内容（即DOM节点之间的文本）。

  常见误区： 许多用户在尝试获取

  或这类元素的内部文本时，会错误地使用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会报告错误，因为

  元素没有value属性，其内部文本不通过value属性暴露。

  正确做法：使用 have.text

  要正确获取并验证

  

  Java Api Extractor

  从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

  下载

  或等元素的内部文本，应使用have.text断言。

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

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

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

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

  在某些场景下，元素的内部文本可能是一个数字，并且我们需要对其进行数值上的比较，例如判断一个数量是否大于某个阈值。在这种情况下，仅仅使用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)</span>

  在这个例子中：

  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中进行元素文本内容的验证更加高效和准确，从而构建出更健壮的自动化测试套件。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！