Cypress 自动化测试：如何在 Chrome、Firefox、Safari 和 Edge 中运行测试用例？-JavaScript中文网-JavaScript教程资源分享门户

随着技术的日新月异，前端开发人员不仅要求代码质量高、页面美观，还要保证应用程序的稳定性和可靠性。这就需要使用一些自动化测试工具来验证代码是否能够按照预期执行。Cypress 是目前比较热门的前端自动化测试框架之一，它的功能强大，易于使用，并且可以在 Chrome、Firefox、Safari 和 Edge 等不同浏览器中运行测试用例。本文将为你介绍 Cypress 自动化测试框架，并分步介绍如何在不同浏览器中运行你的测试用例。

什么是 Cypress？

Cypress 是一款基于 Node.js 的前端自动化测试工具，它使用 JavaScript 编写测试用例，可以在浏览器中进行 UI 自动化测试、集成测试和端到端测试。Cypress 提供了一些特性，如：

自动等待：Cypress 会自动等待页面元素加载完成之后再执行测试用例。
可重复性：Cypress 的测试用例可以被重复执行，以便在应用程序发生更改时，验证其是否仍满足要求。
调试能力强：Cypress 的交互式 Test Runner 可以帮助开发人员更轻松地调试和执行测试用例。

有了这些特性，Cypress 成为了自动化测试的首选工具之一。

安装和配置 Cypress

在开始使用 Cypress 自动化测试之前，你首先需要安装 Cypress。你可以通过以下这些方式来安装 Cypress：

使用 npm 安装：打开终端并执行以下命令

npm install cypress --save-dev

使用 yarn 安装：打开终端并执行以下命令

yarn add cypress --dev

完成安装之后，你需要进行初始化设置。在项目的根目录下执行以下命令：

npx cypress open

这个命令将打开 Cypress 的 GUI 运行器，并在 cypress/integration 目录下创建一个示例测试用例。你可以在这个目录下创建自己的测试用例，也可以在 Cypress 的 Test Runner 中运行这些示例测试。

在不同浏览器中运行测试用例

Cypress 默认使用 Chrome 浏览器来运行测试用例，在配置文件（cypress.json）中也可以设置其他浏览器选项。以下是在不同浏览器中运行 Cypress 测试用例的步骤。

在 Firefox 浏览器中运行 Cypress 测试用例

要在 Firefox 浏览器中运行 Cypress 测试用例，在安装 Cypress 后需要安装 Firefox，然后在配置文件（cypress.json）中设置浏览器路径。Cypress 的 Firefox 驱动器需要火狐浏览器 60 及以上版本。

{
  "baseUrl": "http://localhost:3000",
  "browser": "firefox",
  "firefoxExecutablePath": "C:\\Program Files\\Mozilla Firefox\\firefox.exe"
}

在 Safari 浏览器中运行 Cypress 测试用例

要在 Safari 浏览器中运行 Cypress 测试用例，需要在 Mac 上安装 Xcode。Cypress 需要使用 Safari 的远程调试接口进行测试。在配置文件（cypress.json）中设置 Safari 浏览器的路径。

{
  "baseUrl": "http://localhost:3000",
  "browser": "safari",
  "safariExecutablePath": "/Applications/Safari.app/Contents/MacOS/Safari",
  "env": {
    "TZ": "America/Los_Angeles"
  }
}

在 Edge 浏览器中运行 Cypress 测试用例

要在 Edge 浏览器中运行 Cypress 测试用例，需要安装 Microsoft WebDriver。在配置文件（cypress.json）中设置 Edge 浏览器的路径。

{
  "baseUrl": "http://localhost:3000",
  "browser": "edge",
  "env": {
    "TZ": "America/Los_Angeles"
  }
}

在 Chrome 浏览器中运行 Cypress 测试用例

要在 Chrome 浏览器中运行 Cypress 测试用例，需要在配置文件（cypress.json）中设置 Chrome 浏览器的路径。

// javascriptcn.com 代码示例
{
  "baseUrl": "http://localhost:3000",
  "browser": "chrome",
  "chromeWebSecurity": false,
  "chromeExecutablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
  "env": {
    "TZ": "America/Los_Angeles"
  }
}

Cypress 还支持在其他浏览器中运行测试用例，只要在配置文件（cypress.json）中设置正确的选项即可。

测试用例范例

为了演示如何在多个浏览器中运行 Cypress 测试用例，我们将使用以下示例测试用例：测试应用程序是否能够添加新的待办事项，完成待办事项和删除待办事项。以下是代码：

// javascriptcn.com 代码示例
// 测试添加待办事项功能
describe('Add todo items', () => {
  it('Adds a new todo item', () => {
    // 打开应用页面
    cy.visit('/');
    // 查找待办事项输入框并输入内容
    cy.get('.new-todo').type('Learn Cypress').should('have.value', 'Learn Cypress');
    // 提交待办事项
    cy.get('.new-todo').type('{enter}');
  });
});

// 测试完成待办事项功能
describe('Complete todo items', () => {
  it('Marks a todo item as completed', () => {
    // 标记第一个待办事项为已完成
    cy.get('.toggle').first().check();
    // 确认待办事项已被标记为已完成
    cy.get('.todo-list li').first().should('have.class', 'completed');
  });
});

// 测试删除待办事项功能
describe('Delete todo items', () => {
  it('Deletes a todo item', () => {
    // 删除第一个待办事项
    cy.get('.destroy').first().click({ force: true });
    // 确认待办事项已被删除
    cy.get('.todo-list li').should('have.length', 1);
  });
});

这个测试用例会使程序添加一个待办事项、完成一个待办事项和删除已完成的待办事项。在执行测试用例之前，记得要打开测试的应用程序。

总结

Cypress 自动化测试框架是一款非常强大、易于使用的前端自动化测试工具。它支持在 Chrome、Firefox、Safari 和 Edge 等不同浏览器中运行测试用例，使前端开发人员能够更好地验证代码功能，提高应用程序的可靠性和稳定性。我们通过多个示例测试用例演示了如何在不同浏览器中使用 Cypress 进行自动化测试。希望这篇文章能对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652de3e27d4982a6ebefe379