Cypress中提取与验证HTML元素文本内容的完整指南

本教程详细介绍了在cypress中如何正确提取html元素的文本内容并进行验证。它将阐明`have.value`与`have.text`的区别，演示如何使用css选择器定位元素，以及如何处理数字文本并进行大小比较断言，帮助开发者高效地进行ui自动化测试。

在Cypress进行UI自动化测试时，经常需要从网页元素中提取文本内容并进行验证。然而，初学者可能会混淆have.value和have.text这两个断言，导致测试失败。本文将深入探讨如何在Cypress中准确地获取并验证各类HTML元素的文本内容。

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

在HTML中，某些元素如<input>, <textarea>, <select>等具有value属性，用于存储用户输入或预设值。对于这类元素，我们通常使用have.value断言来验证其value属性的值。

然而，对于大多数其他HTML元素，如<h1>, <span>, <p>, <div>等，它们的内容是作为元素的内部文本（inner text）存在的，而不是通过value属性。此时，尝试使用have.value来断言其内部文本会导致错误，因为这些元素通常没有value属性或其value为空字符串。

例如，对于以下HTML结构：

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

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

如果尝试使用cy.get('.heading-1').should('have.value', 'Collectie')，Cypress会报告错误，指出<h1>元素没有值为'Collectie'的value属性。

正确提取并验证元素文本内容

要正确提取并验证元素的内部文本，我们应该使用have.text断言。have.text专门用于检查元素的内部文本是否与预期值匹配。

以下是使用have.text验证上述HTML元素文本的正确方法：

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

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

// 验证<span>元素的内部文本
cy.get('.results').should('have.text', '4655');

使用组合CSS选择器定位元素

在某些情况下，一个元素可能具有多个CSS类，为了提高选择器的精确性和健壮性，我们可以使用组合CSS选择器来定位元素。例如，如果一个<h1>元素同时具有heading-1和page-header-heading两个类，我们可以这样定位它：

// 使用组合类选择器定位元素并验证其文本
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie');

这种方式确保了我们选择的是具有特定所有指定类的元素，减少了误选的可能性。

高级文本处理与数值比较

当元素的内部文本是数字，并且我们需要进行数值比较（如大于、小于、大于等于、小于等于）时，Cypress提供了一套灵活的方法。这通常涉及到获取文本内容，将其转换为数字类型，然后进行数值断言。

以下是一个示例，展示如何获取<span>元素的数字文本，并进行各种数值比较：

// 假设 .results 元素的文本内容是 "4655"
cy.get('.results')
  .invoke('text') // 获取元素的内部文本内容
  .then((text) => +text) // 将获取到的文本字符串转换为数字 (+text 是一个简写方式，等同于 Number(text))
  .should('be.gt', 4000); // 断言数字大于 4000 (greater than)

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.gte', 4000); // 断言数字大于等于 4000 (greater than or equal to)

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

cy.get('.results')
  .invoke('text')
  .then((text) => +text)
  .should('be.lte', 9000); // 断言数字小于等于 9000 (less than or equal to)

在这个例子中：

• invoke('text')是一个Cypress命令，用于调用DOM元素的text()方法，从而获取其内部文本内容。
• .then((text) => +text)是一个回调函数，它接收上一个命令（invoke('text')）返回的文本字符串，并使用一元加号操作符（+）将其快速转换为数字类型。
• should('be.gt', value)等是Chai断言库提供的数值比较断言，be.gt表示“大于”，be.gte表示“大于等于”，be.lt表示“小于”，be.lte表示“小于等于”。

注意事项与最佳实践

1. 区分have.value和have.text: 始终牢记have.value用于表单元素的value属性，而have.text用于获取元素的内部文本。
2. 选择器的精确性: 使用尽可能精确的CSS选择器来定位元素，避免因页面结构变化而导致测试失败。组合类选择器或ID选择器通常是更稳健的选择。
3. 处理异步操作: Cypress命令是异步执行的。invoke()和then()等命令是处理异步操作和链式调用的关键。
4. 错误处理: 在实际项目中，考虑文本内容可能为空或非预期的场景，可以添加额外的断言或条件逻辑来增强测试的健壮性。
5. 类型转换: 在进行数值比较之前，务必确保将文本内容正确转换为数字类型，以避免字符串比较带来的逻辑错误。

总结

掌握在Cypress中正确提取和验证HTML元素文本内容是编写高效UI自动化测试的关键。通过理解have.value和have.text的区别，熟练运用CSS选择器，以及掌握文本到数字的转换和数值比较方法，开发者可以构建出更加健壮和可靠的Cypress测试套件。希望本教程能帮助您更好地利用Cypress进行前端测试。

以上就是Cypress中提取与验证HTML元素文本内容的完整指南的详细内容，更多请关注php中文网其它相关文章！