Cypress 自动化测试可视化
前端自动化测试是很重要的，因为在迭代更新页面或者功能时，可以保证不破坏原有的功能。但是，针对于前端自动化测试，大家最熟悉的可能是 Selenium，其缺点明显，包括构建较为复杂、测试速度慢等等。为了解决这些问题，Cypress 对自动化测试的认知发生了很大的改变。
Cypress 是一款端到端的前端自动化测试工具，它不需要安装任何第三方依赖，拥有独特的可视化界面，同时还有实时的反馈信息以及更加丰富的 API 库。本文将为读者详细介绍 Cypress 在前端自动化测试中的应用及其优点。
一、安装 Cypress
安装 Cypress 常用的命令是：
npm install cypress --save-dev
二、Cypress 的使用
使用 Cypress 前，需要在根目录下添加一个叫 cypress 的文件夹，它和 src、public 一样是和 create-react-app 风格的结构一样的。同时，还需要在 package.json 中添加一些命令：
{
"scripts": {
"test": "cypress open"
}
}添加完命令后，我们现在就可以愉快的开始使用 Cypress 进行测试了。
三、Cypress 的优点
Cypress 一共有三个重要特点：可视化、实时反馈和丰富的 API 库。下面详细介绍它们：
1、可视化
Cypress 的设计理念是可视化的，所以 Cypress 测试用例可以在开发者工具内直接运行。开发者可以在自己的本地代码之中，通过可视化界面完成测试用例的编写和运行，且可以实时地看到页面的变化情况。这样就可以非常直观地知道测试到哪个环节了。
2、实时反馈
在使用操作时，Cypress 会实时给出测试过程中需要知道的实时信息。例如，当元素转换为查找元素时，Cypress 引擎会给出使用的选择器。
3、丰富的 API 库
Cypress 提供了众多有用的 API，以帮助开发者用一个简单的界面测试网站的功能。例如：
cy.visit('https://example.com/') // 访问指定 URL
cy.get('button').click() // 查找指定按钮并点击
cy.get('input').type('hello world') // 查找指定输入框并输入
cy.contains('submit').click() // 查找包含字符串 'submit' 的元素并点击四、示例代码
下面为大家介绍一个 Cypress 的示例代码，测试的是 Todo List。
先写测试代码(todo-spec.js)：
// javascriptcn.com 代码示例
describe('Todo List', () => {
it('Add a new to-do', () => {
cy.visit('http://localhost:3000')
cy.get('.new-todo').type('Cypress test').type('{enter}')
cy.get('.todo-list').find('li').should('have.length', 1)
})
it('Checkbox works', () => {
cy.get('.toggle').click()
cy.get('.todo-list').find('li').should('have.class', 'completed')
})
it('Todo can be deleted', () => {
cy.get('.destroy').click({ multiple: true })
cy.get('.todo-list').find('li').should('not.exist')
})
})打开 Cypress 界面，选择对应的测试文件。
运行测试：
可以看到，测试结果已经全部通过，并且结果展示也非常清晰。
五、总结
本文介绍了 Cypress 的基本使用和特点，以及在前端自动化测试中的应用，重点强调了 Cypress 拥有的可视化界面、实时反馈和丰富的 API 库三大优势。通过本文的学习，读者可以更好地掌握 Cypress 自动化测试的编写和运行，并且可以很好的将其应用在实际项目中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6548977c7d4982a6eb2db86a