Cypress：高效提取与验证HTML元素的文本及数值内容

本教程详细阐述了在cypress自动化测试中，如何正确获取并验证html元素的文本内容。它纠正了常见的`have.value`误用，强调应使用`have.text`进行内联文本断言。此外，教程还深入介绍了如何将提取的文本转换为数值，并利用cypress的断言机制进行精确的数值比较，以确保测试的准确性和鲁棒性。

在Cypress进行端到端测试时，经常需要获取网页上特定元素的文本内容并进行验证。然而，许多初学者可能会混淆Cypress中用于断言元素内容的两个关键方法：have.value 和 have.text。理解它们的区别是编写健壮测试的关键。

理解Cypress中的文本断言

have.value 断言通常用于表单元素，如 <input>, <textarea> 或 <select>，它会检查这些元素的 value 属性。例如，如果有一个 <input type="text" value="Hello">，那么 cy.get('input').should('have.value', 'Hello') 是正确的。

然而，对于大多数非表单元素，如 <h1>, <span>, <div>, <p> 等，它们的内容是位于标签内部的文本节点，而非 value 属性。在这种情况下，我们应该使用 have.text 来断言元素的内部文本。

考虑以下HTML结构：

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

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

如果尝试使用 have.value 来验证这些元素的文本，Cypress 将会报错，因为这些元素没有 value 属性，或者其 value 属性为空字符串。

错误示例：

// 错误示范：对非表单元素使用 have.value 会失败
// cy.get('.heading-1').should('have.value', 'Collectie');
// cy.get('.results').should('have.value', '4655');

正确示范：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

要正确获取并验证这些元素的内部文本，应使用 have.text 断言：

// 正确示范：使用 have.text 验证内部文本
cy.get('.heading-1').should('have.text', 'Collectie');
cy.get('.results').should('have.text', '4655');

精确选择器与文本验证

在Cypress中，使用精确的CSS选择器是定位元素的最佳实践。当元素具有多个类名时，可以组合这些类名来创建更具体的选择器，从而提高测试的稳定性和准确性。

例如，对于 <h1 class="heading-1 page-header-heading">Collectie</h1>，可以使用 .heading-1.page-header-heading 这样的组合选择器：

// 使用更具体的选择器进行文本验证
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie');

提取并验证数值内容

在某些场景下，元素内部的文本可能是一个数字，并且我们需要对这个数字进行数值上的比较（例如，大于、小于、等于）。Cypress 提供了 invoke() 命令和 .then() 回调函数来实现这一目标。

1. invoke('text'): 这个命令用于调用DOM元素上的函数。在这里，它调用元素的 text() 方法，以获取其内部文本内容。
2. .then((text) => +text): then() 是一个回调函数，它接收上一个命令（invoke('text')）的结果作为参数。+text 是一种JavaScript的简写方式，用于将字符串快速转换为数字类型。例如，字符串 "4655" 会被转换为数字 4655。
3. 数值断言: 转换成数字后，就可以使用Chai断言库提供的数值比较方法，如 be.gt (大于), be.gte (大于或等于), be.lt (小于), be.lte (小于或等于)。

以下是如何提取 <span>4655</span> 中的数字并进行数值比较的示例：

// 验证数值是否大于指定值
cy.get('.results')
  .invoke('text') // 获取元素的内部文本，例如 "4655"
  .then((text) => +text) // 将字符串转换为数字，例如 4655
  .should('be.gt', 4000); // 断言数字大于 4000

// 验证数值是否大于或等于指定值
cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.gte', 4655); // 断言数字大于或等于 4655

// 验证数值是否小于指定值
cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lt', 9000); // 断言数字小于 9000

// 验证数值是否小于或等于指定值
cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lte', 4655); // 断言数字小于或等于 4655

注意事项与最佳实践

• 区分 have.value 和 have.text: 始终记住 have.value 用于表单元素的 value 属性，而 have.text 用于获取元素的内部文本内容。
• 数据类型转换: 在进行数值比较时，务必通过 then((text) => +text) 等方式将提取的字符串转换为数字类型。直接比较字符串可能会导致非预期的结果（例如，字符串 "10" 小于字符串 "2"）。
• 链式调用: Cypress 命令设计为链式调用，这不仅提高了代码的可读性，也确保了命令的执行顺序和上下文传递。
• 错误信息: 当断言失败时，Cypress 会在测试运行器中提供详细的错误信息和截图，帮助开发者快速定位问题。

通过掌握 have.text 和 invoke('text') 的用法，您将能够更准确、更灵活地在Cypress中验证网页上的文本和数值内容，从而编写出更健壮、更可靠的自动化测试。

以上就是Cypress：高效提取与验证HTML元素的文本及数值内容的详细内容，更多请关注php中文网其它相关文章！