二、Selenium WebDriver 和 Cypress 的区别

Cypress 和 Selenium WebDriver 都是支持端到端测试的测试自动化框架,当有人提到 Cypress 时,很快就需要比较或找出哪个比另一个更好。在我们开始了解 Selenium WebDriver 和 Cypress 之间的差异之前,我们首先需要了解这两个测试框架之间不同的开发动机,以及它们的预期用户是谁。

理解为什么 Selenium 网络驱动程序和 Selenium 网络驱动程序在体系结构上不同的原因,将对帮助您理解 Selenium 网络驱动程序和 Selenium 网络驱动程序框架的不同和相似方面起到重要作用。在本节中,我们将评估网络驱动程序和 Cypress 在不同方面的独特性、不同性和相似性。

我们将探索 Selenium 网络驱动程序和 Cypress 的不同用例,并研究每一个用例如何适合其使用目的。我们还将清楚地确定每个测试框架的受众,以及您可以从两个或每个框架中获得什么。我们将描述为什么您应该选择 Cypress 作为测试自动化框架,以及为什么它是端到端测试自动化的完美候选。

在了解了 Cypress 和 WebDriver 之间的异同之后,我们将通过列出使其脱颖而出的因素和工具来得出结论,并在端到端 web 测试自动化方面走在了前面。以下是我们将在本章中讨论的关键主题:

  • 为什么选择 Cypress?
  • Cypress 和硒网络驱动程序的比较
  • 使用 Cypress 进行前端测试

到本章结束时,您将能够理解 Cypress 与硒网络驱动程序的不同和相似之处,以及它如何在前端网络自动化测试中表现出非凡的能力。

为什么选择 Cypress?

Cypress 是一个由开发人员编写的端到端测试框架,面向开发人员和质量保证 ( QA )工程师。Cypress 专注于测试网络应用,由于网络自动化的唯一方法是使用 JavaScript,Cypress 只支持使用 JavaScript 编写测试。

Cypress 是专门为利用 JavaScript 开发产品的前端团队编写的,还有一些团队需要快速开始编写单元、集成和端到端测试,而不需要复杂的测试框架。

Cypress 不仅对初学者友好,而且确保开发人员或质量保证工程师开始测试所需的一切都已经打包在从 Cypress 网站下载和安装的包中。Cypress 自带浏览器、测试运行器和作为断言框架的 chai。

拥有一个包含开始编写测试过程所需的所有内容的包意味着任何人都可以开始进行测试,而不需要知道断言框架、测试运行器的设置过程,甚至不需要添加浏览器驱动程序,例如在使用 Selenium WebDriver 的情况下。

Cypress 使用了 JavaScript,这使得 JavaScript 开发人员可以更容易地掌握和快速掌握 Cypress 的概念。入职的便利性也确保了开发人员和质量保证工程师能够快速跟上使用丝柏编写测试的速度。由于 Cypress 是用 JavaScript 开发的,使用 JavaScript 的开发人员和质量保证团队发现调试更容易,也更容易理解错误,因为它们类似于 JavaScript 应用中的错误。

Cypress 利用了目前与火狐、Edge、Chrome 和 Chrome 系列浏览器兼容的通用驱动程序。与 Selenium 不同,Selenium 利用网络驱动程序,使用 HTTP 网络请求与文档对象模型 ( DOM )进行交互,而 Cypress 驱动程序直接在浏览器中工作,不需要进行网络请求。在浏览器内部运行测试的能力确保了当命令从测试传递到驱动程序,然后传递到浏览器中运行的应用时,Cypress 可以有效地解释命令,而不会引入超时。

使用通用驱动程序还可以确保 Cypress 保持所有浏览器中使用的方法的一致性,并且无论测试将在哪个浏览器中运行,都可以保持测试的标准格式。通过这种方法,质量保证团队或单个开发人员有可能扩展他们的跨浏览器测试,因为唯一需要做的事情是针对新支持的带有 Cypress 的浏览器运行他们现有的测试套件。

Cypress 框架在浏览器上运行,因为它在架构上不同于任何其他测试自动化工具,如硒网络驱动程序。Cypress 在浏览器上运行的能力使其比其他自动化工具具有竞争优势,因为它附带了自动等待序列,否则这些序列可能需要在测试中定义。因此,Cypress 知道什么时候等待一个事件,例如网络请求,否则在 Selenium 驱动的测试中需要将其指定为显式或隐式等待。

像 JavaScript 框架这样的软件开发技术比现有的测试技术和框架变化更快。Cypress 提供了一个独特的机会,开发人员和质量保证工程师可以快速开始编写测试的过程,而无需担心需要进行测试设置。消除对底层测试基础设施的担忧不仅加快了测试过程,还确保团队能够快速开始进行软件开发生命周期中重要且关键的任务。

