赛普拉斯端到端测试教程:详细指南

赛普拉斯端到端测试教程:详细指南

该博客最初发布于 LambdaTest 网站。链接到原帖—— https://www.lambdatest.com/blog/cypress-end-to-end-testing/

如今的软件应用程序变得越来越复杂,最大化测试覆盖率是每个测试团队的关键方面之一。全球测试人员使用测试工具和框架依赖于不同的测试类型。但是迫切需要从头到尾测试软件系统(及其所有子系统)。

端到端 (E2E) 测试 允许测试团队通过复制关键的真实用户场景来提高整个管道的质量。此外,它使团队能够验证软件系统及其子系统的数据完整性。端到端测试并不容易。

赛普拉斯使设置、编写、运行和调试测试变得容易。我们通常忽略端到端测试,因为它需要大量的努力来实施。使用手动方法执行端到端测试可能是一项乏味且容易出错的任务。

赛普拉斯是端到端测试的选择之一。使用 Cypress,您无需安装十种不同的东西来设置您的测试套件。几分钟后,您就可以在 Cypress API 的帮助下开始编写测试用例了。 Cypress 在浏览器中运行测试用例,这使得它不同于其他框架(例如 Selenium)。 Cypress 使用 Chai,这是一个流行的断言库。它还使用 Mocha,这是一个框架,提供用于在 行为驱动开发 (BDD) 风格。

在这个 赛普拉斯教程 在端到端测试中,我们将深入研究执行 赛普拉斯端到端测试 在本地赛普拉斯网格和云赛普拉斯网格状 LambdaTest 上。

那么,让我们开始吧!

为什么要进行端到端测试?

大多数端到端应用程序测试过去都是手动执行的,QA 团队了解需求、制作测试用例、执行测试用例并记录结果。在现代软件开发中,自动化已经成为测试的基础部分。

该软件可以而且必须在许多层上进行测试。当你设计一个系统时,你从一个小软件开始,单元测试就足够了。但是,仅在单元级别测试软件是不够的,并且不能保证这些小单元在组合时可以完美运行。

这是哪里 集成测试 进入画面。在集成测试中,两个或多个组件在测试中一起使用,并验证结果。尽管所有这些测试都运行得很好,但集成测试并不能保证系统会按预期工作。这就是端到端测试的用武之地。

端到端测试最接近真实用户测试。 其中一个 最好的自动化测试框架 用于端到端测试,因为赛普拉斯在浏览器中运行应用程序,从而提供就好像应用程序在实际浏览器中运行一样的体验。测试越接近模仿用户,就越有可能找到用户可能遇到的问题。

要了解端到端测试,让我们深入了解 测试自动化金字塔 由迈克科恩介绍。它使测试变得高效。这个金字塔中提到的所有级别的测试我们通常在运行自动化时进行 赛普拉斯测试 .

在自动化方面,我们从下层单元的自动化开始;一旦它们准备就绪,我们就会编写集成自动化脚本。最后,一旦集成测试完成,我们会进行端到端测试,以确保我们的脚本可以正常工作,包括第三方代码。

3 小时学会 Cypress |完整的赛普拉斯教程 |赛普拉斯自动化 | LambdaTest

测试金字塔的层次

测试金字塔是 Mike Cohn 提出的一个经验概念,并在他的《敏捷估计与规划》一书中进行了介绍。测试套件分为三层——单元、集成和端到端测试。让我们更多地了解它们。

  • 单元测试

单元测试是一种测试各个模块以确定它们是否适合使用的技术。单元测试的主要目的包括隔离系统的每个部分并确保各个组件有效地工作。

  • 集成测试

集成测试专门研究在测试中一起使用的两个或多个组件之间的交互,并验证结果。它们通常运行速度较慢,因为它涉及复杂的设置。

如果集成测试因失败范围更大而失败,则查找问题可能会更复杂一些。它们也更难编码和维护,因为它们具有更高级的模拟和更大的测试范围。你可以参考这个 JUnit 5 Mockito 教程 了解更多关于模拟的信息。

端到端测试

端到端测试是一种用于测试应用程序从头到尾的流程是否按预期运行的技术。

端到端测试的好处

