端到端测试哪家强？不容错过的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的步骤描述很详细。