开始使用Cypress的测试自动化的指南

1,153 阅读11分钟

如果你来自自动化测试领域,你会知道Selenium是市场上领先的测试自动化框架之一。然而,根据我在测试自动化方面的经验,其他现代自动化框架,如Cypress正在加快步伐。 根据Slintel的报告,Cypress在跨浏览器测试市场的份额接近2.61%。

我曾在网络自动化项目中使用过Selenium和Cypress,到目前为止,Cypress的经验是非常迷人的。我之前写的关于Cypress测试自动化介绍的博客,对于愿意用Cypress进入网络自动化测试的人来说,可以作为一个很好的起点。

与使用其他网络自动化框架进行的测试相比,Cypress无疑更可靠、更快速、更少失误。但是,正如人们所说的那样,"数字不会说谎",Cypress每周超过350万的下载量说明了这个开源测试自动化框架的受欢迎程度。

popularity of this open-source test automation framework

资料来源

在这篇关于开始使用Cypress的博客中,我将深入探讨Cypress--这个流行的开源框架,它已经得到了开发者和QA社区的巨大认可。

什么是Cypress

首先,Cypress是一个基于JavaScript的开源自动化测试框架,支持Web和API应用测试。此外,Cypress在真实的浏览器实例上执行测试,避免了无需下载浏览器驱动程序的需要,而这通常是Selenium测试自动化的情况。

如果你打算从Selenium转到Cypress,请查看Selenium与Cypress的博客,以做出明智的决定。在写这篇关于开始使用Cypress的博客时,Cypress的最新版本是9.6.0。

与Selenium不同,Selenium支持接近6种流行的编程语言,而Cypress只支持JavaScript语言。因此,它更适合于测试使用React、Angular等流行框架构建的现代网络应用。现在,重要的问题是,Cypress只支持前端测试吗?好吧,绝对不是!

Cypress端到端测试是该框架的主要主要用途之一。它也适用于编写单元测试和集成测试。一言以蔽之,架构上的差异和对现代网络应用测试的适用性是Cypress框架的主要优势。与Selenium一样,Cypress云测试可以让你在一系列不同的浏览器、浏览器版本和操作系统上大规模地在线运行Cypress测试。

Cypress架构

如前所述,Cypress测试直接在浏览器内运行。这实质上意味着,Cypress测试框架可以通过监听和改变传入的网络请求,灵活地修改浏览器的行为,这也是在飞行中!我见证了Cypress的测试。

我看到,与Selenium测试相比,Cypress测试显示出相对较少的不稳定性,因为该框架不使用任何类型的WebDriver。相反,Cypress的spies和stubs让你在运行时控制函数和时间的行为。

阅读 - 详细的Selenium WebDriver教程

现在,我已经在本指南中介绍了Cypress测试框架的基本内容,让我带你了解Cypress的架构。Cypress在一个NodeJS服务器上执行,该服务器调用浏览器(被测)来执行应用程序(页面上的一个iFrame)和测试代码(构成另一个iFrame)。

Cypress executes on a NodeJS server

赛普拉斯架构

这些都在同一个会话上,从而使Cypress代码能够模拟甚至改变JavaScript全局对象。此外,NodeJS的运行进程作为一个代理,帮助拦截通过HTTP协议的请求,帮助模拟它并改变响应,以进行测试。

在写这篇关于开始使用Cypress的博客时,Cypress支持Chrome家族的浏览器(包括Electron和基于Chromium的Microsoft Edge),以及Firefox。

Cypress的突出特点

