65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Cypress 大规模运行自动化测试

Suhagkumar Vamja
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2023 年 11 月 20 日

CPOL

14分钟阅读

viewsIcon

3675

在本文中，我们将学习如何在 LambdaTest 云网格上设置 Cypress 并以串行和并行方式运行 Web 自动化测试。

Cypress 是一个开源的 JavaScript 自动化框架，可以执行单元、集成、组件和端到端测试。它是一个为现代 Web 应用构建的下一代前端测试框架，并允许您轻松地运行跨浏览器和并行测试。

通过 Cypress，团队可以轻松创建 Web 自动化测试，进行可视化调试，并在 CI/CD 流水线中自动运行它们，从而助力持续集成 (CI) 和开发。

尽管 Cypress 经常与 Selenium WebDriver 相提并论，但它们在根本上和架构上存在差异。它不使用 Selenium WebDriver 进行 自动化测试。因此，它使用户能够编写更快、更简单、更可靠的测试。

与其他测试自动化框架相比，Cypress 的安装和设置也更简单，因为它是一个 Node 包。您只需运行 npm 命令 npm install cypress，然后就可以使用 Cypress 框架了。

在本文中，我们将学习如何在 LambdaTest 云网格上设置 Cypress 并以串行和并行方式运行 Web 自动化测试。

那么，让我们开始吧！

Cypress 的主要功能

Cypress 提供了一些开箱即用的功能，可以大规模运行自动化测试。让我们来看看它们。

  • 时间旅行：Cypress 允许您在 Web 应用程序中“时间旅行”，这意味着它会在测试执行的每一步中检查发生了什么。我们可以在运行时向前、向后、甚至暂停测试执行。从而为我们提供了在实时测试执行中检查应用程序状态的灵活性。
  • 自动等待：Cypress 具有内置的自动等待功能，可以在移动到下一步之前自动等待命令和断言。因此，无需在 Web 自动化测试中添加等待或休眠。尽管 Cypress 提供了等待命令，但在测试中并非必须显式使用它。
  • 不稳定测试管理：不稳定测试是指在没有代码更改的情况下，在多次重试尝试中通过又失败的测试。例如，当第一次执行测试时它会失败；当在不进行任何代码更改的情况下重新运行时，它会通过。

    Cypress 具有自动重试失败测试的功能。这有助于使测试套件免于不稳定。不稳定测试管理可以防止自动流水线由于不稳定测试而导致整个测试套件失败。

  • 截图、视频和简单的测试重放：Cypress 允许在测试执行期间自动截取屏幕截图和视频。这可以通过 Cypress 配置文件进行配置。当测试套件通过 CLI 以无头模式运行时，并且启用了视频和屏幕截图的配置，Cypress 将创建视频并截取整个测试执行的屏幕截图。

    截图和视频有助于分析测试失败并重现问题。

  • 跨浏览器测试：Cypress 提供了跨多个浏览器运行测试的功能。它支持 Chrome 系列浏览器，如 Chrome、基于 Chromium 的 Microsoft Edge 和 Electron。它还支持 Safari 和 Firefox 浏览器。

    我们需要在本地机器或 CI 环境中安装想要运行测试的相应浏览器（Electron 除外）。可以使用 --browser 标志与 cypress 命令结合使用，以在所需浏览器上运行测试。例如，要在 Firefox 浏览器上运行测试，可以使用以下命令

    cypress run --browser firefox
  • 运行并行测试：Cypress 可以执行并行测试。这有助于减少总体测试执行时间并提供快速反馈。
  • 易于调试：借助 Cypress CLI 的交互模式，您可以轻松调试测试并找出导致测试失败的问题。它易于阅读的错误和堆栈跟踪允许快速调试。
  • 网络模拟和监控：Cypress 允许用户选择是模拟响应还是让它们实际命中服务器并获得响应。它还可以在同一测试中混合使用，因此您可以模拟某些请求，并允许其他请求命中实际服务器并获得响应。
  • 支持 API 测试：Cypress 还为执行 API 测试提供了额外的支持，并为测试 API 提供了出色的开发人员体验。它可以广泛用于测试 API 并编写有效的 API 和集成测试。
  • Cypress 测试运行器：Cypress 具有内置的测试运行器 GUI，提供了一个交互式界面，可以使用 Cypress open 命令启动。它可以用于运行和调试 Web 自动化测试。Cypress open 命令会打开一个测试运行器窗口，可用于选择和运行单个测试、调试代码以及查看测试结果。

