本教程详细介绍了在cypress自动化测试中如何正确获取html元素的内部文本内容，并进行精确验证。文章涵盖了使用`have.text`断言字符串文本，以及如何提取数值型文本并进行数值比较（如大于、小于）的高级技巧，旨在帮助开发者提升测试脚本的健壮性。

在Cypress自动化测试中，准确地获取并验证网页元素的文本内容是至关重要的一环。许多初学者在尝试获取

、等标签的内部文本时，可能会错误地使用have.value断言，导致测试失败。本文将深入探讨在Cypress中获取元素文本内容的正确方法，以及如何进行更高级的数值型文本验证。

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

Cypress提供了多种断言方法来验证元素状态。其中，have.text和have.value是两个常被混淆的断言。

• have.text: 用于验证HTML元素的内部文本内容（即元素开始标签和结束标签之间的文本）。例如，对于

  Hello World

  ，其内部文本是Hello World。
• have.value: 主要用于验证表单元素（如、、<select>）的value属性值。例如，对于<input type="text" value="username">，其value是username。</select>

当尝试获取

Collectie

或4655这类非表单元素的文本时，正确的做法是使用have.text。

示例：正确获取元素内部文本并验证

假设我们有以下HTML结构：

Collectie
4655

要获取并验证Collectie和4655这两个文本值，应使用have.text：

cy.get('.heading-1').should('have.text', 'Collectie');
cy.get('.results').should('have.text', '4655');

如果尝试使用have.value，Cypress会报告错误，因为这些元素没有value属性，或其value属性为空。

针对多类名元素的精确选择

在某些情况下，一个元素可能拥有多个CSS类名，例如

Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。

下载

。为了更精确地定位元素，可以在选择器中同时使用这些类名。

示例：使用多类名选择器

cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie');

这种方式确保了只有同时拥有heading-1和page-header-heading这两个类的

元素才会被选中，增加了选择器的鲁棒性。

提取数值型文本并进行数值比较

当元素的内部文本是一个数字，并且我们需要对其进行数值上的比较（如大于、小于、等于）时，Cypress提供了一套灵活的链式操作。

1. invoke('text'): 这个命令用于获取元素的原始内部文本内容，并将其作为字符串返回。
2. then((text) => +text): then命令允许我们对上一个命令的结果进行处理。在这里，我们接收到字符串text，并使用一元加号运算符（+）将其转换为数字类型。这是JavaScript中将字符串快速转换为数字的常用方法。
3. Chai断言库的数值比较方法: Cypress集成了Chai断言库，提供了丰富的数值比较方法，例如：
   • be.gt (greater than): 大于
   • be.gte (greater than or equal to): 大于等于
   • be.lt (less than): 小于
   • be.lte (less than or equal to): 小于等于

示例：数值型文本的提取与比较

继续使用4655为例，假设我们要验证其数值是否大于4000：

cy.get('.results')
  .invoke('text') // 获取文本内容 "4655" (字符串)
  .then((text) => +text) // 将字符串 "4655" 转换为数字 4655
  .should('be.gt', 4000); // 断言数字 4655 大于 4000

// 更多数值比较示例
cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.gte', 4655); // 大于等于

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lt', 9000); // 小于

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lte', 4655); // 小于等于

这种链式操作使得对数值型文本的验证变得非常直观和强大。

注意事项与最佳实践

• 选择器精确性: 始终使用最精确且稳定的CSS选择器来定位元素，以避免因页面结构微小变化而导致的测试失败。
• 异步操作: Cypress命令是异步执行的。then命令在处理前一个命令的结果时非常有用，它确保了操作的顺序性。
• 文本清理: 在某些情况下，元素的内部文本可能包含额外的空格、换行符或特殊字符。如果需要精确匹配，可能需要在使用have.text之前对文本进行清理（例如使用trim()方法），或者使用正则表达式进行匹配。
• 错误处理: 当预期文本与实际文本不符时，Cypress会提供清晰的错误信息，帮助快速定位问题。

总结

掌握在Cypress中正确获取和验证元素文本内容是编写健壮自动化测试的关键。通过理解have.text与have.value的区别，并灵活运用invoke('text')和then进行数值型文本的处理，我们可以有效地覆盖各种文本验证场景。这些技巧不仅能提升测试脚本的准确性，也能提高其可维护性。