与其他用于跨浏览器兼容性测试的流行测试自动化框架相比,以下是Cypress的一些独特功能

  • Cypress软件包带有完全出炉的库,避免了安装任何主要的依赖性。相反,你所需要的只是安装Cypress!
  • 测试代码和应用程序共享浏览器会话,从而导致更快的响应时间。
  • Cypress提供自动化等待和断言,避免了添加显式或隐式等待的需要。然而,你可以参考Selenium博客中的显式等待,以获得更多关于Selenium中等待类型的信息。由于这个原因,Cypress测试比其同等的Selenium测试更不容易出错。
  • 由于测试在真实的浏览器中运行,你可以改变代码,并在保存时只运行改变后的测试。
  • Cypress测试运行器可以作为一个GUI应用程序无缝运行。
  • 在Cypress仪表盘中,默认支持并行测试执行和详细报告的生成。
  • 在Cypress中调试测试是非常容易的。
  • 在测试执行过程中,每一个被触发的事件都会自动生成全屏截图。 此外,在Cypress中,测试执行的视频记录也是可能的。

那么,这是否意味着Cypress没有缺点?绝对不是。由于Cypress只支持JavaScript,如果你打算使用Cypress进行网络自动化测试,你需要学习JavaScript的编码。

我们都知道,在Selenium中进行网络搜刮是很容易做到的。此外,你可以灵活地使用流行的Selenium支持的语言,如C#、Python、Java等,来实现这一任务。缺点是,Cypress不是网络刮擦(或网络抓取)和性能测试的首选。

如果你想探索Cypress提供的大量功能,请查看LambdaTest YouTube频道上的详细Cypress教程

你也可以订阅LambdaTest YouTube频道,了解围绕自动化浏览器测试Selenium测试、CI/CD等的最新教程。

如何安装Cypress?

Cypress仪表板和Cypress测试运行器是将与Cypress一起安装的两个主要组件。执行下面的步骤,在本地机器上安装Cypress。

  1. 由于Cypress是使用NodeJS构建的,在继续安装Cypress之前,你首先需要安装NodeJS v12+。
  2. 一旦NodeJS安装完毕,在适当的目录下创建一个项目文件夹,并使用npm init命令初始化该文件夹。
  3. Cypress是一个单一的模块,它捆绑了你运行测试所需的所有属性。将Cypress添加到node_modules中 安装Cypress只需一个命令即可,因为它是一个捆绑了所有必需属性的单一模块。

可以使用npm或yarn将Cypress添加到node_modules,使用以下任一命令。

npm install cypress
yard add cypress
  1. 一旦Cypress包被添加到项目目录中,你应该能够看到Cypress文件夹被添加到你的项目中,并预先添加了用于样本测试的测试。

安装Cypress测试运行器

在终端上运行命令npx cypress open,以打开Cypress GUI测试运行器,并查看所有预装测试。如果你是通过package.json文件管理命令,你可以在脚本下添加命令,如下图所示。

文件名 - Package.json

FileName - Package.json

执行后,测试运行器将显示如下图所示。

test runner

你现在可以选择运行单个测试或Cypress厨房水槽例子中的所有测试。如果你打算运行所有的Cypress测试,请选择根文件夹。

在终端上运行Cypress CLI,因为它提供了扩展运行测试的选择的设施,如选择测试的浏览器。使用Chrome浏览器进行测试的示例命令如下所示。

npx cypress run -- --browser chrome

此外,你还可以使用-spec选项选择一个特定的文件来运行。

npx cypress run -- --browser chrome --spec '<path to test file>'

Cypress setup

现在,一旦我们习惯了Cypress的设置和基本样本(如上图所示),让我们看看一个名为checkboxes.spec.js的简单测试。为了演示,我使用LambdaTest Selenium Playground来验证与页面上WebElements的交互。

同时阅读-如何使用Cypress定位器查找HTML元素

Cypress的测试代码默认是以Mocha风格编写的。Cypress中的测试从一个使用describe()或context()的测试套件开始,在这个测试套件下,你可以编写多个it()函数,对应于一个测试场景。

下面是作为测试案例一部分的命令列表。

list of the commands

代码演练

