本教程详细阐述了在cypress自动化测试中，如何正确获取并验证html元素的文本内容。它纠正了常见的`have.value`误用，强调应使用`have.text`进行内联文本断言。此外，教程还深入介绍了如何将提取的文本转换为数值，并利用cypress的断言机制进行精确的数值比较，以确保测试的准确性和鲁棒性。
在Cypress进行端到端测试时，经常需要获取网页上特定元素的文本内容并进行验证。然而，许多初学者可能会混淆Cypress中用于断言元素内容的两个关键方法：have.value 和 have.text。理解它们的区别是编写健壮测试的关键。
理解Cypress中的文本断言
have.value 断言通常用于表单元素，如 ,
然而，对于大多数非表单元素，如
, ,
,
等，它们的内容是位于标签内部的文本节点，而非 value 属性。在这种情况下，我们应该使用 have.text 来断言元素的内部文本。
考虑以下HTML结构：
立即学习“前端免费学习笔记（深入）”；
Collectie
4655
如果尝试使用 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选择器是定位元素的最佳实践。当元素具有多个类名时，可以组合这些类名来创建更具体的选择器，从而提高测试的稳定性和准确性。
例如，对于
Collectie
，可以使用 .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 (小于或等于)。
以下是如何提取 4655 中的数字并进行数值比较的示例：
// 验证数值是否大于指定值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中验证网页上的文本和数值内容，从而编写出更健壮、更可靠的自动化测试。
等，它们的内容是位于标签内部的文本节点，而非 value 属性。在这种情况下，我们应该使用 have.text 来断言元素的内部文本。
考虑以下HTML结构：
立即学习“前端免费学习笔记（深入）”；
Collectie
4655
如果尝试使用 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选择器是定位元素的最佳实践。当元素具有多个类名时，可以组合这些类名来创建更具体的选择器，从而提高测试的稳定性和准确性。
例如，对于
Collectie
，可以使用 .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 (小于或等于)。
以下是如何提取 4655 中的数字并进行数值比较的示例：
// 验证数值是否大于指定值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元素的文本及数值内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1584750.html
微信扫一扫 
支付宝扫一扫 