重述——为什么选择 Cypress?

在这一节中,我们了解了为什么在进行 web 开发测试时,Cypress 是首选,以及是什么让它在包括 Selenium WebDriver 在内的其他测试框架中脱颖而出。在下一节中,我们将直接比较 Cypress 和 Selenium 网络驱动程序之间的异同。

比较 Cypress 和硒网络驱动程序

很容易陷入这样的陷阱:假设 Cypress 是硒网络驱动程序的替代品,并且它的使用可能会使硒网络驱动程序在测试自动化领域完全过时。虽然直接假设 Cypress 比硒更好或更优越或者相反很简单,但这种想法是有缺陷的,在大多数情况下是不正确的。

在本节中,我们将介绍为什么 Cypress 是独一无二的,以及它的目的如何与硒网络驱动程序相比更具互补性。以下几节概述了 Selenium 网络驱动程序和 Cypress 之间的一些区别。

浏览器驱动程序

Cypress 为其支持的所有浏览器使用了定制通用驱动程序,而另一方面,Selenium WebDriver 为其支持的不同浏览器使用了不同的驱动程序。为所有浏览器使用通用驱动程序的能力意味着,在安装时,我们可以在所有支持 Cypress 的浏览器上运行测试,而不需要安装外部驱动程序。另一方面,Selenium 要求每个浏览器都有一个驱动程序,以便能够在不同的浏览器中运行测试。通用驱动程序也给了 Cypress 竞争优势,因为开发它的团队能够修复网络驱动程序中常见的问题,并可以将功能扩展到不同的浏览器。

重试和等待

Cypress 在中内置了显式重试功能,以搜索 DOM 和中的元素,并在测试被认为失败之前显式等待事件发生。Cypress 附带了一些事件,这些事件决定了在浏览器决定请求是失败还是通过之前是否需要等待。Cypress 能够处理等待和重试,因为它运行在带有测试的浏览器上,并且能够在任何给定的时间理解测试的状态。

另一方面,Selenium 利用对 WebDriver 的 HTTP 请求,因此框架很难确定测试运行时需要显式还是隐式等待。为了解决这个问题,Selenium 用户必须在测试需要等待请求完成才能继续下一步执行的情况下自己编写等待。运行测试时,Selenium 也不附带自动重试功能,这是 Cypress 拥有的功能。

目标使用

Cypress 是为 JavaScript 开发人员和 QA 工程师而构建的,他们希望快速建立自动化框架并开始测试他们的端到端 web 应用,而不需要花费太多带宽来建立测试框架或了解构建测试框架背后的技术。使用 Cypress,开发人员可以轻松地超越编写单元测试,编写集成测试,甚至是具有诸如消除外部依赖和测试应用行为等功能的验收测试。Cypress 目前还倾向于开发人员和质量保证实践,这些实践与包括 Edge 在内的 Chromium 系列浏览器一致,并增加了火狐,目前火狐正在测试中。

另一方面,Selenium 网络驱动程序是为了测试网络上运行的任何东西而构建的。Selenium 专注于希望测试其网络应用各个方面的质量保证团队,不受浏览器兼容性或单一测试运行程序等因素的限制,Cypress 就是这种情况。Selenium WebDriver 为用户提供了使用不同浏览器和插件进行扩展的选项,还支持不同的语言,如 Java、Python、Ruby、C#、JavaScript、Perl 和 PHP。很难说 Selenium 是 Cypress 的直接竞争对手,因为我们可以生动地看到,尽管他们的用例非常相似,但他们的受众和目标用户却完全不同。虽然 Selenium 面向所有主要开发语言的用户,甚至支持 Appium 等工具中的移动自动化,但 Cypress 只专注于为理解 JavaScript 语言的 JavaScript web 开发人员和 QA 工程师提供更好的测试。

建筑

Cypress 运行在浏览器上,这使它比硒网络驱动程序等工具更具优势。在浏览器上运行意味着 Cypress 要快得多,并且可以在运行时更快地解释命令,因为没有第三方服务代表它解释命令或向浏览器驱动程序发送 HTTP 请求。虽然所有的 Cypress 命令都在浏览器内部运行,但是 Cypress 可以告诉浏览器外部发生了什么,因为它可以访问应用拥有的所有内容,包括窗口对象、DOM、文档对象或任何其他进程和方法。只要您的应用可以访问,那么 Cypress tests 就可以访问。下图显示了 Cypress 的架构和硒网络驱动架构。其中在 Cypress 中,执行发生在浏览器中,在 Selenium 中,执行发生在浏览器之外:

Figure 2.1 – Selenium versus the Cypress test execution architecture

图 2.1–硒与 Cypress 测试执行架构

跨浏览器兼容性