端到端测试有几个好处。在讨论端到端测试对企业的价值时,其好处通常归结为一些关键点。

  • 从最终用户的角度进行测试

在单元测试中,您单独验证每个组件,并且端到端测试从最终用户的角度检查应用程序。

  • 应用程序的运行状况

在端到端测试中,应用程序在所有层进行测试——业务、数据、集成和表示。这有助于确保被测试的应用程序没有错误并且在整个生命周期中无缝运行。

由于端到端测试在各个级别验证应用程序的健康状况,因此它始终保持应用程序的健康状况。在单元级别而不是在集成级别测试应用程序提供了一个非常需要的视角来了解不同级别和环境中的软件整体性能。

  • 增加测试覆盖率

端到端测试可以验证应用程序的每个依赖项是否可以正常工作,包括第三方代码。

端到端测试帮助我们从头到尾在 API 和 UI 层测试整个应用程序。使用 自动化 UI 测试 手动测试 实践有助于最大化测试覆盖率。您可以通过此博客了解更多信息 如何从手动测试转向自动化 .

  • 降低未来风险

在端到端测试中,应用程序在每次冲刺和迭代后都会进行深入测试。这有助于测试人员在生命周期中更快、更早地定位缺陷。测试(或生产)过程中应用程序失败的机会显着降低。

在应用程序开发生命周期中更快地检测错误和问题可以最大限度地减少测试工作和成本。每一步都进行广泛的测试,确保系统中的错误更少,并更早地识别软件中的故障。这将减少测试的重复,从而最终减少相关的工作量、时间和成本。

  • 增加对产品质量的信心

端到端测试还增加了对应用程序功能和性能的信心,因为应用程序在多个设备、浏览器和操作系统上进行了全面测试。

端到端 Web 应用程序测试框架

让我们看一些用于端到端测试的流行 Web 框架。

Cypress 是使用现代 JavaScript 框架构建的下一代前端测试框架。 Cypress 附带了一组测试运行程序和一个记录和显示测试结果的仪表板服务。

Cypress 最常与 Selenium 进行比较。然而,赛普拉斯在根本上和架构上都不同。赛普拉斯不受与 Selenium 相同的限制的强制。 Cypress 允许我们编写多种类型的测试:端到端、集成,甚至单元测试。您可以通过此了解更多有关差异的信息 柏树与硒 比较。

赛普拉斯在浏览器中运行测试,给出的结果几乎与用户在使用应用程序时的体验相同。

GitHub 上的赛普拉斯趋势

以下数据来源于官网 赛普拉斯 GitHub 存储库:

  • 星数:39.5k
  • 前叉:2.5k
  • 使用者:490k
  • 发布:273
  • 贡献者:368

如果您是开发人员或测试人员,Cypress 101 认证会让您清楚地了解赛普拉斯端到端测试的基础知识,从而让您更快、更有信心地编写测试。

WebdriverIO

WebdriverIO 是一个渐进式自动化框架,旨在自动化现代 Web 和移动应用程序。

它简化了与应用程序的交互,并提供了一组插件来帮助您创建可扩展、健壮且稳定的测试套件。

GitHub 上的 WebdriverIO 趋势

以下数据来源于官网 WebdriverIO GitHub 存储库:

  • 星数:7.6k
  • 前叉:2.1k
  • 使用者:43.1k
  • 发布:209
  • 贡献者:424

Nightwatch.js

Nightwatch.js 是一个集成的、易于使用的端到端测试解决方案,用于 Web 应用程序和网站,用 Node.js 编写。它使用 W3C WebDriver API 来驱动浏览器并对 DOM 元素执行命令和断言。

GitHub 上的 Nightwatch.js 趋势

以下数据来源于官网 Nightwatch.js GitHub 存储库:

  • 星数:11.1k
  • 前叉:1.1k
  • 使用者:135k
  • 发布:182
  • 贡献者:94

量角器

Protractor 是 Angular 和 AngularJS 应用程序的端到端测试框架。 Protractor 针对在真实浏览器中运行的应用程序运行测试,并像用户一样与之交互。

GitHub 上的量角器趋势

以下数据来源于官网 量角器 GitHub 存储库:

  • 星数:8.8k
  • 前叉:2.4k
  • 使用者:1.8m
  • 贡献者:260

