手把手教你用 Cypress 实现自动化测试，开始你的快乐之旅吧！-JavaScript中文网-JavaScript教程资源分享门户

在日常的前端开发过程中，自动化测试是非常重要的一个环节。通过自动化测试，我们能够保证我们的代码质量，节约时间和精力，避免因为一些疏忽而导致线上的 bug。

在本文中，我们将向你展示如何使用 Cypress 来实现自动化测试。Cypress 是一个现代化的、直观易用的前端自动化测试工具，它的定位是对 Web 加以独特的优化，Cypress 提供了更好的框架实现，提供了比 Selenium 更好的开发者体验。

Cypress 简介

Cypress 是一种真正的端到端测试工具，可以在浏览器中进行测试。
Cypress 是基于 Electron 构建的，它与您的应用程序在同一个进程中运行，并可以直接访问您的代码和资源。
Cypress 利用了 Mocha 和 Chai 以及 Sinon 的最佳实践来执行测试用例。

相比于其他自动化测试工具，Cypress 不存在时序问题、Page Object，Cypress API 可以直接与 DOM 元素进行交互，从而让测试变得更加便捷。

为什么要使用 Cypress 进行自动化测试

自动化测试可以减少手工测试的时间。每次检测我们的 UI 或 Web应用程序，我们都需要手动完成基础的操作，比如登录，添加商品等等。手动测试会占用大量时间。
自动化测试可以更准确地检测应用程序或 UI 的功能。自动化测试将自动运行对浏览器页面的 UI 操作，避免了人工操作过程中的疏忽。
通过自动化测试，可以很大程度地提高应用程序的代码覆盖度。
自动化测试可以帮助检测与修复潜在问题，及时发现和解决与之相关的 bug。

基于 Cypress 进行自动化测试不仅可以让我们少些很多重复性工作，而且可以让我们把更多的精力投入到业务代码的开发中来，追求更高质量的产品。

Cypress 安装

我们可以通过两种方式安装 Cypress。

通过 npm 安装: npm install cypress --save-dev
通过 yarn 指令安装: yarn add cypress -D

安装完毕之后，我们可以通过运行以下命令来打开 Cypress:

./node_modules/.bin/cypress open

Cypress 配置

Cypress 会自动寻找根目录下的 cypress.json 进行配置。如果没有找到，则会使用默认配置。下面的是一个基本的配置:

{
  "baseUrl": "https://www.google.com",
  "chromeWebSecurity": false
}

Cypress 组成

Cypress 包括四个主要组件:

Cypress 视图器
Cypress 命令行工具
Cypress 测试运行器
Cypress 断言库

其中，Cypress 视图器和命令行工具可以让你创建和运行测试，而测试运行器和断言库则负责实际执行和验证测试。

Cypress 命令

Cypress API 提供了一些可在测试用例中使用的命令，下面我们将介绍一些常用命令。

cy.visit(url)，用于在浏览器中打开指定的 url。

describe('My First Test', () => {
  it('Visits the Cypress homepage', () => {
    cy.visit('https://www.cypress.io/')
  })
})

cy.get(selector)，可以选择指定的元素，并返回一个包含所有元素的 jQuery 对象。

describe('My First Test', () => {
  it('Clicks the link "type"', () => {
    cy.visit('https://www.cypress.io/')
    cy.contains('type').click()
  })
})

cy.contains(content)，选择包含文本 content 的元素。

describe('My First Test', () => {
  it('Finds the content "type"', () => {
    cy.visit('https://www.cypress.io/')
    cy.contains('type')
  })
})

cy.get(...) 和 cy.contains(...) 之后可以用 .click()、.type() 等方法来操作元素。

describe('My First Test', () => {
  it('Gets, types and asserts', () => {
    cy.visit('https://www.cypress.io/')
    cy.contains('Learn more').click()
    cy.url().should('include', '/features')
    cy.get('.page-content>div>.container-fluid>.card>.card-body>div:nth-child(1)').should('be.visible')
  })
})

Cypress 示例

下面我们将创建一个简单的测试用例，步骤如下：

打开 Google 网站。
搜索 Cypress。
确认搜索结果是否正确。

describe('Google search test', () => {
  it('Searches Google for Cypress', () => {
    cy.visit('https://google.com')
    cy.get('[name="q"]').type('Cypress{enter}')
    cy.title().should('include', 'Cypress')
    cy.contains('cypress.io').should('be.visible')
  })
})

我们可以通过 cy.visit() 打开浏览器并打开 Google 网站，然后使用 cy.get('[name="q"]') 筛选 Google 搜索框，并在该元素上调用 cy.type() 以键入“Cypress”并按 enter 键提交表单。页面跳转后，我们可以使用 cy.title() 来获取页面标题以确认搜索结果正确，然后使用 cy.contains() 确认结果中包含关键字。

注意，完整的 Cypress 测试文件应存储在 cypress/integration 文件夹中。

总结

通过本文，我们已经了解了什么是 Cypress，以及如何配置并使用 Cypress 进行自动化测试。我们还学习了 Cypress 提供的一些命令并编写了一个简单的测试用例作为实际示例。与其他自动化测试工具相比，Cypress 具有很多优势，可以帮助我们更快地进行测试，并找到和修复应用程序中的 bug。

总的来说，Cypress 真的很方便，Cypress 的 API 很简洁，命令很集中统一，与业务代码结合很紧密，正因为这样使用 Cypress 进行自动化测试，可以让我们的测试更加易读、易维护，提高测试覆盖率和测试质量，降低代码质量风险，给我们的工作带来便利。

Github 示范项目：https://github.com/cypress-io/cypress-example-todomvc

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64c4b36d83d39b4881825dee