设置 Cypress 框架

在开始设置框架之前，让我们先讨论一下本文中用于演示的技术栈。以下编程语言/工具/框架将用于

编程语言/工具/框架 版本
NodeJS 18.17.1
Cypress 13.3.0
@faker-js/faker 8.1.0
LambdaTest Cypress CLI 3.0.18

我们将在 LambdaTest 提供的 Cypress 云网格上运行测试，LambdaTest 是一个由 AI 驱动的测试编排和执行平台。使用 LambdaTest，您可以对各种浏览器和操作系统执行 Cypress 自动化测试。对于需要执行跨浏览器测试、在真实浏览器上测试以及并行测试的团队来说，它是一个不错的选择。

步骤 1 - 安装 NodeJS

要开始安装过程，让我们从 NodeJS 开始。我们可以通过其 官方网站 进行安装。您可以根据您的操作系统下载并安装合适的文件。

NodeJS 安装完成后，我们可以在终端或命令提示符中运行以下命令来验证其成功安装

node - v

步骤 2 - 安装 Cypress

Cypress 可以通过两种不同的方式安装：使用 CLI 和下载 zip 文件。

使用 CLI

直接下载 zip 文件

建议使用 CLI 安装 Cypress，因为它简单易用。CLI 会处理所有安装过程，因此无需手动干预。

可以在终端中运行以下命令来安装 Cypress。

npm install cypress --save-dev

要检查 Cypress 是否已成功安装，我们可以运行以下命令来检查其版本。

npx cypress --version

步骤 3 - 安装 LambdaTest Cypress CLI

LambdaTest Cypress CLI 是一个命令行界面，可帮助在 LambdaTest 云网格上运行 Cypress 测试。可以在终端中运行以下命令来安装 lambdatest-cypress-cli 包

npm install -g lambdatest-cypress-cli

要验证其成功安装，请在终端中运行以下命令检查其版本。

lambdatest-cypress --version

lambdatest-cypress-cli 包需要一个配置文件，该文件包含所有配置详细信息，如浏览器名称、操作系统详细信息、LambdaTest 身份验证详细信息、运行和隧道设置。可以使用以下命令生成默认配置文件。应在导航到项目根文件夹后执行此命令。

lambdatest-cypress init --cv=10

成功执行命令后，应在项目根文件夹中生成一个名为 lambdatest-config.json 的文件。

文件名：lambdatest-config.json

{
   "lambdatest_auth": {
      "username": "LT_USERNAME",
      "access_key": "LT_ACCESS_KEY"
   },
   "browsers": [
      {
         "browser": "Chrome",
         "platform": "macOS Ventura",
         "versions": [
            "latest-1"
         ]
      },
      {
         "browser": "MicrosoftEdge",
         "platform": "Windows 10",
         "versions": [
            "latest-1"
         ]
      }
   ],
   "run_settings": {
      "reporter_config_file": "",
      "build_name": "cypress-demo-run",
      "parallels": 2,
      "specs": "./cypress/e2e/*.cy.js",
      "ignore_files": "",
      "network": false,
      "headless": false,
      "npm_dependencies": {
         "cypress": "13.2.0",
         "@faker-js/faker": "^8.1.0"
      }
   },
   "tunnel_settings": {
      "tunnel": false,
      "tunnel_name": null
   }
}

lambdatest-cypress-cli 包将帮助在 LambdaTest 云网格上运行测试。它将使用 lambdatest-config.json 文件来获取测试配置。

lambdatest-config.json 文件包含以下内容

lambdatest_auth

此部分包括 LambdaTest 凭据，用于在 LambdaTest 网格上执行 Cypress 测试。您可以将字段保留为默认值，我们可以在终端中使用 CLI 参数 --user=<LambdaTest Username> 和 --ak=<LambdaTest_Access_Key> 来提供这些值。

