自动化测试-e2e测试框架选择

前言

记得前两年，nightmare仍是很火的。因此，我在本身的前端脚手架也集成了它。不过，过去了那么久，不知道如今的形式如何。

由于最近发现面向的跨境项目业务愈来愈复杂，每一个组员都负责着多个项目，一下作作A，一下作作B，而后有档期就会被安排作作跨境。所以，由于注意力不能集中，再加上对业务的不了解，就时不时会写一些影响到之前逻辑的bug。

这不得不让咱们去规划作自动化回归测试的事情，虽然网站业务繁琐，但至少得保证每次组员的修改，不会影响主流程。

罗列

首先，我先罗列出我调研的e2e框架或库，让你们有个大致的认识。

1. PhantomJS 英文解释： PhantomJS is a headless WebKit scriptable with JavaScript.
   中文解释： 一个基于 webkit 内核的无头浏览器，没有 UI 界面。
   补充： 它就是一个浏览器，只是内部的点击、翻页等人为相关操做须要程序设计实现。

---

2. NightmareJS 英文解释： A high-level browser automation library. Under the covers it uses Electron, which is similar to PhantomJS but roughly twice as fast and more modern.
   中文解释： 一个轻量级浏览器自动化测试库。基于Electron，和PhantomJS相似，可是快了大约2倍且更现代。
   补充： 它的接口比PhantomJS友好不少，大大提升了开发效率：
   并且，它还提供了chrome插件-daydream，它可以录制你在页面上的操做，而且生成对应的代码。这也是我为何当初选择它的重要的缘由之一。
   可是，如今NightmareJS好像难产了，核心代码的更新是在一年多前，并且daydream的插件安装页面也404中。果断抛弃。

---

3. Puppeteer 英文解释： Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
   中文解释： Puppeteer是一个提供创建在DevTools协议（devtools-protocol），控制Chrome或Chromium的高阶API node库。Puppeteer默认无界面运行，不过能够经过配置变为有界面运行Chrome或Chromium。
   补充： 它由Chrome DevTools维护，并且和NightmareJS同样，也提供了自动生成代码的Chrome插件-puppeteer-recorder。因此它彻底能够替代NightmareJS，或者说就是NightmareJS凉了的缘由吧。
   Puppeteer还分puppeteer和puppeteer-core，区别可参阅 puppeteer-vs-puppeteer-core。
   总之，若是对各个浏览器兼容性测试没有要求的话，我的认为是最好的e2e自动化测试库。

---

4. Selenium-webdriver 英文解释： Selenium is a browser automation library. Most often used for testing web-applications, Selenium may be used for any task that requires automating interaction with the browser.
   中文解释： Selenium是一个浏览器自动化测试库。大都用来测试web应用，Selenium能够用来作任何须要和浏览器交互的任务。
   补充： 底层基于webdriver实现，因此，能够自动化测试各类浏览器，只要对应的浏览器实现了webdriver功能（现代浏览器，IE是凉凉的）均可以用它来自动调起和测试。
   启动浏览器的lancher/driver已经继承到selenium-webdriver中了：

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const firefox = require('selenium-webdriver/firefox');
 
let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .setChromeOptions(/* ... */)
    .setFirefoxOptions(/* ... */)
    .build();
复制代码

---

5. Nightwatch 英文解释： End-to-end testing framework written in Node.js and using the Webdriver API.
   中文解释： Node.js调用Webdriver API实现的端到端(e2e)测试框架。
   补充： 咱们注意到，它是一个framework而不是一个library。以前介绍到的库的话，每每要结合其它库，好比mocha，chai等，而后经过一番折腾结合，才能实现完整的测试功能。
   framework虽然也不是说不须要装任何额外的库或插件，可是，基础的东西，它都已经集成到框架中了，它能大大减小你的折腾时间。
   同Selenium，它也是基于webdriver实现，因此，能够也自动化测试各类浏览器。
   启动各个浏览器只需装对应浏览器的laucher/driver就好：

Geckodriver (Firefox):
Geckodriver is the WebDriver service used to drive the Mozilla Firefox Browser.
$ npm install geckodriver --save-dev
Chromedriver:
Chromedriver is the WebDriver service used to drive the Google Chrome Browser.
$ npm install chromedriver --save-dev
复制代码

---

6. Protractor 英文解释： E2E test framework for Angular apps.
   中文解释： 为Angular应用而生的e2e测试框架。

分类

说到对比，就得先分类，先搞清服务的维度。

如图，我将这些测试库或框架，以底层实现的方式分为两类：

1. 非Webdriver类；
2. Webdriver类；

非Webdriver能对应测试浏览器单一；

而Webdriver类，以前也说过，不局限某个特定浏览器，只要想测的浏览器有Webdriver能力就均可以跑自动化。

对比

Protractor太针对Angular了，因此就不加入对比：

名称	接口易用	框架	跨浏览器	自动生成代码插件	社区活跃
PhantomJS					yes
NightmareJS	yes			yes
Puppeteer	yes			yes	yes
Selenium	yes		yes		yes
Nightwatch	yes	yes	yes		yes

因此，比对下来的结论就是：

• 若是须要跨浏览器，我更倾向于Nightwatch；
• 若是不须要，Puppeteer是首选；

马路边边

在调研的过程当中，还发现了一款挺有意思的e2e测试框架——cypress。

它的优势：

1. 酷

   启动它后，它会有一个可视化界面提供给用户进行操做，并且，操做的过程和结果都体如今了web页面上，整个测试过程高端大气上档次。

2. 方便 由于是框架，因此基础的东西都已经集成处理好了：

它的缺点：

1. 不跨浏览器 当我看到它文档的Unsupported-Browsers，我就以为不香了；

2. 没有自动生成代码的插件 以前咱们也看到了，非Webdriver虽然不能跨浏览器，可是毕竟是提供自动生成代码的插件，仍是很方便的。因此，我就以为它也不酷了，啥花里胡哨的东西。

总结

重要的话说两遍：

• 若是须要跨浏览器，我更倾向于Nightwatch；
• 若是不须要，Puppeteer是首选；

参考资料

Chromium

Comparison of browser engines

electronjs.org

原文

来自 CodeLittlePrince/blog/issues/23