测试咖啡馆

​​​TestCafe框架是一个用NodeJS构建的开源自动化框架。它支持开箱即用的 JavaScript、TypeScript 和 CoffeeScript,这意味着需要零配置。 TestCafe 在开源 MIT 许可下分发,由 DevExpress 管理。

GitHub 上的 TestCafe 趋势

以下数据来源于官网 测试咖啡馆 GitHub 存储库:

  • 星数:9.4k
  • 货叉:655
  • 使用者:10.6k
  • 发布: 351
  • 贡献者:112

赛普拉斯端到端测试的好处

在我们了解执行赛普拉斯端到端测试的好处之前,让我们看一个简单的赛普拉斯端到端测试场景:

假设您必须登录应用程序,并在网站上搜索某些产品 https://ecommerce-playground.lambdatest.io/ 然后从应用程序中注销。以下是上述场景的步骤,涵盖了从登录到 → 产品搜索 → 注销的端到端流程。

测试场景

  1. 打开网址 https://ecommerce-playground.lambdatest.io/index.php?route=account/login .
  2. 输入电子邮件“[email protected]”。
  3. 输入密码“lambdatest”。
  4. 点击登录。
  5. 搜索产品“VAIO”。
  6. 验证搜索到的产品是否正确。
  7. 点击我的帐户。
  8. 单击“注销”链接。
  9. 用户从应用程序中注销。

现在让我们看看赛普拉斯端到端测试的好处。 Cypress 是一个快速、简单且可靠的端到端测试框架。赛普拉斯测试任何在网络浏览器上运行的东西。

传统上,端到端测试速度较慢且成本更高。在赛普拉斯 9.2.0 版中,端到端测试体验有了显着改进。现在我们可以自动化从单元级测试到系统测试的整个测试过程。使用赛普拉斯的仪表板功能,我们可以轻松跟踪我们的测试结果。

赛普拉斯很容易设置。只需安装并开始编写测试用例。您可以将自定义报告器与赛普拉斯集成以查看结果。

赛普拉斯具有用于 CI 集成的仪表板功能。从 CI 提供商处运行赛普拉斯测试时,您可以在仪表板中记录测试结果。

根据我的经验,以下是赛普拉斯端到端测试的一些很棒的功能:

  • 易于设置

您也可以使用 NPM 或他们的桌面应用程序安装 Cypress。此外,您不需要像在 Selenium 中那样安装任何额外的库、依赖项、驱动程序、服务器等。与其他相比,赛普拉斯非常容易设置 自动化测试工具 (或框架)。

  • 更快地编写测试用例

Cypress 速度更快,几分钟之内,您就可以开始编写测试用例了。赛普拉斯在浏览器内运行测试,给出的结果几乎与用户体验相同。它还可以访问应用程序上的网络层,这使我们能够控制所有网络请求。

  • 自动等待

在 Cypress 中,我们不需要在您的测试中添加等待或休眠。在继续下一步之前,赛普拉斯会自动等待命令和断言。 Cypress 不仅等待元素可见或加载 AJAX,而且等待发送或返回不同的请求。您可以通过本教程 Selenium 中的等待类型 了解更多关于等待的信息。

  • 实时重新加载

在 Cypress 中,您不需要重新加载测试用例。当您对测试用例进行更改时,它足够智能以自动触发和运行测试。这在我们必须保存和重新运行测试用例的其他工具中节省了大量时间

  • 截图和视频

屏幕截图会在失败时自动捕获,或者整个测试套件的视频

当无头运行时,这在测试失败时非常有用。由于我们可以观察一系列测试步骤运行时发生的情况,因此当某些测试用例失败时,跟踪确切的步骤变得非常容易。

  • 信息仪表板

使用赛普拉斯仪表板,我们可以在 集成/光盘 提供者并记录测试结果。仪表板可让您深入了解测试运行时发生的情况。仪表板可让您查看失败、通过、未决、跳过的测试的数量以及失败测试的整个堆栈跟踪。当任何测试用例失败时,屏幕截图会自动捕获,通过运行视频,我们可以看到失败的步骤。

  • 与云测试平台集成