根据 LambdaTest Cypress CLI 文档，如果用户使用多种选项来传递 LambdaTest 身份验证凭据，则会使用以下优先级顺序来确定使用哪些身份验证凭据

CLI 参数 > lambdatest-config.json 中设置的选项 > 环境变量。

browsers

此部分用于提供 Cypress 测试自动化必须运行的浏览器、平台和版本。我们可以拥有多个浏览器和操作系统组合，存储在一个数组中。我们将提供前面章节讨论的浏览器和平台。

run_settings

此部分包含 Cypress 测试套件的期望功能。build_name 表示在 LambdaTest 上执行 Cypress 测试时将使用的构建名称。parallels 表示将在 LambdaTest 网格上并行运行的 Cypress 测试数量。parallels 的值应根据我们的 LambdaTest 计划支持的并行会话数量设置。

还有一个名为 npm_dependencies 的对象，我们需要在其中提供将在项目中使用的依赖项。默认情况下，Cypress 已提供。但是，我们需要在此处手动更新其他依赖项的名称。例如，在此项目中使用了 @faker-js/faker 依赖项来进行测试数据管理。

使用 ignore_files，我们可以忽略或排除任何 Cypress 测试文件以进行执行。

tunnel_settings

此部分包括 LambdaTest 隧道的设置。如果 "tunnel" 键的值设置为 "true"，则表示将使用隧道；否则，false 表示 不使用隧道。

tunnelName 是连接本地系统与 LambdaTest 服务器的隧道的名称，通过 SSH 集成隧道。

默认情况下，LambdaTest 隧道处于禁用状态，因为其值设置为 false。一旦触发 Cypress 测试，具有指定名称的隧道将自动启动。因此，无需手动启动 LambdaTest 隧道。

现在，让我们开始用 Cypress 编写第一个测试。

使用 Cypress 编写第一个测试用例

我们将使用 LambdaTest 的 Selenium Playground 上的输入表单演示页面来演示如何使用 Cypress 编写 Web 自动化测试。以下是我们将在本文中进行测试的场景

测试场景

  1. 打开 LambdaTest 的 Selenium Playground
  2. 点击输入表单演示链接
  3. 定位并输入输入表单演示页面上的所有字段的值
  4. 点击提交按钮
  5. 断言表单成功提交后显示的 “感谢您的联系，我们将尽快回复您。” 消息。
LambdaTest 的 Selenium Playground 网站

输入表单演示页面

成功消息

项目结构

所有安装完成后，项目结构应如下面的屏幕截图所示。

实现测试场景

为了编写测试，让我们在项目中的 e2e 文件夹内创建一个新文件，并将其命名为 "seleniumplaygroundtests.spec.cy.js"，并在该文件中编写测试。

文件名：seleniumplaygroundtests.spec.cy.js

import mainPage from "../pages/MainPage.js";
import formDemoPage from "../pages/FormDemoPage.js";

describe("Selenium Playground Demo Tests for Form Demo Page", () => {
  it("should fill in the form on the form demo page and verify the success message", () => {
    cy.visit('https://www.lambdatest.com/selenium-playground/');
    mainPage.navigateToFormDemoPage();
    formDemoPage.fillForm();
    formDemoPage
      .getSuccessMessageText()
      .should(
        "have.text",
        "Thanks for contacting us, we will get back to you shortly."
      );
  });
});

代码演练

cy.visit() 方法将有助于导航到 LambdaTest Selenium Playground 网站。

在下一行，将从 MainPage 类调用 navigateToFormDemoPage() 方法。此方法将打开输入表单演示页面。

文件名：MainPage.js

class MainPage {
  
  webElements = {
    inputFormDemoLink: () => cy.get(":nth-child(18) > .text-black")
  };

  navigateToFormDemoPage() {
    this.webElements.inputFormDemoLink().click();
  }
}
module.exports = new MainPage();

在 MainPage 类中，创建了一个 WebElements 的映射，用于存储 **LambdaTest Selenium Playground** 网站 **主页** 的所有定位器。inputFormDemoLink 属性定位 **主页** 上的 **输入表单提交** 链接。

