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

LancerComet 发布于2019-08-22 17:19 / 1706人阅读

摘要：阅读原文目前测试工具有哪些项目不需要不需要端到端测试一般都需要一个容器，来运行前端应用。向快速，一致和可靠的无剥落测试问好。

阅读原文

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文件夹，并且里面有些测试用例模板，可以很方便的学习。

初始化的方法有两种。

如果你下载的客户端，那么你用客户端打开项目时，它会检测项目目录下有没有Cypress目录，如果没有，就自动帮你生成模板。

如果你使用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的步骤描述很详细。

云服务器 GPU云服务器端到端测试端到端 webrtc端到端通信 webrtc端到端延时

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95054.html

端到端测试神器Cypress!进阶

摘要：前言官方文档目前只支持英文，好处是官方入门视频很多，对于英文水平不好的也很容易入手优缺点优点只要你学好语法上应该不是很大问题获取类似，对前端同学来说是好处缺点内置的工具集成了谷歌内核，决定你只能是在谷歌浏览器上测试，但随着新版的内核采用内核前言官方文档：https://docs.cypress.io 目前只支持英文，好处是官方入门视频很多，对于英文水平不好的也很容易入手；优缺点 ...

oysun 2019-08-26 13:55 评论0 收藏0
端到端测试神器 cypress 浅入浅出

摘要：我之前写过关于的文章，，最近在工作中用到比较多了，顿时觉得确实是比较优秀的一个。我之前写过关于cypress的文章，https://segmentfault.com/a/11...，最近在工作中用到cypress比较多了，顿时觉得cypress确实是比较优秀的一个。 1. 软件安装. 2. 安装cypress 安装cypress客户端：http://download.cypress...

CarlBenjamin 2019-08-22 18:45 评论0 收藏0
FE.TEST-前端测试初探

摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做...

Travis 2019-08-23 12:55 评论0 收藏0
FE.TEST-前端测试初探

摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做...

张率功 2019-08-29 17:11 评论0 收藏0