我们可以将赛普拉斯与各种提供云的测试平台集成。其中之一是 LambdaTest。使用 赛普拉斯自动化工具 像 LambdaTest 一样,您可以在线执行和分析 Cypress 测试脚本。您可以在超快的赛普拉斯测试执行云上运行端到端测试。 LambdaTest 是一个可靠、可扩展、安全且高性能的测试执行平台,专为扩展而构建。履行 赛普拉斯 UI 测试 在 40 多种不同的浏览器和浏览器版本上,包括无头版本。

文字 CTA: 在云网格上运行端到端赛普拉斯测试。立即试用 LambdaTest

赛普拉斯端到端测试入门

按照下面提到的步骤为 赛普拉斯自动化 测试。

步骤1: 创建文件夹并生成 package.json。

  • 创建一个项目,这里命名为 赛普拉斯_Lambdatest。
  • 使用 npm 初始化 在终端命令创建一个 包.json 文件

第2步: 安装赛普拉斯。

要安装 Cypress,请在新创建的文件夹中运行以下命令:

npm install cypress — 保存开发

此命令将在本地安装 Cypress 作为项目的开发依赖项。

或者

纱线添加柏树 - 开发

​​​此命令将在本地安装 Cypress 作为您项目的开发依赖项。

安装后,会反映赛普拉斯 9.2.0 版,如下所示。 Cypress 的最新版本是 10.3.0

Cypress 的默认文件夹结构如下所示。您可以在“集成”文件夹下创建测试用例。

赛普拉斯的项目结构

从屏幕截图中,您可以看到 Cypress 在第一次打开时创建了默认文件夹层次结构。以下是赛普拉斯创建的每个文件夹/文件的详细信息。

  • 夹具: 夹具 **** 是您的测试可以使用的外部静态数据。建议不要在测试用例中对数据进行复杂的编码。它应该由 CSV、HTML 或 JSON 等外部源驱动。
  • 一体化: 这是存储所有测试的主文件夹。我们在此处添加 Basic、End to End Test、Visual 或 Cucumber 测试。您所有的规范文件都将在这里。
  • 插件: Plugin 文件夹包含插件或侦听器。 Cypress 将自动包含插件文件“cypress/plugins/index.js”。
  • 支持: support 文件夹中有两个文件:commands.js 和 index.js
  • 命令.js: 是您添加常用函数和自定义命令的文件。它包括您可以调用以在不同测试中使用的函数,例如登录函数。赛普拉斯为您创建了一些函数,如果需要,您可以在此处覆盖它们。
  • index.js: 该文件在每个规范文件之前运行。这个文件是放置全局配置和修改赛普拉斯的好地方,就像之前或之前一样。默认情况下,它仅导入 commands.js,但您可以导入或要求其他文件以保持井井有条。
  • 节点模块 :所有节点包都将安装在 节点模块 目录并在所有测试文件中可用。因此,简而言之,这是 NPM 安装所有项目依赖项的文件夹。
  • 赛普拉斯.json: 它用于存储不同的配置。例如,超时、基本 URL、测试文件或我们想要覆盖以调整赛普拉斯行为的任何其他配置。我们还可以管理自定义文件夹结构,因为它默认是赛普拉斯配置的一部分。

除了以上四个文件夹外,我们还有一些文件夹,如截图、下载、视频等,用于存放不同的相关文件,我们将在后面讨论。

赛普拉斯的基本结构

Cypress 采用 Mocha 的语法来开发测试用例。以下是赛普拉斯测试开发中主要使用的一些主要结构:

  • 描述 ():用于对我们的测试进行分组。它有两个参数,第一个是测试组的名称,第二个是回调函数。
  • ():用于单个测试用例。它有两个参数,一个解释测试应该做什么的字符串和一个包含我们实际测试的回调函数。
  • ():它在块中的所有测试之前运行一次。
  • ():在块中的所有测试之后运行一次。
  • 之前每个 ():它在块中的每个测试之前运行。
  • 在每个之后 ():它在块中的每个测试之后运行。
  • 。只要 ():用于运行指定的套件或测试;在 .it() 块上附加“.only”。
  • 。跳过 ():用于跳过指定的套件或测试;在 .it() 块上附加“.skip()”。