主页 - Selenium Playground

使用 Cypress 的交互模式可以更轻松地定位 WebElements 的选择器。要以交互模式运行 Cypress，应在终端中运行以下命令

步骤 1 - 执行以下命令

npx cypress open

运行命令后，Cypress 应以交互模式打开

步骤 2 - 选择 E2E 测试

步骤 3 - 选择要运行测试的浏览器；我们将选择 Chrome

步骤 4 - 选择测试规范以运行测试

步骤 5 - 使用 Cypress 内置的 Web 元素查找器定位 Web 元素

要在交互模式下定位 Web 元素，我们需要执行以下步骤

  1. 单击 **选择元素** 按钮。
  2. 选择我们需要定位的 Web 元素
  3. Cypress 将自动定位 Web 元素，并在顶部 próximo **选择元素** 按钮的文本框中提供其选择器。
  4. 可以使用 **复制到剪贴板** 按钮复制文本框中显示的选择器。

在这里，我们可以看到对于“输入表单提交”链接，Cypress 为我们提供了选择器 - cy.get(':nth-child(18) > .text-black')。

可以在页面对象类中使用此定位器来定位链接并对其执行单击操作。

在 navigateToFromDemoPage() 方法中调用 inputFormDemoLink 属性以对其执行单击操作。

测试中的下一行是填写 **输入表单演示** 页面上的表单。

输入表单演示页面

在 FormDemoPage 类中，创建了一个 WebElements 的映射，其中包含 表单页面 的所有页面对象。FormDemoPage 类中的 fillForm() 方法执行填充表单的所有交互。

正如我们使用 Cypress 交互模式来定位 **输入表单提交** 链接 Web 元素一样。同样，我们可以使用交互模式来定位此 表单演示 页面上的所有字段。

让我们定位此表单演示页面上的 **姓名** 字段。

Cypress 提供了选择器以及定位页面上姓名字段的命令 - "cy.get('#name)"。同样，我们可以定位页面上的其他字段。

为页面上的所有字段创建了 WebElements 的映射，并且相应地，在 fillForm() 字段中使用 webElements 映射中的所有属性来与所有相应字段进行交互。

测试数据在任何表单的测试中都起着至关重要的作用。这些数据需要自动生成，这样我们就不必每次运行测试时都去管理它们。考虑到这一点，@faker-js/faker 库会生成测试数据。

文件名：FormDemoPage.js

import { faker } from '@faker-js/faker';

class FormDemoPage {
  webElements = {
    nameField: () => cy.get("#name"),
    emailField: () => cy.get("#inputEmail4"),
    passwordField: () => cy.get("#inputPassword4"),
    companyField: () => cy.get("#company"),
    websiteField: () => cy.get("#websitename"),
    countryField: () => cy.get(":nth-child(3) > .pr-20 > .w-full"),
    cityField: () => cy.get("#inputCity"),
    addressLineOneField: () => cy.get("#inputAddress1"),
    addressLineTwoField: () => cy.get("#inputAddress2"),
    stateField: () => cy.get("#inputState"),
    zipCodeField: () => cy.get("#inputZip"),
    submitBtn: () => cy.get(".bg-lambda-900"),
    successMessageText: () => cy.get(".success-msg"),
  };

  fillForm() {
    this.webElements.nameField().type(faker.person.fullName());
    this.webElements.emailField().type(faker.internet.email());
    this.webElements.passwordField().type("Password@1234");
    this.webElements.companyField().type(faker.company.name());
    this.webElements.websiteField().type(faker.internet.domainName());
    this.webElements.countryField().select("India");
    this.webElements.cityField().type(faker.location.city());
    this.webElements
      .addressLineOneField()
      .type(faker.location.streetAddress(false));
    this.webElements.addressLineTwoField().type(faker.location.street());
    this.webElements.stateField().type(faker.location.state());
    this.webElements.zipCodeField().type(faker.location.zipCode());
    this.webElements.submitBtn().click();
  }

