浅谈前端自动化测试 - e2e 篇

前言

在上一篇 浅谈前端自动化测试 - 介绍篇 里面我们提到了两类前端测试方法，本篇主要针对 e2e 测试法 来进行展开。 不明白什么是 e2e 测试的 请自行查看上一篇内容

正文

e2e 测试有什么优势

通常情况下，单元测试确实能够帮助我们发现大部分的问题，但是在复杂的前端交互或者可视化项目测试中，单纯的单元测试并不能满足真实测试需求，这时候 e2e 测试的优势就显得尤其显著。

优势主要包括：

1. 模拟用户行为

2. 模拟真实运行环境

3. 截屏比对

4. 操控运行时环境

怎么实现 e2e 测试

对于怎么去实现 e2e - 肯定得搭建平台 - 至于怎么搭建平台 - 肯定是采用合适的框架（如果你可以手撸 chrome ，可以忽略这段话）， 前端测试框架参差不齐种类繁多，这里主要选取 github star 较靠前的几个 做了选型对比，主要包括 puppeteer 、 phantomJs 、 selenium 等。

1. puppeteer [star 66k]
   活跃度高，社区资料丰富，对于前端易用性很强

2. phantomJs [star 28k]
   已经停止维护，并且环境安装复杂

3. selenium [star 19k]
   元老框架 虽然依然维护 但是相比 puppeteer 上手速度较慢 文档易读性较差

最终选择了身为高富帅的 puppeteer。

首先来介绍一下， 它是 Chrome 开发团队在 2017 年发布的一个 Node 包，中文名字叫 [傀儡师]， 它提供了高级 API 来通过 DevTools 协议控制 Chrome。

puppeteer 架构看起来和 Chromium 架构很像。

如果想深入对其研究 可以转到 github

了解之后，下面简单介绍下在 e2e 测试中怎么用

puppeteer 怎么用

首先 ，puppeteer 模块提供了启动 Chromium 实例的方法

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('http://localhost:8888/example.html');
  // 其他操作...
  
  await browser.close();
});

并且 page 实例对象拥有大量可以直接用于测试的 API

// 事件监听，监听对应事件来可以做一些性能的测试或者定制化测试方案
page.on('load')  //当页面的 load 事件被触发时触发。
page.on('request') //当页面发送一个请求时触发。参数request 对象是只读的。 并且可以需要拦截并且改变请求
page.on('response') // 当页面的某个请求接收到对应的 response 时触发。

// dom 方法 
page.$(selector) //选择器 此方法在页面内执行 document.querySelector。
page.$$(selector) //选择器 此方法在页面内执行 document.querySelectorAll
page.$eval(selector, pageFunction[, ...args]) // 此方法在页面内执行 document.querySelector，然后把匹配到的元素作为第一个参数传给 pageFunction
// 例如：const searchValue = await page.$eval('#search', el => el.value);
page.addScriptTag(options) // 注入一个指定src(url)或者代码(content)的 script 标签到当前页面。
page.addStyleTag(options) // 添加一个指定link(url)的 <link rel="stylesheet"> 标签。

// 模拟用户行为相关方法
page.click(selector[, options]) // 
page.focus(selector) // 
page.hover(selector) // 
// 模拟键盘
await page.keyboard.down('Shift');
await page.keyboard.press('KeyA');
await page.keyboard.up('Shift');
await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');
// 模拟鼠标
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.up();

// 高级方法
page.evaluate(pageFunction[, ...args]) //在页面实例上下文中执行方法
page.pdf([options]) // 生成 pdf
page.screenshot([options]) // 生成截屏

这些简单易用的API 大大提高了 编写定制化自动测试平台的搭建效率。下面举几个例子