如何在 Cypress 中进行高速运行

Cypress 是一个流行的前端端到端测试工具，它的特点是易于使用和可靠性高。然而，随着测试用例的增加和复杂度的提高，Cypress 的运行速度可能会变慢，这会影响到测试的效率和开发人员的工作效率。本文将介绍如何在 Cypress 中进行高速运行，从而提高测试效率和开发效率。

1. 优化 Cypress 的配置

Cypress 的配置文件是 cypress.json，在该文件中，可以设置 Cypress 的各种选项。我们可以通过合理的配置来优化 Cypress 的运行速度。

1.1 修改默认浏览器

默认情况下，Cypress 使用 Electron 浏览器来运行测试用例。但是，Electron 浏览器的启动时间较长，这会影响到 Cypress 的运行速度。因此，我们可以修改默认浏览器为 Chrome 或 Firefox，这样可以缩短启动时间，提高运行速度。

在 cypress.json 文件中，添加以下配置：

{
  "browser": "chrome"
}

或者

{
  "browser": "firefox"
}

1.2 关闭截图和视频功能

Cypress 默认会在运行测试用例时生成截图和视频，这会占用大量的磁盘空间和 CPU 时间。如果不需要这些功能，可以在 cypress.json 文件中关闭它们：

{
  "screenshotsFolder": false,
  "videosFolder": false
}

1.3 增加默认超时时间

Cypress 默认的超时时间是 4 秒，如果测试用例中有网络请求或者其他耗时操作，超时时间可能会不够用，导致测试失败。因此，我们可以将默认超时时间增加到 10 秒或者更长，以确保测试用例能够顺利执行。

在 cypress.json 文件中，添加以下配置：

{
  "defaultCommandTimeout": 10000
}

2. 优化测试用例的编写

除了优化 Cypress 的配置，我们还可以通过优化测试用例的编写来提高运行速度。

2.1 减少网络请求

网络请求是测试用例中的一个重要因素，它会占用大量的时间和资源。因此，我们应该尽可能地减少网络请求。例如，可以使用本地数据或者模拟数据来替代网络请求，这样可以加快测试用例的执行速度。

2.2 使用 Cypress 命令

Cypress 提供了许多命令来辅助测试用例的编写，这些命令可以极大地简化代码，提高测试用例的可读性和可维护性。例如，可以使用 cy.get() 命令来获取 DOM 元素，使用 cy.contains() 命令来查找文本内容，使用 cy.wait() 命令来等待异步操作等。

2.3 使用 Cypress 组件

Cypress 组件是一种可以重复使用的测试用例部件，它可以大大简化测试用例的编写和维护。例如，可以将登录组件、搜索组件、表单组件等封装成组件，然后在测试用例中多次复用。

3. 使用 Parallels 进行并行测试

除了优化 Cypress 的配置和测试用例的编写，我们还可以使用 Parallels 进行并行测试，从而加快测试用例的运行速度。Parallels 是一种可以同时运行多个 Cypress 实例的工具，它可以将测试用例分配到不同的实例中运行，从而提高测试效率。

3.1 安装 Parallels

首先，我们需要安装 Parallels。在命令行中执行以下命令：

npm install --save-dev cypress-parallel

3.2 配置 Parallels

在 cypress.json 文件中，添加以下配置：

// www.javascriptcn.com code example
{
  "baseUrl": "http://localhost:3000",
  "parallel": true,
  "record": true,
  "numTestsKeptInMemory": 10,
  "testFiles": "**/*.spec.js",
  "video": false,
  "videoUploadOnPasses": false,
  "videoCompression": 50,
  "reporterOptions": {
    "mochaFile": "results/[hash].json",
    "toConsole": true
  }
}

3.3 运行 Parallels

在命令行中执行以下命令：

npx cypress-parallel run

该命令会启动多个 Cypress 实例，并将测试用例分配到不同的实例中运行，从而加快测试用例的运行速度。

示例代码

以下是一个示例代码，它演示了如何优化 Cypress 的配置和测试用例的编写，并使用 Parallels 进行并行测试：

// www.javascriptcn.com code example
// cypress.json
{
  "browser": "chrome",
  "screenshotsFolder": false,
  "videosFolder": false,
  "defaultCommandTimeout": 10000,
  "baseUrl": "http://localhost:3000",
  "parallel": true,
  "record": true,
  "numTestsKeptInMemory": 10,
  "testFiles": "**/*.spec.js",
  "video": false,
  "videoUploadOnPasses": false,
  "videoCompression": 50,
  "reporterOptions": {
    "mochaFile": "results/[hash].json",
    "toConsole": true
  }
}

// login.spec.js
describe('Login', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('should login successfully', () => {
    cy.get('#username').type('admin')
    cy.get('#password').type('123456')
    cy.get('button[type="submit"]').click()
    cy.url().should('eq', '/dashboard')
  })
})

// search.spec.js
describe('Search', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('should search successfully', () => {
    cy.get('#search').type('Cypress')
    cy.get('button[type="submit"]').click()
    cy.get('.result').should('contain', 'Cypress')
  })
})

以上代码演示了如何优化 Cypress 的配置和测试用例的编写，并使用 Parallels 进行并行测试。通过这些优化，可以加快测试用例的运行速度，提高测试效率和开发效率。

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