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

强转潮涌
• 阅读 8667

阅读原文

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想想成一个浏览器,可以单独把它下载下来,安装到电脑上,当做一个客户端软件来用。

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

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

5. 初始化Cypress

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

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

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(