演示:赛普拉斯端到端测试

让我们在名为“cypress_lambdatest”的集成文件夹下创建一个新文件夹,以执行赛普拉斯端到端测试。

赛普拉斯端到端测试:案例 1

使用名称创建第一个规范 login_searchproduct.spec.js 在文件夹 LambdaTest 下。

在下面写脚本 login_searchproduct.spec.js 文件,其中包括登录应用程序和搜索产品。搜索后,验证应显示正确的产品。

在下面的代码片段中:

  1. 首先,我们使用 cy.visit() 打开站点 URL。
  2. 其次,it() 块用于通过输入电子邮件和密码登录应用程序。
  3. 第三,it() 块用于搜索产品,最后一个 it() 块用于搜索产品。

///

it(“打开网址”, () => {

cy.visit(

https://ecommerce-playground.lambdatest.io/index.php?route=account/login”

);

});

it(“登录应用程序”, () => {

cy.get('[id="input-email"]').type("[email protected]");

cy.get('[id="input-password"]').type("lambdatest");

cy.get('[type="submit"]').eq(0).click();

});

it(“搜索产品”, () => {

cy.get('[name="search"]').eq(0).type("VAIO");

cy.get('[type="submit"]').eq(0).click();

});

it(“搜索后验证产品”, () => {

cy.contains(“索尼 VAIO”);

});

代码演练

一条新的赛普拉斯链总是以 cy.[命令] ,其中命令产生的内容确定了接下来可以调用的其他命令(链接)。

一些方法,如 cy.get() 或 cy.contains() , 产生一个 DOM 元素,允许将进一步的命令链接到它们(假设他们期望一个 DOM 主题),例如 .click() 甚至 cy.contains()

赛普拉斯端到端测试:案例 2

使用名称创建第二个规范 ****ScrollAnd_ClickProduct.spec.js 在文件夹 LambdaTest 下。登录→滚动到底部→点击产品。

在下面的代码片段中:

  1. 首先,我们使用 cy.visit() 打开站点 URL。
  2. 其次,it() 块用于通过输入电子邮件和密码登录应用程序。
  3. 第三,it() 块会点击 LambdaTest 的标志。
  4. 第四,it() 块将滚动到特定产品并单击它。

///

it(“打开网址”, () => {

cy.visit(

https://ecommerce-playground.lambdatest.io/index.php?route=account/login”

);

});

it(“登录应用程序”, () => {

cy.get('[id="input-email"]').type("[email protected]");

cy.get('[id="input-password"]').type("lambdatest");

cy.get('[type="submit"]').eq(0).click();

});

it(“点击 Lambdatest 徽标”, () => {

cy.get('[title="Poco Electro"]').click();

});

it(“滚动到底部并点击产品‘iPod Touch’”, () => {

cy.get('[title="iPod Touch"]').eq(0).scrollIntoView().click();

});

GitHub

如何在本地 Cypress Grid 上执行 Cypress 端到端测试?

您可以从命令行运行测试用例或使用赛普拉斯运行程序。让我们使用 Cypress runner 运行测试用例。​​要打开 Cypress 测试运行器,请运行以下命令。

纱跑柏树开

上述命令将使用现有测试用例打开 Cypress 测试运行器。您可以选择要在其上运行测试用例的浏览器。

在本地赛普拉斯网格上执行第一次赛普拉斯端到端测试

单击第一个 .spec,第一个测试用例开始执行。下面是测试用例成功运行时的屏幕截图。

在本地赛普拉斯网格上执行第二次赛普拉斯端到端测试

单击第二个 .spec,第二个测试用例开始执行。在下面的屏幕截图中,我们可以看到产品正在加载。

在下面的屏幕截图中,测试用例成功运行。

如何在云 Cypress Grid 上执行 Cypress 端到端测试?

我们已经在本地 Cypress Grid 上执行了 Cypress 端到端测试。我们可以表演 赛普拉斯并行测试 在使用云平台的多个浏览器、版本和操作系统上。基于云的 跨浏览器测试 像 LambdaTest 这样的平台允许您自动化 网络测试 与赛普拉斯 在线浏览器农场 真正的浏览器和操作系统。我们可以在超快的测试执行云上执行赛普拉斯端到端测试。