Cypress 目前不像 Selenium WebDriver 那样支持所有主要浏览器。Cypress 目前支持使用 Chromium 开源项目、火狐、Edge 和 electronic(Cypress 的默认浏览器)构建的浏览器。另一方面,Selenium 支持所有主要的浏览器,这使得它能够在多个平台上测试应用。虽然可以说跨三个以上浏览器的跨浏览器功能增加了体系结构的复杂性,但对测试过程的价值极小,对多个浏览器的支持可能会导致识别高优先级的错误,即使错误的严重性可能很低。

Cypress 的取舍

如前所述,Cypress 是一款测试自动化工具,专注于浏览器端对端的测试自动化。能够在浏览器上运行意味着 Cypress 可以比任何其他工具更好地与浏览器上的元素进行交互,但这也意味着 Cypress 具有永久性的权衡,这种权衡不会因其架构而改变。以下小节描述了权衡。

范围限制

当被用作编写测试的质量保证工程师和开发人员的自动化工具时,Cypress 的工作效果最好。Cypress 不支持手动自动化工具,也没有计划在框架中集成手动测试工具。

Cypress 也不是为 web 索引和性能测试等活动而设计的,执行这些活动可能会降低框架的性能能力。

环境限制

Cypress 在浏览器上运行,这意味着它支持的语言将始终是 JavaScript,因为测试代码将始终在浏览器中评估。能够在浏览器中运行意味着,要连接到数据库或服务器,我们只能使用cy.exec()cy.request()cy.task()的 Cypress 命令,这些命令提供了一种暴露数据库或服务器的方法,这可能比我们明确定义它们的配置并让 Cypress 理解它们要复杂得多。让测试在浏览器中运行为运行测试创造了很好的体验,但是插入需要在浏览器之外运行的功能有点麻烦。

多个浏览器和多个标签–限制

Cypress 框架不支持测试运行时控制多个浏览器的能力。这是一种永久性的权衡,因为在一个浏览器中运行测试时,不可能控制多个浏览器。

Cypress 框架不支持与多个浏览器选项卡交互的能力,因为该功能不会在浏览器中公开。但是,Cypress 提供了合并其他工具(如 Selenium 或 Puppeteer)的能力,以便在需要时操作和驱动多个浏览器选项卡。

控制原点限制

仅 Cypress】支持在同一个测试中访问相同来源的 URL。控制源限制意味着对于任何特定的测试,您都不能访问不属于同一个源的不同网址。一个例子是试图在同一个测试中向https://github.comhttps://gitlab.com发送请求,这将导致错误。以下示例说明了在编写 Cypress 测试时使用交叉原点的不正确和正确的方法。

利用交叉原点运行测试的正确方法

在下面的测试中,用户提示 Cypress 首先导航到https://github.comGitHub 网站,然后导航到https://docs.github.com/en(文档链接)获取 GitHub 资源。这两个链接属于同一个来源github.com,因此 Cypress 在执行请求时不会有任何问题:

It('can navigate to code repository hosting service', () => {
    cy.visit('https://github.com');
    cy.visit('https://docs.github.com');  });

利用交叉源运行测试的不正确方式

在这个测试中,用户提示 Cypress 首先导航到https://github.com,然后导航到与第一个网址不同的 https://gitlab.com。这将导致测试运行时出现错误:

It('can navigate to code repository hosting service', () => {
    cy.visit('https://github.com');
    cy.visit('https://gitlab.com');  })

Cypress 和硒的互补作用

在某些情况下,我们可以同时使用 Cypress 和硒,这种情况很少见,但在编写测试时仍然可以实现。虽然丝柏有无法控制多个浏览器选项卡的限制,但可以将丝柏配置为使用 Selenium 运行多个选项卡。我们还可以利用 Cypress 进行端到端测试,利用硒进行负载测试等活动。Selenium 能够执行诸如负载测试之类的测试,这在 Cypress 中是不支持的,在这种情况下,两个测试框架可以一起使用。

总结差异

Cypress 是为网络而构建的,并针对在浏览器上运行进行了优化。Cypress 的架构允许它有效地运行测试,同时克服了网络驱动的挑战。虽然 Cypress 能够在浏览器上运行,但是网络驱动程序使用 HTTP 协议与浏览器交互,因此在运行测试时会导致延迟和未知的等待事件。Cypress 还面向质量保证工程师和开发人员,他们希望编写测试,而不用担心底层基础设施以及一个断言库和编程语言的限制。Cypress 还承诺未来,因为支持 Safari 和 Internet Explorer 的计划正在进行中,这将确保开发人员和测试人员可以在他们选择的浏览器上试用 Cypress。

