使用Cypress进行大规模自动化测试
在这篇文章中，我们将学习如何在LambdaTest云网格上设置Cypress并运行网页自动化测试（连续和并行）
柏树（Cypress）是一个开源的JavaScript自动化测试框架，可用于单元测试、集成测试、组件测试和端到端测试。它是为现代Web应用程序构建的下一代前端测试框架，可以轻松运行跨浏览器和并行测试。
通过使用Cypress，团队可以轻松创建Web自动化测试，可视化调试，并在CI/CD流水线中自动运行测试，从而有助于持续集成（CI）和开发。
虽然Cypress经常与Selenium WebDriver进行比较，但它在基本上和架构上是不同的。它不使用Selenium WebDriver进行自动化测试。因此，用户可以编写更快、更容易和更可靠的测试。
与其他测试自动化框架相比，Cypress的安装和设置部分也更简单，因为它是一个Node.js包。你只需要运行npm命令npm install cypress，然后使用Cypress框架。
在本文中，我们将学习如何设置Cypress并在LambdaTest云网格上运行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云网格上运行测试-这是一个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网格上执行Cypress测试的LambdaTest凭据。您可以将字段保留为默认值，在终端中可以使用CLI参数 --user=<LambdaTest用户名> 和 --ak=<LambdaTest_Access_Key> 来提供这些值。
根据LambdaTest Cypress CLI文档，确定要使用的auth凭据的优先顺序如下：
CLI参数 > 在lambdatest-config.json中设置的选项 > 环境变量。
browsers
此部分用于提供应在其中运行Cypress测试自动化的浏览器、平台和版本。我们可以在数组中使用多个浏览器和操作系统组合。我们将按照上面的早期部分中所讨论的提供浏览器和平台。
run_settings
此部分包含Cypress测试套件的期望能力。 build_name 表示在LambdaTest上执行Cypress测试时将使用的构建名称。 parallels 表示将在LambdaTest Grid上并行运行的Cypress测试的数量。 parallels 的值应根据我们LambdaTest计划支持的并行会话数进行设置。
还有一个名为npm_dependencies的对象，我们需要在其中提供在我们的项目中使用的依赖项。默认情况下，Cypress已提供。但是，我们需要手动在此处更新其他依赖项的名称。例如，本项目中使用了@faker-js/faker的依赖项进行测试数据管理。
使用ignore_files，可以忽略或排除任何Cypress测试文件的执行。
tunnel_settings
此部分包括LambdaTest隧道的设置。如果"tunnel"键的值设置为"true"，则表示将使用隧道；否则，false表示不使用no tunnel。
tunnelName是连接本地系统与LambdaTest服务器之间的SSH集成隧道的隧道名称。
默认情况下，LambdaTest隧道处于禁用状态，因为其值设置为false。指定名称的隧道在触发Cypress测试后将自动启动。因此，无需手动启动LambdaTest隧道。
现在，让我们开始编写使用Cypress的第一个测试。
使用Cypress编写第一个测试用例
我们将使用LambdaTest的Selenium Playground上的Input form演示页面来演示使用Cypress编写网页自动化测试。以下是我们将要处理的测试场景：
测试场景
- 打开LambdaTest的Selenium Playground
- 单击Input Form Demo链接
- 定位并在Input Form Demo页面上输入所有字段的值
- 单击提交按钮
- 在成功提交表单后，断言显示消息“Thanks for contacting us, we will get back to you shortly.”
项目结构
一旦所有安装完成，项目结构应如下所示的截屏。
实现测试场景
为了编写测试，让我们在项目的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 类中，创建了一个 WebElement 的映射以保存 LambdaTest Selenium Playground 网站的主页的所有定位器。 inputFormDemoLink 属性定位输入表单提交链接在主页。
使用 Cypress 的交互模式可以更容易地定位 WebElement 的选择器。要在交互模式下运行 Cypress，请在终端中运行以下命令
步骤1 – 执行以下命令
npx cypress open
运行命令后，Cypress 应以交互模式打开
步骤2 – 选择 E2E 测试
步骤3 – 选择要运行测试的浏览器；我们将选择 Chrome
步骤4 – 选择要运行测试的测试规范
步骤5 – 使用 Cypress 的内置 WebElement 查找器定位 WebElement
要在交互模式下定位 WebElement，我们需要执行以下步骤：
- 单击选择元素 按钮。
- 选择要定位的 WebElement
- Cypress 将自动定位 WebElement 并提供其选择器，显示在位于选择元素 按钮旁边的顶部文本框上。
- 可以使用复制到剪贴板 按钮复制文本框中显示的选择器。
在这里，我们可以看到对于“输入表单提交”链接，Cypress 提供了选择器 – cy.get(':nth-child(18) > .text-black')。
此定位器可用于页面对象类中定位链接并对其执行点击操作。
inputFormDemoLink 属性在 navigateToFromDemoPage() 方法中被调用以执行点击操作。
测试中的下一行是填写 表单演示页面上提供的表单。
在 FormDemoPage 类中，创建了一个 WebElement 的映射，其中包含了 Form 页面的所有页面对象。 FormDemoPage 类中的 fillForm() 方法执行了填写表单的所有交互。
与我们使用 Cypress 交互模式定位输入表单提交链接的方式相同，我们可以使用交互模式定位此表单演示页面上的所有字段。
让我们定位此表单演示页面上的名称字段。
Cypress 提供了一起使用命令在页面上定位名称字段的选择器 – “cy.get('#name)“。类似地，我们可以定位页面上的其他字段。
为页面上的所有字段创建了 WebElement 的映射，并且相应的所有属性从 webElements 映射中在 fillForm() 字段中用于与所有相应字段进行交互。
测试数据在任何表单的测试中都起着重要作用。这些数据需要自动生成，以便我们不必每次运行测试时都管理它。考虑到这一点，@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()方法和匹配文本执行内联断言的能力。
getSuccessMessageText()方法是从FormDemoPage类中调用的。此方法以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云平台上执行的测试可以在LambdaTest仪表板上查看。它通过在LambdaTest测试分析中提供逐步细节的方式提供测试执行的公正可见性。还可以查看视频录制、设备日志、屏幕截图等详细信息。
请查看以下截图，它们将为您提供有关Web自动化测试仪表板的公正见解。
以下截图显示了构建详细信息和执行的测试。每个测试包括测试名称、浏览器名称、浏览器版本、操作系统名称、相应操作系统版本和屏幕分辨率。
这还附带了在浏览器上运行的测试视频，更好地了解了测试的运行方式。
在本地机器上运行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是一种流行的网页自动化框架，可以通过运行单元测试、集成测试、组件测试和端到端测试来自动化浏览器测试。
通过将Cypress与LambdaTest等云测试平台集成，您可以在不同的平台、浏览器及其各自版本上扩展运行网页自动化测试，而无需担心操作系统和浏览器的安装，因为所有基础设施都可以根据需求提供。
在测试执行成功后，可以查看到详细的测试见解，其中包含有助于向软件团队和利益相关者汇报的细节。
Leave a Reply