Cypress 是一个益发流行的 Web 测验结构,在 Web 主动化测验方面能够作为老牌主动化测验结构 Selenium 的一个弥补。

本文将带你开端运用 Cypress 主动化测验并知道运用 Cypress 进行主动化测验的优势。

什么是 Cypress?

Cypress 是一个依据 JavaScript 的端到端的 Web 测验结构。它支撑前端开发和主动化测验工程师运用 JavaScript 来编撰测验脚本,并且 JavaScript 也是 Web 开发的主要言语。运用 JavaScript 使得 Cypress 主动化测验对前端开发人员来说愈加便利。

Cypress 能够作为支撑多种言语并构建在分布式架构上的 Selenium WebDriver 主动化测验结构的弥补,Cypress 的测验履行能力为用户在测验创立阶段带来了许多帮助。

Cypress 的优势

运用 Cypress 的代替其他结构的原因有许多,下面咱们来逐个剖析:

1. Cypress 是一个愈加通用的结构

与其他结构比较 Cypress 是一个愈加通用的结构,因为它在 Mocha 和 Chain 的基础上运用 JavaScript 编写,一起也运用了 NodeJS 进行构建。

事实受骗 JavaScript 成为 Web 开发的主要原因的时分就益发显得 Cypress 依据 JavaScript 是多么的重要,Cypress 运用 Web 前端开发者熟悉的言语使得 Cypress 愈加简略上手。

运用 Cypress 还能够进行跨浏览器测验,你能够在 FireFox 和以 Chrome 内核为核心的浏览器如 Edge 和 Electron 上履行主动化测验。

2. Cypress 主动化测验环境构建非常简略

运用 Cypress 能够非常简略快速的开端 Web 测验,假如你运用过 Selenium,你就会知道在开端之前需求装置一大堆的依靠,而 Cypress 现已全部将依靠打包好并且无须做任何的装备。

别的,Cypress 与 Chrome 绑定,所以无需任何杂乱的环境装备,当然,你也能够运用当时环境中现已装置的其他恣意浏览器,比较 Selenium 需求用户下载浏览器相关的 WebDriver 并装备来说效率高出了一大截。

3. Cypress 有强壮的调试能力

你能够非常轻松方便的运用 Cypress 进行 Debug,当测验失利时你会得到一些修复的主张,你能够能够运用 Chrome 的 Devtool 来进行 Debug。Cypress 还支撑 Time Travel(检查履行的快照) 和实时加载履行测验用例,因此开发者能够在测验履行前或许履行后检查页面的源代码

Cypress 还能够访问页面中的每个目标(DOM 目标),并简化了过错剖析。Cypress 能够供给过错快照,使得 Debug 愈加简略、快速。

Cypress 的特色

  • 韶光机(Time Travel):Cypress 能够供给测验运转的快照,能够依据日志或许每行指令来检查运用此刻履行的操作。
  • 强壮的调试能力(Debuggability):能够在浏览器上直接 Debug,供给了牢靠的过错剖析以及堆栈信息。
  • 主动等候(Automatic):永久不要在你的测验代码中添加等候后者睡眠时刻。Cypress 内置了主动等等候和断言,杜绝了同步问题。
  • Spies,Stubs and Clocks:它能够操控功能,服务响应以及时钟等,这些 unit testing 功能它都包含。
  • 网络流量操控:能够轻易的操控网络流量,无需介入服务端
  • 成果一致性:Cypress 的结构中没有触及到 Selenium 或许 WebDriver,这也便是它更快更牢靠的原因
  • 截图和视频:测验失利时会主动截图,或许能够从指令行中获取整个测验套件运转的视频。
  • 更快:Cypress 在浏览器内运转,更快。

4. Cypress 供给了快速履行测验的能力

Cypress 出名于它的快速履行能力,履行的时刻小于 20 MS。Cypress 内置了主动等候,这意味着你不用在代码中添加任何显现或许隐式的等候,它会主动等候如 DOM 加载、事件以及元素…

此外,Cypress 还能够在履行第一个测验后主动运转后续测验。这消除了停机时刻和手动触发下一个测验的需求。

5. Cypress 有一个活泼的社区

Cypress 是一个免费的开源的结构,它供给了也供给了付费形式供用户挑选。付费形式包含了一些愈加强壮的特征,如具有更多组件的 Dashboard、DOM 快照以及视频等一些对 Debug 非常有用的特性。

假如对 Cypress 感兴趣能够关注在 Github、Gitter 以及 StackOverFlow 上关注,别的 Cypress 还供给了丰厚的文档。

如何开端运用 Cypress 进行主动化测验

作为在测验领域的领导者,Perfecto 以及全面支撑 Cypress 主动化测验结构。Perfecto 运用 Perfecto Cloud 将 Cypress 主动化测验变得愈加简略。

运用 Perfecto 和 Cypress 开端主动化测验,履行以下几个过程即可:

  1. 创立项目文件夹 perfecto-cypress,履行初始化指令,创立 package.json 装备文件
npm init

image.png

  1. 装置 Perfecto-Cypress SDK,并在装置完成之后履行初始化指令,生成 perfecto-config.json装备文件

image.png

image.png

除了上面运用到的 init 指令,perfecto-cypress 还支撑以下几个指令:

  • Run
  • Pack
  • Upload

image.png

能够经过指令行来检查这几个指令的运用方法:

经过 perfecto-cypress-sdk 你能够在本地指令行中履行你的测验脚本,也经过 artifact key 将测验脚本打包上传到 perfecto cloud 去履行。

下面是 perfecto-cypress run 支撑的指令行参数和他们的别号,包含 reporting 的一些指令行参数都是可用的。

image.png

当上传 Cypress 测验套件到 Perfecto Cloud 上时,能够运用以下指令行选项。引荐运用存储在 perfecto-config.json 装备文件中的 Security Token。

image.png

  1. Perfecto 的 Cypress SDK 与 Cypress 彻底一样,支撑 Chrome、FireFox 以及 Edge 浏览器,在 perfecto 的装备文件中装备运转平台的装备,如下图所示的 perfecto-config.json 装备文件所示:

image.png

plus:以下过程是在本地履行的测验演示,原文中没有触及

  1. 履行指令翻开 Cypress GUI,指令如下:
npx cypress open

进入 Cypress GUI 界面后,进行如下装备:

挑选 E2E Testing:

image.png

挑选 Cypress 装备文件:

image.png

挑选本地的一个浏览器翻开 Test Runner 界面:

image.png

创立测验脚本,能够创立示例脚本,也能够创立新的脚本:

image.png

点击 OK 即可。

image.png

接下来双击 todo.cy.js 文件,既能够在 Test Runner 界面运转测验用例了;

image.png

运转成果如下图所示:

Oct-18-2022 14-37-43.gif

plus:余下内容便是介绍 Perfecto 和 Cypress 的集成,因为 Perfecto Cloud 在国内无法运用,这儿不做翻译。

本文翻译自 www.perfecto.io/blog/cypres…

继续创作,加快生长!这是我参加「日新计划 · 10 月更文应战」的第4天,点击检查活动概况