前言
随着前端开发技术的不断发展，越来越多的项目倾向于选择使用 Cypress 进行前端自动化测试。Cypress 带来了更高效、准确、稳定和可靠的测试方案，但 Cypress 的灵活性和开放性也会带来一些挑战。本文将从实际案例出发，探讨 Cypress 如何快速定位元素并准确获取文本值，希望对开发者有所帮助。
快速定位元素
在进行测试时，我们需要根据前端页面元素进行定位并执行相应操作。Cypress 提供了一系列 API，使得我们可以在测试脚本中快速定位元素。以下是一些常见的定位方式：
根据 CSS 选择器定位
使用 cy.get() 方法根据 CSS 选择器定位元素。
cy.get('.className')
cy.get('#id')
cy.get('input[type="text"]')根据 Xpath 定位
使用 cy.xpath() 方法根据 Xpath 定位元素。
cy.xpath('//*[@id="form"]/div[1]/input')根据元素文本内容定位
使用 cy.contains() 方法根据元素文本内容定位元素。
cy.contains('Submit')
cy.contains(/Submit/i)根据表单元素属性的值定位
使用 cy.get() 方法根据表单元素属性的值定位元素。
cy.get('input[name="username"]')
cy.get('input[name="password"]')在使用以上方法进行定位时，需要注意的是元素定位的可读性和稳定性。建议使用整洁且具有上下文特征的元素定位方式，例如使用元素的 class、id 或元素属性。
准确获取文本值
在定位到元素之后，我们需要获取到该元素的文本内容，以便进行后续的断言。但是，在获取元素文本时，我们需要考虑以下几个因素。
元素文本与 HTML 标签内容的区别
在 HTML 中，标签和文本是分开的。例如:
<p>This is a <strong>text</strong>.</p>
在此 HTML 中，<p> 标签中的文本是 This is a text.，而 <strong> 标签中的文本是 text。
在 Cypress 中，我们可以使用 cy.get() 方法获取元素，但是获取元素的文本时，应该使用 .text() 方法。
cy.get('p').text() // "This is a text."元素包含子元素的情况
如果当前元素包含子元素，在获取元素文本时，需要注意搜索的范围。
在以下例子中，我们通过 cy.get('.parent') 方法获取父元素，但是在获取元素文本时，应该使用 .find() 方法进一步定位子元素，并使用 .text() 方法获取文本。
<div class="parent"> <span class="child">Hello</span> <span class="child">World</span> </div>
cy.get('.parent').find('.child').text() // "HelloWorld"元素包含换行符
如果元素包含换行符，需要使用 .trim() 方法将空格去掉。
cy.get('p').text().trim() // "This is a text."示例
如下所示的示例代码，演示了如何在 Cypress 中进行元素定位和文本值的获取。
-- -------------------- ---- -------
----------------- ------- -- -- -
-------- ------ -- -- -
-------------------------------
-- -----------
-------------------------
-- ----------
------------------------------
-- ------------
-------------------------------------------------
-- --------
------------------------------------------
-- ------
-------------------------------------------------- --------
--
--总结
Cypress 是一种强大而灵活的前端自动化测试方案。在进行测试时，定位元素和获取元素文本值是不可避免的步骤。在本文中，我们通过实际案例探讨了如何在 Cypress 中快速定位元素并准确获取文本值。希望本文能对同样使用 Cypress 进行前端自动化测试的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0c9b083d39b4881522b7f