尽管 Cypress 附带了各种福利,但它也有一些暂时和永久的权衡。一些暂时的折衷是支持所有主要浏览器的能力,或者执行某些功能,例如悬停在某个元素上。另一方面,永久的权衡意味着 Cypress 的建筑即使在未来也无法支撑它们。它们包括诸如控制多个打开的浏览器和/或在浏览器中操作多个选项卡、能够连接到外部数据库和服务器以及调用不同的交叉源等方面。所有的永久性权衡都有变通办法,用户总是可以随意实施变通办法。然而,Cypress 建议,在将 Cypress 拉伸到超出其预期目的的情况下,不应使用变通办法。将 Cypress 用于非预期目的可能会造成障碍,例如测试自动化的复杂性,这可能会降低 Cypress 作为自动化工具的有效性。

回顾–比较 Cypress 和硒网络驱动程序

在本节中,我们学习了使用 Cypress 的优势,并将其与使用 Selenium 编写测试进行了比较。我们还确定了为什么硒在架构上不同于 Cypress,为什么两者互补多于互补。我们探讨了 Cypress 的权衡,以及克服 Cypress 自动化框架中长期存在的权衡的一些解决方案。在下一节中,我们将深入研究使 Cypress 成为端到端 web 测试自动化最佳候选的工具。

用于前端应用的 Cypress

Cypress 是为网络而建的,这意味着它包含了一些其他框架可能没有的工具和功能。这改善了前端网络开发人员和质量保证工程师的测试体验。在这一节中,我们将探索 Cypress 所包含的不同元素,这些元素使其用户能够方便快捷地进入并开始使用。以下是 Cypress 从其他前端应用测试自动化框架中脱颖而出的一些元素。

试跑者

当用户的机器上安装了 Cypress 时,默认情况下会出现 Cypress 测试 Runner。它是一个交互式用户界面,允许 Cypress 框架的用户看到测试中运行的命令,以及在命令与它交互时正在测试的应用。测试运行程序能够在测试运行时显示测试失败的次数、测试通过的次数、跳过的测试、命令日志,甚至浏览器的视口。

设置过程

如前一章所述,Cypress 的设置过程不仅清晰简单,还保证了 QA 工程师和前端开发人员只需运行一个命令即可安装 Cypress。这样就不需要配置外部依赖来开始编写测试的过程。Cypress 的文档也非常具有交互性和清晰性,这使得开发人员和质量保证工程师可以轻松快速地使用 Cypress 的功能。

实施和调试

Cypress 测试 Runner 自带内置的命令日志,这意味着当处于调试模式时,用户能够实时检查已经通过的命令和断言以及其他失败的命令和断言。突出显示失败的命令并检查哪些元素未能被调用,或者哪些函数失败的能力是使丝柏脱颖而出的一项能力,因为调试前端应用不仅变得简单,而且还节省了用于调查失败原因的时间。命令日志还会给 Cypress 用户即时反馈,他们可以通过检查运行在 Test Runner 上的命令来判断测试是否写得正确。

详尽的测试能力

Cypress 结合了编写功能测试的能力,也检查来自前端的应用编程接口调用的响应。它还具有可视化回归功能,可以识别是否对测试中的应用进行了有意的更改。

当编写功能测试时,Cypress 框架检查前端功能是否按照需求文档中的规定工作,这将涉及一个过程,如单击按钮或注册用户。

另一方面,API 验证测试检查返回的XHR(XMLHttpRequest)请求是否成功,当请求被返回时是否收到正确的响应。XHR 请求为 API 测试提供了额外的验证层,因为我们可以确认预期数据的结构类似于我们在前端应用中收到的数据。

重要说明

XHR 作为一个应用编程接口工作,但以对象的形式表示,其主要目的是在给定的网络服务器和网络浏览器之间传输数据。

可视化回归测试通过将基线的页面快照与最新测试运行的页面快照进行比较来检查页面中元素的一致性。如果发现差异,那么正在运行的测试将会失败。出现故障时,会创建一个显示预期映像和生成映像之间差异的快照,以显示生成的快照和基准映像之间的差异。测试运行后,质量保证工程师或开发人员可以接受或拒绝对前端应用所做的与应用更改相关的更改。

重述–用于前端应用的 Cypress

在本节中,我们了解了为什么在测试前端应用时,Cypress 是最合适的。我们了解了使它成为一个更好的测试框架的不同元素,以及我们可以利用它的优势来编写更好、更详尽的测试的方法。

总结

毫无疑问,丝柏是一个强大的工具,前端团队和质量保证工程师可以利用它来快速开始并编写测试,而不用担心从头开始构建测试自动化工具带来的开销。在本章中,我们了解了为什么 Cypress 是测试的最佳 web 自动化框架,我们通过比较 Cypress 和现有测试自动化工具之间的不同工具来做到这一点。我们还涵盖了 Cypress 和硒的区别,以及两者之间的具体建筑异同。最后,我们探讨了如何利用这些工具。在下一章中,我们将学习如何使用命令行工具来运行、测试和调试 Cypress 测试。