本教程详细阐述了在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');正确示范：
要正确获取并验证这些元素的内部文本，应使用 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() 回调函数来实现这一目标。
- invoke('text'): 这个命令用于调用DOM元素上的函数。在这里，它调用元素的 text() 方法，以获取其内部文本内容。
- .then((text) => +text): then() 是一个回调函数，它接收上一个命令（invoke('text')）的结果作为参数。+text 是一种JavaScript的简写方式，用于将字符串快速转换为数字类型。例如，字符串 "4655" 会被转换为数字 4655。
- 数值断言: 转换成数字后，就可以使用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中验证网页上的文本和数值内容，从而编写出更健壮、更可靠的自动化测试。
