前言
随着前端开发的不断发展，测试在软件开发中的重要性无可替代。而 Cypress 作为一款全面的前端测试工具，其测试功能的强大无以伦比。其中，页面元素的截取和比较是其功能中非常重要的一部分。
本文主要介绍如何使用 Cypress 进行页面元素的截取和比较。涵盖的内容包括：使用 Cypress 对页面元素进行截图、将截图与预期图进行比较，以及可能出现的问题和解决方法等。
页面元素的截图
在使用 Cypress 进行页面元素截图时，主要需要使用 cy.screenshot() 函数：
cy.screenshot()
这个函数将会在 Cypress 的自定义文件夹中生成一个截屏图片，以供后期调试使用。
当然，如果需要指定截图范围，还可以使用 cy.get() .screenshot() 组合的方式：
cy.get('.my-selector').screenshot()这个函数会对指定的选择器绑定的元素进行截图。
页面元素的比较
在测试过程中，最核心的部分就是页面元素的比较。比较的工具包括：
cy.compare()函数cy.wait()函数cy.wrap()函数
cy.compare() 函数
Cypress 中的 cy.compare() 函数为我们提供了一个简单而准确地比较截图和预期图的方法。其代码如下：
cy.compareSnapshot('my-snapshot', {
capture: 'viewport'
})这个函数将会与 Cypress 生成的快照图“my-snapshot”进行比较。
cy.wait() 函数
在使用 cy.compare() 函数时，有可能出现截图还未生成，比较函数就已经执行的情况。此时可以使用 cy.wait() 函数：
cy.wait(1000) // 等待 1 秒钟
等待时间可以根据实际情况进行设置。
cy.wrap() 函数
Cypress 中的 cy.wrap() 函数用于封装测试对象，以便使用循环遍历和其他操作：
cy.wrap().scrollTo('bottom')这个函数用于设置滚动条操作。
案例分析
在以上讲解基础上，我们可以来看一个完整的案例。这个案例将测试一个基本的登录界面，其中要求比较截图和预期图，以确保登录界面的可用性。
整体代码：
describe('页面元素截取和比较测试', () => {
beforeEach(() => {
cy.visit('/login')
})
it('测试登录界面', () => {
cy.get('#username').type('testUser')
cy.get('#password').type('testPassword')
cy.get('form').submit()
cy.compareSnapshot('login-page', {
capture: 'viewport'
})
cy.wait(2000)
cy.get('#username').clear()
cy.get('#password').clear()
})
})beforeEach()
在测试开始前，前置操作函数 beforeEach() 函数会被执行，这里通过 cy.visit() 函数访问登录界面。
it()
it() 函数被 Cypress 用于执行具体的测试项。这里测试的内容主要包括输入账号密码、提交登录表单、对页面截屏进行对比等操作。
比较截屏
在输入并提交登录信息之后，使用 cy.compareSnapshot() 函数对页面截屏进行对比。这个操作会生成一个用户自定义的截屏图片，Cypress 会自动将这个图片与预期图片进行对比，然后输出测试结果。
清理操作
最后，使用 cy.get() 函数和 .clear() 方法进行清理操作，释放测试资源。
总结
- Cypress 是一款前端测试工具，测试功能强大。
- 页面元素的截取和比较是 Cypress 测试功能中的重要部分。
- 使用 Cypress 进行页面元素截取的主要方法就是
cy.screenshot()函数。 - 要进行页面元素的比较，可以使用
cy.compare()函数、cy.wait()函数和cy.wrap()函数等。 - 可以通过完整的案例分析来更好地理解页面元素截取和比较的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658f9c9feb4cecbf2d53ab79