在前端开发中，对于一个开发完毕的页面，我们需要保证该页面的 UI 表现符合用户的使用习惯，且功能正确。于是，通过自动化测试的方式，可以确保代码不会因为频繁的修改而影响页面的正确性。
Cypress 是一个端到端测试框架，它可以让你编写与用户交互的前端测试。本篇文章将介绍 Cypress 的基本使用方法，以及如何使用 Cypress 进行 UI 自动化测试。
安装 Cypress
使用 npm 安装 Cypress：
npm install cypress --save-dev
编写测试用例
添加测试脚本
在 package.json 文件中添加 Cypress 的脚本：
{
"scripts": {
"test": "cypress open"
}
}这样可以通过 npm run test 命令来启动 Cypress。Cypress 会自动运行测试并生成报告。
创建测试用例
在 cypress/integration 目录下创建一个测试用例文件 example.spec.js。
describe('Example', function() {
it('should visit the home page', function() {
cy.visit('/')
})
})这个测试用例会访问首页，并确保该页面已经加载完成。
运行测试
执行 npm run test 命令，Cypress 会自动运行测试，显示测试结果报告。
Cypress 还提供了交互式的测试环境，可以通过 npm run cypress:open 命令打开。
使用 Cypress 进行 UI 自动化测试
在浏览器中，有很多操作需要我们来测试，例如点击、输入、滚动等。下面是一个实例，用 Cypress 来完成一个搜索功能的测试。
新建一个测试用例
在 cypress/integration 目录下创建一个测试用例文件 search.spec.js。
describe('Search Functionality', function() {
it('should navigate to Google and search', function() {
cy.visit('https://www.google.com/')
cy.get('input[name=q]').type('Cypress.io{Enter}')
cy.url().should('include', '/search')
})
})首先，我们访问谷歌主页。然后，使用 cy.get('input[name=q]') 来获取搜索框，并使用 type() 方法向搜索框中输入关键字 Cypress.io。在输入完成后，按下 Enter 键来提交表单。最后，我们通过 cy.url() 方法来检查是否跳转到谷歌搜索页面。
运行测试
执行 npm run test 命令，Cypress 会自动运行测试，显示测试结果报告。
Cypress 还提供了交互式的测试环境，可以通过 npm run cypress:open 命令打开。
总结
Cypress 是一个十分优秀的前端自动化测试框架，可以帮助我们轻松地完成 UI 自动化测试。如果你还没有使用过 Cypress 进行自动化测试，不妨试试。它可以让你的代码更加可靠，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0a1d648841e9894cb61bd