LambdaTest 提供了与 CI/CD 管道轻松集成的大规模并行化。 Cypress 测试结果将通过 lambdatest-Cypress CLI 实时显示。执行完所有测试用例后,您可以在 LambdaTest 仪表板 .在 LambdaTest 上,我们还可以看到所有测试用例的截图、视频和日志。

使用 Cypress 和 LambdaTest 在云上执行跨浏览器测试 |赛普拉斯教程 |第十三部分

您还可以订阅 LambdaTest YouTube 频道 并随时了解最新的教程 自动浏览器测试 , 硒测试 、CI/CD 等。

用于赛普拉斯测试用例执行的升压 lambdatest

步骤1 : 安装 CLI。

通过 npm 使用 Cypress CLI 命令安装 LambdaTest。 LambdaTest 的命令行界面允许我们在 LambdaTest 上运行您的赛普拉斯测试。

npm install -g lambdatest-cypress-cli

第2步 :生成 lambdatest-config.json。

在根文件夹下,配置我们要运行测试的浏览器。使用 在里面 生成样本的命令 lambdatest-config.json 文件或从头开始创建一个。使用以下命令。

lambdatest-cypress 初始化

在生成的 lambdatest-config.json 文件中,传递以下信息。

在部分中填写所需的值 lambdatest_auth , 浏览器 , 和 运行设置 运行您的测试。

{

“lambdatest_auth”:{

“用户名”:“用户名”,

“访问密钥”:“访问密钥”

},

“浏览器”:[

{

“浏览器”:“Chrome”,

“平台”:“Windows 10”,

“版本”:[“latest-1”]

},

{

“浏览器”:“火狐”,

“平台”:“Windows 10”,

“版本”:[“latest-1”]

}

],

“运行设置”:{

“cypress_config_file”:“cypress.json”,

“build_name”:“build-name”,

“平行”:2,

“规格”:“./cypress/integration/lambdatest/*.spec.js”,

“忽略文件”:“”,

“功能文件支持”:假,

“网络”:假,

“无头”:错误,

“reporter_config_file”:“”,

“npm_dependencies”:{

“柏树”:“9.2.0”

}

},

“隧道设置”:{

“隧道”:错误,

“隧道名称”:空

}

}

文字号召性用语 :使用赛普拉斯并行测试缩短测试执行时间。立即试用 LambdaTest

如何在云 Cypress Grid 上并行执行 Cypress 端到端测试?

运行以下命令执行 赛普拉斯 UI 自动化 在 LambdaTest 上。

lambdatest-cypress 运行

当我们运行上述命令时,测试用例开始在您的本地执行,并在 LambdaTest 平台上并行执行。

赛普拉斯本地环境端到端测试报告

当我们在本地终端运行命令 lambdatest-cypress run 时,会生成以下报告。

在下面的报告中,我们可以看到测试用例 login_searchproduct.spec.js 和 ScrollAnd_ClickProduct.spec.js 在 Firefox 和 Chrome 上成功运行。

Cypress 关于 LambdaTest 的端到端测试报告

在下面的屏幕中,您可以看到测试用例开始在 Firefox 浏览器上运行。

您可以在下面的控制台中看到日志测试用例在 Firefox 浏览器上传递。

在下面的屏幕中,您可以看到测试用例也开始在 Chrome 浏览器上运行。

您可以在下面的控制台中看到日志测试用例在 Chrome 浏览器上传递。

有关更多详细信息,您可以阅读此博客 如何使用 LambdaTest 大规模执行 Cypress 测试 .

概括

每种测试方法都有优缺点。赛普拉斯端到端测试最接近真实用户测试,这是其主要优势之一。测试越接近模仿用户,就越有可能捕捉到用户可能遇到的问题。

总体而言,如果您想通过一些端到端测试将您的测试提升到一个新的水平,赛普拉斯是一个不错的选择。

☕️ 测试愉快! ☕️

有关赛普拉斯的更多博客,请点击以下链接

qaautomationlabs.com/blogs/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/22812/47540909

posted @   哈哈哈来了啊啊啊  阅读(305)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示