Cypress End-To-End 测试教程 —— 从入门到实战-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 web 应用程序中，前端测试已经成为一个非常重要的环节。而 Cypress 是一个 JavaScript 端到端测试框架，它能够帮助我们在浏览器中模拟用户交互，以及检查应用程序的行为是否符合预期。本文将详细介绍 Cypress 的使用方法，从入门到实战，希望能够帮助读者更好地了解 Cypress 并在项目中应用。

安装 Cypress

在开始使用 Cypress 之前，我们需要先安装它。可以通过 npm 安装，执行以下命令即可：

npm install cypress --save-dev

安装完成后，我们可以通过以下命令启动 Cypress：

npx cypress open

这将会启动 Cypress 的 GUI 界面，我们可以在其中进行测试。

编写测试用例

Cypress 的测试用例是基于 JavaScript 编写的。我们可以在 cypress/integration 目录下创建测试文件，例如 example.spec.js，然后在其中编写测试用例。以下是一个简单的示例：

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

这个测试用例非常简单，它只是断言了一个真值是否为真。我们可以通过以下命令来运行这个测试用例：

npx cypress run --spec cypress/integration/example.spec.js

当然，我们也可以通过 GUI 界面来运行测试用例。

模拟用户交互

Cypress 的一个重要特性就是能够模拟用户交互。例如，我们可以使用 cy.visit() 命令来打开一个页面，并使用 cy.get() 命令来获取页面上的元素。以下是一个示例：

// javascriptcn.com 代码示例
describe('My Second 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 的官方示例页面，并点击了页面上的“type”按钮，然后断言了页面的 URL 是否包含了 /commands/actions，以及输入框是否正确地输入了文本。

断言页面行为

Cypress 还能够检查页面的行为是否符合预期。例如，我们可以使用 cy.get() 命令来获取页面上的元素，并使用 cy.should() 命令来断言元素的属性或样式是否符合预期。以下是一个示例：

// javascriptcn.com 代码示例
describe('My Third Test', () => {
  it('Checks 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')
    cy.get('[type="checkbox"]')
      .check()
      .should('be.checked')
    cy.get('[type="radio"]')
      .check('radio1')
      .should('be.checked')
    cy.get('.action-disabled')
      .should('be.disabled')
    cy.get('.action-focus')
      .focus()
      .should('have.class', 'focus')
  })
})

这个测试用例在前一个示例的基础上，增加了对复选框、单选框、禁用元素以及焦点元素的检查。

使用自定义命令

Cypress 还允许我们创建自定义命令，以便在测试用例中重复使用。例如，我们可以创建一个 login() 命令，用于模拟用户登录。以下是一个示例：

// javascriptcn.com 代码示例
Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login')
  cy.get('#username').type(username)
  cy.get('#password').type(password)
  cy.get('#login-button').click()
})

describe('My Fourth Test', () => {
  it('Logs in', () => {
    cy.login('myusername', 'mypassword')
    cy.url().should('include', '/dashboard')
  })
})

这个测试用例使用了我们刚刚创建的 login() 命令，以便在测试用例中重复使用。

实战：测试一个 Todo 应用程序

最后，我们来实战一下，测试一个 Todo 应用程序。这个应用程序非常简单，它只有一个文本框和一个添加按钮，用户可以在文本框中输入待办事项，然后点击添加按钮，将待办事项添加到列表中。

我们可以使用 Cypress 来测试这个应用程序。以下是一个示例：

// javascriptcn.com 代码示例
describe('Todo App', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('Adds a todo', () => {
    cy.get('.new-todo').type('Buy milk{enter}')
    cy.get('.todo-list li').should('have.length', 1)
    cy.get('.todo-list li').should('contain', 'Buy milk')
  })

  it('Deletes a todo', () => {
    cy.get('.new-todo').type('Buy milk{enter}')
    cy.get('.todo-list li').should('have.length', 1)
    cy.get('.todo-list li button.destroy').click()
    cy.get('.todo-list li').should('have.length', 0)
  })
})

这个测试用例先打开了我们的 Todo 应用程序，然后模拟了添加一个待办事项和删除一个待办事项的操作，并检查了操作后页面的变化。

总结

本文介绍了 Cypress 的使用方法，从入门到实战。我们学习了如何编写测试用例、模拟用户交互、断言页面行为、使用自定义命令以及测试一个 Todo 应用程序。希望本文能够帮助读者更好地了解 Cypress 并在项目中应用。

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