京东（京喜）前端自动化测试之路

前言

京喜（原京东拼购）项目，作为京东战略级业务，拥有千万级别的流量入口。为了保障线上业务的稳定运行，每月例行开展前端容灾演习，主要包含小程序及 H5 版本，要求各页面各模块在异常情况下进行适当的降级处理，不能出现空窗、样式错乱、不合理的错误提示等体验问题。 原来的容灾演习过程：小程序（通信方式改成 Https ）和 H5 通过 Whistle 对接口返回进行修改来模拟异常情况，验证各页面各模块的降级处理符合预期。容灾演习是一项长期持续的工作，且涉及页面功能及场景多，人工的切换场景模拟异常导致演习效率很低，因此想通过开发自动化测试工具来提升研发效率，让容灾演习工作随时可以轻松开展。京喜 H5 和小程序场景差异比较大，因此自动化测试之路分 H5 和小程序两部分进行，以 H5 作为一个开篇。

综上所述，我们希望京喜 H5 自动化测试工具可以提供以下功能：

访问目标页面，对页面进行截图；
设置 UA（模拟不同渠道：微信、手Q、其它浏览器等）；
模拟用户点击、滑动页面操作；
网络拦截、模拟异常情况（接口响应码 500、接口返回数据异常）；
操作缓存数据（模拟有无缓存的场景等）。

技术选型

提到 Web 的自动化测试，很多人熟悉的是 Selenium 2.0（Selenium WebDriver）， 支持多平台、多语言、多款浏览器（通过各种浏览器的驱动来驱动浏览器），提供了功能丰富的API接口。而随着前端技术的发展，Selenium 2.0 逐渐呈现出环境安装复杂、API 调用不友好、性能不高等缺点。新一代的自动化测试工具 —— Puppeteer ，相较于 Selenium WebDriver 环境安装更简单、性能更好、效率更高、在浏览器执行 Javascript 的 API 更简单，它还提供了网络拦截等功能。

Puppeteer 是一个 Node 库，它提供了一套高阶 API ，通过 Devtools 协议控制 Chromium 或 Chrome 浏览器。
Puppeteer 默认以 Headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

官方描述的功能：

生成页面 PDF；
抓取 SPA（单页应用）并生成预渲染内容（即“ SSR ”，服务器端渲染）；
自动提交表单，进行 UI 测试，键盘输入等；
创建一个时时更新的自动化测试环境，使用 JavaScript 和最新的浏览器功能直接在最新版本的 Chrome 中执行测试；
捕获网站的 Timeline Trace，用来帮助分析性能问题；
测试浏览器扩展。
Puppeteer 提供了一种启动 Chromium 实例的方法。 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象，在通过 Browser 创建一个 Page 实例，导航到一个 Url ，然后保存截图。一个 Browser 实例可以有多个 Page 实例。 下面就是使用 Puppeteer 进行自动化的一个典型示例：

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
   
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({
   path: 'screenshot.png'});
  await browser.close();
});

综上所述，我们选择基于 Puppeteer 来开发京喜首页容灾演习的自动化测试工具，通过 Puppeteer 提供的一系列 API ，实现访问目标页面、模拟异常场景、生成截图的过程自动化。最后再通过人工比对截图，判断页面降级处理是否符合预期、用户体验是否友好。

实现方案

我们将容灾演习过程分为自动化流程和人工操作两部分。

自动化流程：

1. 模拟用户访问页面操作；
2. 拦截网络请求，修改接口返回数据，模拟异常场景（接口返回 500、异常数据等）；
3. 生成截图。

人工操作：

自动化脚本执行完毕后，人工比对各个场景的截图，判断是否符合预期。

方案流程图：

开发实录

安装 Puppeteer ，你可能会遇到的那些事

通过 npm init 初始化项目后， 就可以安装 Puppeteer 依赖了：

npm i puppeteer ：在安装时自动下载最新版本 Chromium。

或者

npm i puppeteer-core ：在安装时不会自动下载 Chromium。（不能生成截图）

另外，在安装过程中可能会因为下载 Chromium 导致报错，官网建议是先通过 npm i --save puppeteer --ignore-scripts 阻止下载 Chromium， 然后再手动下载 Chromium 。

手动下载后，需要配置指定路径，修改 index.js 文件

const puppeteer = require('puppeteer');
(async () => {
   
      const browser = await puppeteer.launch({
   
        // 运行 Chromium 或 Chrome 可执行文件的路径（相对路径）
        executablePath: './chrome-mac/Chromium.app/Contents/MacOS/Chromium', 
        headless: false
      });
      const page = await browser.newPage();
      await page.goto('https://example.com');
      await page.screenshot({
   path: 'screenshot.png'});
      browser.close();

快速创建测试用例
为了提高测试脚本的可维护性、扩展性，我们将测试用例的信息都配置到 JSON 文件中，这样编写测试脚本的时候，我们只需关注测试流程的实现。

测试用例 JSON 数据配置包括公用数据（global）和私有数据：

公用数据（global）：各测试用例都需要用到的数据，如：模拟访问的目标页面地址、名字、描述、设备类型等。

私有数据： 各测试用例特定的数据，如测试模块信息、API 地址、测试场景、预期结果、截图名字等数据。

{
   
  "global": {
   
    "url": "https://wqs.jd.com/xxx/index.shtml",
    "pageName": "index",
    "pageDesc": "首页",
    "device": "iPhone 7"