什么是 Cypress Testing?Cypress Automation Testing 指北

简介: 什么是 Cypress Testing?Cypress Automation Testing 指北

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

运行结果如下图所示:

image.png

plus:余下内容就是介绍 Perfecto 和 Cypress 的集成,由于 Perfecto Cloud 在国内无法使用,这里不做翻译。


相关文章
|
7月前
|
前端开发 安全 测试技术
Cypress哪些坑
Cypress哪些坑
|
JavaScript 测试技术
cypress初探
E2E测试会发现启动的方式很简单,那么对应的组件测试,也是一样的简单。这样就不演示了,等一下来编写对应的组件,来看看效果
cypress初探
|
XML Java 测试技术
使用 JMeter 进行 Performance Testing 指北
使用 JMeter 进行 Performance Testing 指北
使用 JMeter 进行 Performance Testing 指北
|
Web App开发 前端开发 测试技术
【cypress】1. 什么是cypress,为什么要用它?
【cypress】1. 什么是cypress,为什么要用它?
【cypress】1. 什么是cypress,为什么要用它?
|
前端开发 安全 测试技术
Cypress的哪些坑
大家好,我是阿萨。昨天讲解了Cypress的那些独特的地方。今天我们来学习下Cypress 的那些坑。
310 0
Cypress系列(85)- Cypress.platform 命令详解
Cypress系列(85)- Cypress.platform 命令详解
126 0
Cypress系列(85)- Cypress.platform 命令详解
Cypress系列(87)- Cypress.browser 命令详解
Cypress系列(87)- Cypress.browser 命令详解
155 0
Cypress系列(87)- Cypress.browser 命令详解
Cypress系列(0)- 如何学习 Cypress
Cypress系列(0)- 如何学习 Cypress
320 0
Cypress系列(0)- 如何学习 Cypress
|
Web App开发 JSON JavaScript
Cypress系列(2)- Cypress 框架的详细介绍
Cypress系列(2)- Cypress 框架的详细介绍
863 0
Cypress系列(2)- Cypress 框架的详细介绍
|
XML JSON 资源调度
Cypress系列(41)- Cypress 的测试报告
Cypress系列(41)- Cypress 的测试报告
571 0
Cypress系列(41)- Cypress 的测试报告