初识Cypress

Cypress （https://www.cypress.io/）是一款功能强大的端到端的Web 测试框架。相比于其他类似最大的特点就是有个可视化的UI界面，调试起来相当直观方便。使用的时候要按业务需要写一些测试用例就可以用带界面或者纯命令行模式来跑了。

安装

Cypress依赖于node js 环境，估计做web 开发的人都是有的。Cypress本身可以用npm安装在目标项目下：

npm install cypress --save-dev

或者用yarn 也行

yarn add cypress --dev

官网上还有个官方的 cypress/base Docker容器可供使用。

初次使用的话Cypress 还很贴心地为我们创建了示例项目：

使用

Cypress有两种运行模式：open和run。其中open是有图形用户界面的，适合开发调试时使用。而run是命令行模式，更适合跑自动化测试，比如在jenkins的pipeline上。启动方式如下：

npm run cypress:open
npm run cypress:runyarn run cypress open
yarn run cypress run

Cypress 的图形界面有两个窗口，首先出现的是主窗口：

这个界面会列出当前项目里面所有的测试文件（以.spec.js结尾的）。用户可以点击某个文件来跑这个测试或者点击右上角的链接跑所有的测试。然后就会打开一个独立的浏览器作为测试页面的容器。如下图：

在图中我们可以看到在浏览器中也不单单是被测试网页，而是有一个网页框架包围着它的。左边的区域就是所有的测试用例还有每个测试的步骤和状态的记录。右边的iframe才是要测试的目标网页。

点开某个测试过的case，我们可以看到before each阶段是访问了指定网址。然后在test body里面每一步都干了什么，包括UI操作如点击，滚动之类，还有http请求了什么。还会有assert 的内容和结果，如果出错还有出错信息。

点击某一步的话还会显示当时的截图，真的是非常方便。

调试

使用Cypress图形界面的好处不只是可以看到页面上发生了什么，而且可以实时调试，方法和普通的网页调试基本没差别，而且不仅业务代码可以调试，而且测试代码也能调试。

此外，Cypress还提供了名为debug和debugger的API，用于在运行时暂停，这样用户就可以从容打开调试工具并且在console上做交互式调试了。

编写测试

目录结构

其实刚刚在自动初始化的时候，Cypress 已经给我们建好了测试目录就在项目根目录下的./cypress下面：

不仅如此还初始化了基本的测试框架代码而且插入了一些例子在./cpyress/integration/examples目录下，将来可以删除这些例子。

我们可以在integration文件夹下建立子文件夹和新的测试文件。

在cypress/support/commands.js里加入自定义API。

测试代码

Cypress 测试的写法也很符合我们的习惯：

用describe 来声明一个测试用例组
用it 来写一个测试用例
用expect来做断言
还有我们写测试常用的beforeAll, beforeEach, afterAll, afterEach之类的API
可以使用cy.xxx方法来调用cypress 特有的API或是我们在commands.js里面自定义的API，比如cy.visit(url)是跳转到指定的URL

更多细节请参考cypress API文档：https://docs.cypress.io/api/api/table-of-contents.html

移动设备适配

现在的web 前端开发往往要同时支持桌面和移动端，甚至就是以移动端为主。所以能够模拟并测试不同的屏幕尺寸就显得十分必要了。因此cypress 提供了viewport 方法来解决这个问题，cypress内置了很多不同设备屏幕尺寸比如ipad-2, iphone-x也可以自定义屏幕分辨率大小。

测试组件

Cypress 也可以用于测试Vue或React组件，但需要安装特定的库: @cypress/vue 或者@cypress/react 。它的做法是提供一个mount API把组件加载渲染出来进行测试，而不是真正的全部网页。

端到端测试框架Cypress简介相关推荐

Go：基于BDD的测试框架 Ginkgo 简介及实践
文章目录简介 1. TDD 2. BDD 3. Ginkgo 一.Ginkgo实践 1. 安装Ginkgo 2. 使用二.高级用法 1. 标志 2. 并发 3. goroutine 4. Desc ...
Python 各种测试框架简介（三）：nose
摘要这里将从( pythontesting.net)陆续编译四篇 Python 测试框架的简介,分别为:doctest.unittest.nose 和 pytest.本篇为第三篇:nose 本篇将介 ...
E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用
E2E 测试介绍 E2E E2E(end to end)端到端测试是最直观可以理解的测试类型.在前端应用程序中,端到端测试可以从用户的视角通过真实浏览器自动检查应用程序是否正常工作. E2E 把整个系 ...
python主讲移动端自动化测试框架appium_Appium-移动端自动测试框架，如何入门？...
Appium是一个开源测试自动化框架,可用于原生,混合和移动Web应用程序测试. 它使用WebDriver协议驱动iOS,Android和Windows应用程序. Appium是在手机操作系统自带的测 ...
端到端测试哪家强？不容错过的Cypress
阅读原文 1. 目前E2E测试工具有哪些? 项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 ni ...
Spring MVC测试框架详解——服务端测试
随着RESTful Web Service的流行,测试对外的Service是否满足期望也变的必要的.从Spring 3.2开始Spring了Spring Web测试框架,如果版本低于3.2,请使用sp ...
e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
我与无影的初体验：使用无影云桌面进行一个开源 Angular 项目的端到端测试
近日很荣幸地收到了阿里云邀请做一个关于阿里旗下无影云桌面的评测,从官网上了解到阿里云无影云桌面原名为弹性云桌面,融合了无影产品技术后更名升级,可广泛应用于具有高数据安全管控.高性能计算等要求的安全办公 ...
模糊测试之SPIKE测试框架简介
模糊测试简介模糊测试概述模糊测试(Fuzzing),是一种通过向目标系统提供非预期的输入并监视异常结果来发现软件漏洞的方法.其核心思想是自动或半自动的生成随机数据输入到一个程序中,并监控目标程序异 ...

端到端测试框架Cypress简介