端到端测试哪家强?不容错过的Cypress

阅读原文

1. 目前E2E测试工具有哪些?

项目 Web Star
puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906
nightmare Electron 15502
nightwatch WebDriver 8135
protractor selenium 7532
casperjs PhantomJS 7180
cypress Electron 5303
Zombie 不需要 4880
testcafe 不需要 4645
CodeceptJS webdriverio 1665

端到端测试一般都需要一个Web容器,来运行前端应用。例如Chromium, Electron, PhantomJS, WebDriver等等。

从体积角度考虑,这些Web容器体积一般都很大

从速度的角度考虑:PhantomJS, WebDriver < Electon, Chromium

而且每个工具的侧重点也不同,建议按照需要去选择。

2. 优秀的端到端测试工具应该有哪些特点?

  • 安装简易:我希望它非常容易安装,最好可以一行命令就可以安装完毕
  • 依赖较少:我只想做个E2E测试,不想安装jdk, python之类的东西
  • 速度很快:运行测试用例的速度要快
  • 报错详细:详细的报错
  • API完备:鼠标键盘操作接口,DOM查询接口等
  • Debug方便:出错了可以很方便的调试,而不是去猜

3. 为什么要用Cypress?

Cypress基本上拥有了上面的特点之外,还有以下特点。

  • 时光穿梭 测试运行时,Cypress会自动截图,你可以轻易的查看每个时间的截图
  • Debug友好 不需要再去猜测为什么测试有失败了,Cypress提供Chrome DevTools, 所以Debug是非常方便的。
  • 实时刷新 Cypress检测测试用例改变后,会自动刷新
  • 自动等待 不需要在使用wait类似的方法等待某个DOM出现,Cypress会自动帮你做这些
  • Spies, stubs, and clocks Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.
  • 网络流量控制 在不涉及服务器的情况下轻松控制,存根和测试边缘案例。无论你喜欢,你都可以存储网络流量。
  • 一致的结果 我们的架构不使用Selenium或WebDriver。向快速,一致和可靠的无剥落测试问好。
  • 截图和视频 查看失败时自动截取的截图,或无条件运行时整个测试套件的视频。

4. 安装cypress

4.1. 使用npm方法安装

注意这个方法需要下载压缩过Electron, 所以可能会花费几分钟时间,请耐心等待。

npm i cypress -D

4.2. 直接下载Cypress客户端

你可以把Cypress想想成一个浏览器,可以单独把它下载下来,安装到电脑上,当做一个客户端软件来用。

打开之后就是这个样子,可以手动去打开项目,运行测试用例。

5. 初始化Cypress

Cypress初始化,会在项目根目录自动生成cypress文件夹,并且里面有些测试用例模板,可以很方便的学习。

初始化的方法有两种。

  1. 如果你下载的客户端,那么你用客户端打开项目时,它会检测项目目录下有没有Cypress目录,如果没有,就自动帮你生成模板。
  2. 如果你使用npm安装的Cypress,可以使用命令node_modules/.bin/cypress open去初始化

6. 编写测试用例

// hacker-news.js
describe('Hacker News登录测试', () => {
  it('登录页面', () => {
    cy.visit('https://news.ycombinator.com/login?goto=news')
    cy.get('input[name="acct"]').eq(0).type('test')
    cy.get('input[name="pw"]').eq(0).type('123456')
    cy.get('input[value="login"]').click()

    cy.contains('Bad login')
  })
})

7. 查看结果

打开Cypress客户端,选择要测试项目的根目录,点击hacker-news.js后,测试用例就会自动运行

运行结束后,左侧栏目鼠标移动上去,右侧栏都会显示出该步骤的截图,所以叫做时光穿梭功能。

从截图也可以看出来,Cypress的步骤描述很详细。


洞香春
前端知识记录
3.8k 声望
1.1k 粉丝
0 条评论
推荐阅读
vim 快捷键大全
后续更新:[链接] 全局 文件另存为 :saveas filename 关闭当前窗口 :close 光标 移动光标到页面顶部,中部,底部 H,M,L 移动到下个单词开头,结尾 w,e 移动到上个单词开头 b 移动光标 上下左右 k,j,h,l 移动到匹...

端端1阅读 3.5k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

3.8k 声望
1.1k 粉丝
宣传栏