让我们来看看代码的整体方面。

  1. 在测试代码中通过包含语句///来启用智能提示。
  2. cy.visit()函数用于导航到目标URL。
  3. cy.get()函数用于定位页面上所需的WebElements。CSS选择器被Cypress用来定位DOM中的元素。
  4. type()函数用于在上一步定位的文本框元素中输入所需文本。type()函数也接受可以用{keyCommand}轻松编写的键盘动作,如"{enter}",即type('{enter}')
  5. 在这个例子中,如果ToDo元素没有被检查,即.should('be.checked')就会引发断言。

下面显示的是Chrome浏览器上的执行快照。
snapshot on the Chrome browser

整个测试执行被自动记录并存储在一个.mp4文件中,这样测试执行的细节就可以在不同的团队中共享或查看。

现在我们已经看到了如何安装Cypress。在本文关于开始使用Cypress的下一节中,我们将了解更多关于Cypress仪表板服务。

Cypress仪表板服务

Cypress测试运行器在运行测试和以记录会话的形式存储执行方面做得很好。然而,如果你想远程存储和运行测试,而不对浏览器更新、测试历史、测试分析等有很大的压力,怎么办?

为了满足这种要求,Cypress提供了惊人的付费功能,可用于CI集成和测试场景的并行化。

以下是Cypress仪表板服务的一些突出特点。

  • Cypress测试运行器足以运行串行测试。然而,你需要Cypress Dashboard Service来并行地运行测试。我个人推荐像LambdaTest这样的云Cypress测试平台,它可以让你在一些浏览器和操作系统的组合上并行运行测试。
  • 仪表板服务让你对测试进行分组,并在多级环境和浏览器上运行它们
  • 它支持与最好的CI/CD工具集成,如Jenkins、Travis CI等
  • 它提供了通过深入分析运行的历史数据来分析以前的测试运行的设施。
  • 它自动平衡平行线程的负载,以减少CI服务器的负载。

尽管你可以通过在Cypress仪表板上创建一个账户来并行运行测试,但我建议使用LambdaTest等Cypress测试平台,以充分利用Cypress、CI/CD、报告等。

如何在Cypress云网格上运行Cypress测试

虽然Cypress提供的Dashboard服务很有用,但在有些情况下,需要在各种浏览器、浏览器版本和操作系统上运行跨浏览器的测试案例。但这还不是全部。你还需要与一系列工具(和框架)集成,如CI/CD工具、无代码自动化工具、报告工具等等。

类似LambdaTest的基于云的Cypress UI测试云解决了上述问题。此外,将测试迁移到Cypress云网格有助于提高整体的浏览器覆盖率,同时加快测试案例的执行速度。

在本文关于开始使用Cypress的这一节中,让我们在checkboxes.spec.js中执行先前的测试,并看看它在LambdaTest网格上的运行情况。

**第一步:**配置LambdaTest配置。

使用npm install lambdatest -cypress -cli在项目根目录下安装lambdatest-cypresscli软件包。

using npm install lambdatest-cypress-cli under

安装后,使用以下命令创建lambdatest-config.json

npx lambdatest-cypress-cli init

specified Chrome and Firefox browsers

我在配置文件中指定了Chrome和Firefox浏览器(即必须在其上进行测试的浏览器)。平台名称和版本也在配置文件中指定。

下面显示的是package.json文件的样本。

package.json

使用lambdatest-cypress运行测试,看看LambdaTest Cypress网格上的测试情况。

lambdatest-cypress run

Cypress 101 Certification

通过这个认证,展示你使用Cypress测试框架进行端到端测试的专业知识,并保持领先一步。

总结

Cypress是广泛使用的自动化测试框架之一,用于现代Web应用程序的自动化测试。通过在基于云的Cypress网格上大规模运行测试,可以进一步增强Cypress框架所提供的功能。

这就是LambdaTest Cypress CLI发挥作用的地方。它可以让你在一系列流行的浏览器和平台上以快速的速度运行测试。我希望这份关于Cypress的入门指南能够帮助你启动你的Cypress UI自动化之旅。请在评论区留下你的反馈。

测试愉快!