  getSuccessMessageText() {
    return this.webElements.successMessageText();
  }
}
module.exports = new FormDemoPage();

测试中填充表单后的下一行是执行断言，以验证成功消息文本。Cypress 提供了一种通过使用 should() 方法并匹配文本来执行内联断言的能力。

将从 FormDemoPage 类调用 getSuccessMessageText() 方法。此方法以 String 格式返回消息文本。

文件名：FormDemoPage.js

这标志着我们的测试完成。

现在让我们讨论如何在 LambdaTest 云网格上运行测试。

使用 Cypress 在云网格上运行自动化测试

我们将使用以下操作系统和浏览器组合在 LambdaTest 云网格上运行测试。

操作系统 浏览器名称 浏览器版本
MacOS Ventura Chrome 116（最新）
Windows 10 Microsoft Edge 116（最新）

我们将并行执行测试，因为我们需要在两种不同的浏览器（即 Chrome 和 Microsoft Edge）上运行相同的测试。并行执行测试有助于节省测试执行时间，因为所有测试都是并发执行的。

要并行运行测试，我们需要更新 lambdatest-config.json 文件中 run_settings 部分的 parallels 设置，以并行运行测试。

我们将使用 lambdatest-cypress-cli 包在 LambdaTest 云网格上运行测试。要执行测试，我们需要从终端运行以下命令

lambdatest-cypress run --user=<"YOUR LAMBDATEST USERNAME"> --ak=< "YOUR LAMBDATEST ACCESS KEY">

可以通过登录 LambdaTest 网站并导航到 **个人资料 > 账户设置 > 密码和安全** 来获取 LambdaTest 用户名和访问密钥。

使用终端执行测试的屏幕截图

可以在 LambdaTest Dashboard 上查看在 LambdaTest Cloud 网格上执行的测试。它通过提供 LambdaTest 测试分析中测试运行的分步详细信息，提供对测试执行的良好可见性。还可以查看视频录制、设备日志、屏幕截图等详细信息。

查看下面的屏幕截图，它们将为您提供对 Web 自动化测试仪表板的良好洞察。

LambdaTest Web 自动化仪表板

以下屏幕截图显示了构建详细信息和进行的测试。每个测试包括测试名称、浏览器名称、浏览器版本、操作系统名称、相应的操作系统版本和屏幕分辨率。

它还包含运行的测试的视频，从而更好地了解在浏览器上如何运行测试。

在 LambdaTest Cloud 上 Chrome 浏览器上运行的测试

在 LambdaTest Cloud 上 Microsoft Edge 浏览器上运行的测试

在本地机器上运行 Cypress 测试

可以使用以下命令在本地机器的 Chrome 浏览器上运行 Cypress 测试。

npx cypress run --browser=chrome
使用终端执行测试的屏幕截图

默认情况下，所有本地测试均以无头模式执行。执行后，我们将在 videos 文件夹中获得视频输出。我们还可以看到视频文件路径在控制台中打印。

同样，要执行 Microsoft Edge 浏览器上的测试，可以使用以下命令

npx cypress run --browser=edge

我们也可以在 package.json 文件中的 "scripts" 部分添加测试执行命令。这样，我们就可以运行一个快捷命令来运行测试，而无需记住运行测试的冗长命令。

在 "scripts" 部分更新命令后，而不是运行命令

npx cypress run --browser=chrome 我们可以运行命令 npm run cypress:chrome 来在 Chrome 浏览器上运行测试。

同样，现在可以使用 npm run cypress:edge 命令在 Microsoft Edge 浏览器上运行测试。

结论

Cypress 是一个流行的 Web 自动化框架，它允许通过运行单元、集成、组件和端到端测试来自动化 Web 浏览器测试。

通过将 Cypress 与 LambdaTest 等云测试平台集成，您可以在不同的平台、浏览器及其各自版本上大规模运行 Web 自动化测试，而无需担心操作系统和浏览器安装，因为所有基础设施都是按需提供的。

测试成功完成后，可以查看测试的详细摘要，其中包含所有细粒度的详细信息，有助于向软件团队和利益相关者报告。

© . All rights reserved.