前言
Cypress 是一个基于 JavaScript 的前端自动化测试框架。它提供了一套完整的工具链，包括测试运行器、断言库、测试覆盖率报告等等。在现代前端开发中，自动化测试是必不可少的一部分，因此掌握 Cypress 的使用方法对于前端开发者来说十分重要。
本文将详细介绍 Cypress 的安装和使用方法，并提供一些实用的示例代码和指导意义，希望能够对大家有帮助。
安装 Cypress
安装 Cypress 很简单，只需要使用 npm 即可：
npm install cypress --save-dev
安装完成后，你可以在你的项目中找到 Cypress 的命令行工具：
./node_modules/.bin/cypress
由于这种方式不够方便，你可以将代码添加到 package.json 的 scripts 属性中，以便更轻松地运行 Cypress：
{
"scripts": {
"cypress": "cypress open"
}
}现在，你就可以使用以下命令启动 Cypress 了：
npm run cypress
使用 Cypress 测试你的应用程序
在 Cypress 中，你的测试代码将直接与 DOM 交互。这使得测试更加接近实际情况，并且可以更轻松地覆盖不同的测试场景。
配置 Cypress
在开始编写测试之前，你需要为 Cypress 配置你的测试应用程序。这可以通过 cypress.json 文件完成：
{
"baseUrl": "http://localhost:3000",
"viewportWidth": 1280,
"viewportHeight": 720
}在这个文件中，你可以指定 Cypress 的基本 URL，以及游览器的视口大小。
编写 Cypress 测试用例
Cypress 提供了一套简单的 API，可以帮助你编写测试。
以下是一个基本的示例测试文件 sample_spec.js：
// www.javascriptcn.com code example
describe('My First Test', () => {
it('Visits the Kitchen Sink', () => {
cy.visit('https://example.cypress.io')
cy.contains('type').click()
cy.url().should('include', '/commands/actions')
cy.get('.action-email')
.type('hello@cypress.io')
.should('have.value', 'hello@cypress.io')
})
})在上面的测试中，我们访问了一个指定的网站，然后在网站上找到了一个元素并单击了它。我们还测试了我们所输入的电子邮件地址是否正确。
运行 Cypress 测试用例
你可以通过命令行运行 Cypress，也可以通过图形界面。在图形界面中，你可以运行所有测试、仅运行特定测试，以及查看测试运行的详细信息。
要启动 Cypress 的图形界面，只需要运行以下命令：
npm run cypress
这将打开一个交互式的 Cypress 窗口。你可以在该窗口中选择要运行的测试。
Cypress 断言库
常用的 Assert 库有: Chai, Should, Expect，Cypress 选择了 Chai 作为默认的断言库。
// www.javascriptcn.com code example
describe('My First Test', () => {
it('clicks the button', () => {
cy.visit('https://example.cypress.io')
cy.contains('type').click()
cy.url().should('include', '/commands/actions')
cy.get('.action-email')
.type('hello@cypress.io')
.should('have.value', 'hello@cypress.io')
// 之后会有一个断言处理的示例
cy.get('.action-form')
.submit()
.next()
.should('contain', 'Your form has been submitted!')
})
})Cypress 交互式测试
需要打开在指定 DOM 中的交互性测试，使用 cy.intercept() 和 cy.stub()
// www.javascriptcn.com code example
describe('Mock backend', () => {
it('should allow logging in', () => {
cy.intercept('/api/login', (req) => {
const {username, password} = req.body
if (username === 'admin' && password === 'password') {
req.reply({success: true})
} else {
req.reply({success: false})
}
}).as('loginRequest')
cy.visit('/login')
cy.get('[data-testid=username]').type('admin')
cy.get('[data-testid=password]').type('password')
cy.get('[data-testid=submit]').click()
cy.wait('@loginRequest')
cy.contains('Welcome, admin').should('be.visible')
})
})在 CI/CD 中运行 Cypress
使用 Cypress 主要用于自动化测试，这意味着在 CI/CD 流程中运行测试是必不可少的。Cypress 可以与各种 CI/CD 工具集成，包括 Travis CI、CircleCI、Jenkins 和 GitLab CI 等等。
要在 CI/CD 流程中运行 Cypress，你需要配置一个 "headless" 和 "no-application mode"，这将自动运行测试并生成详细的测试报告。
以下是一个简单的 Travis CI 配置示例：
// www.javascriptcn.com code example
language: node_js
node_js:
- '14'
addons:
chrome: stable
cache:
directories:
- ~/.npm
- ~/.cache
install:
- npm ci
script:
- npm run cy:run
after_script:
- npm run cy:report:upload在上面的示例中，npm run cy:run 脚本运行测试，npm run cy:report:upload 上传测试报告到 cypress-dashboard。
Cypress 支持的游览器
Cypress 支持 Chrome、Firefox 和 Edge 游览器。在默认情况下，Cypress 会在内置的 Electron 游览器中运行测试，这是较快的选择。
如果你想在其他游览器中运行测试，你需要在 cypress.json 中指定浏览器：
// www.javascriptcn.com code example
{
"chromeWebSecurity": false,
"defaultCommandTimeout": 10000,
"watchForFileChanges": true,
"viewportWidth": 1280,
"viewportHeight": 720,
"baseUrl": "http://localhost:3000",
"screenshotOnRunFailure": true,
"testFiles": "**/*.test.js",
"browser": "chrome"
}Cypress 高级特性
Cypress 还有一些高级特性，如针对性能测试的 cy.route() 和 cy.wait()，用于测试加载延迟的 cy.clock() 和 cy.tick() 等等。了解这些特性，可以帮助你更好地编写测试，提高测试效率。
结语
在本文中，我们介绍了 Cypress 的安装方法、测试用例编写、运行方法、断言库、交互式测试、在 CI/CD 流程中使用、浏览器支持和高级特性等方面的内容。希望这些信息对你有帮助，让你更好地理解 Cypress，更有效地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6aca0a941bf7134c75356