Cypress中获取元素文本内容与数值断言的技巧

本教程旨在解决cypress测试中常见的元素文本内容提取与断言问题。我们将深入探讨`have.text`与`have.value`断言器的正确使用场景，并演示如何通过`invoke('text')`结合类型转换，对提取的数值进行灵活的比较断言，确保测试的准确性和健壮性。

在Cypress自动化测试中，准确地获取页面元素的文本内容并进行断言是核心任务之一。然而，初学者常会将have.value与have.text混淆，导致断言失败。本文将详细阐述这两种断言器的区别，并介绍如何高效地提取非表单元素的文本内容，乃至将其转换为数值进行高级比较。

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

Cypress提供了多种断言器来验证元素属性或内容。其中，have.value和have.text是用于检查元素内容的常用断言器，但它们的应用场景截然不同。

• have.value: 此断言器专门用于表单输入元素，如<input>, <textarea>, <select>等。它用于检查这些元素的value属性值。例如，一个文本输入框的当前输入值就是其value属性。
• have.text: 此断言器用于检查大多数非表单元素的内部文本内容（即元素开始标签和结束标签之间的文本）。例如，<h1>, <span>, <p>, <div>等元素的显示文本都应使用have.text进行断言。

考虑以下HTML结构：

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

如果尝试使用have.value来断言<h1>或<span>的内部文本，Cypress会报告错误，因为这些元素没有value属性，或者其value属性为空。正确的做法是使用have.text：

// 断言 h1 元素的内部文本
cy.get('.heading-1').should('have.text', 'Collectie');

// 断言 span 元素的内部文本
cy.get('.results').should('have.text', '4655');

使用多类选择器精确查找元素

在某些情况下，一个元素可能拥有多个CSS类。为了提高选择器的精确性和稳定性，我们可以同时使用多个类名来定位元素。只需将类名用点号(.)连接起来即可。

例如，对于具有heading-1和page-header-heading两个类的<h1>元素，可以这样选择：

// 使用两个类名精确选择元素并断言其文本
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie');

这种方法有助于避免在页面上存在多个具有相同单个类的元素时产生歧义。

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

提取数值并进行高级断言

当我们需要对从页面上提取的文本内容进行数值比较（例如，判断一个数字是否大于或小于某个阈值）时，仅仅使用have.text就不够了。这时，我们需要更高级的链式操作：invoke('text')结合then()回调函数进行类型转换。

invoke('text')方法会调用jQuery的.text()方法，获取元素的全部文本内容（包括子元素的文本）。然后，通过then()回调函数，我们可以对这个文本字符串进行处理，例如将其转换为数字类型。

以下示例展示了如何提取<span>元素中的数字“4655”，并对其进行大于、大于等于、小于、小于等于的断言：

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

// 断言其大于等于 4000
cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.gte', 4000);

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

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

代码解析：

1. cy.get('.results'): 定位到CSS类为results的<span>元素。
2. .invoke('text'): 调用元素的text()方法，获取其内部文本内容，Cypress会将这个文本字符串作为下一个命令的主体。
3. .then((text) => +text): 这是一个关键步骤。
   • then()方法允许我们访问上一个命令（这里是invoke('text')的结果）并对其进行操作。
   • text参数接收到的是字符串形式的文本（例如"4655"）。
   • +text是一个JavaScript技巧，用于将字符串快速转换为数字。如果字符串无法转换为有效数字，它将返回NaN（Not a Number）。
   • 这个then块的返回值（即转换后的数字）会成为下一个命令的主体。
4. .should('be.gt', 4000): 使用Chai断言库提供的be.gt（greater than）断言器，验证当前主体（转换后的数字）是否大于4000。类似地，be.gte（greater than or equal to）、be.lt（less than）、be.lte（less than or equal to）用于进行其他比较。

注意事项

• 类型转换的健壮性: 在进行字符串到数字的转换时，请确保提取的文本确实是纯数字或可以被正确解析为数字的格式。如果文本包含非数字字符（如货币符号、逗号等），+text可能会导致NaN，从而使后续的数值比较断言失败。在这种情况下，你可能需要使用正则表达式或其他字符串处理方法来清洗文本，提取出纯数字部分。
• 断言器的选择: 始终根据元素的实际类型和期望验证的内容来选择正确的断言器。have.value用于表单输入，have.text用于一般文本内容，而数值比较则需要先提取文本并进行类型转换。

总结

掌握Cypress中元素文本内容的获取与断言是编写高效、稳定测试的关键。通过本文的学习，我们明确了have.text和have.value的正确应用场景，学会了如何使用多类选择器精确查找元素，并掌握了利用invoke('text')和then()进行数值提取和高级比较断言的方法。这些技巧将帮助你更准确、更灵活地验证页面元素的动态内容，从而提升测试的质量和覆盖范围。

以上就是Cypress中获取元素文本内容与数值断言的技巧的详细内容，更多请关注php中文网其它相关文章！