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

作者: 阿翔

前言

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

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

  1. 访问目标页面，对页面进行截图；

  2. 设置 UA（模拟不同渠道：微信、手Q、其它浏览器等）；

  3. 模拟用户点击、滑动页面操作；

  4. 网络拦截、模拟异常情况（接口响应码 500、接口返回数据异常）；

  5. 操作缓存数据（模拟有无缓存的场景等）。

技术选型

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

官方描述的功能：

  • 生成页面 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"
},
"homePageApi": {
"id": 1,
"module": "home_page_api",
"moduleDesc": "首页主接口",
"api": "https://wqcoss.jd.com/xxx",
"operation": "模拟响应码 500",
"expectRules": [
"1. 显示异常信息、刷新按钮",
"2. 点击刷新按钮，显示异常信息",
"3. 恢复网络，点击刷新按钮，显示正常数据"
],
"screenshot": [
{
"name": "normal",
"desc": "正常场景"
},
{
"name": "500_cache",
"desc": "有缓存-返回500"
},
{
"name": "500_no_cache",
"desc": "无缓存-返回500"
},
{
"name": "500_no_cache_reload",
"desc": "无缓存-返回500-点击刷新按钮"
},
{
"name": "500_no_cache_recover",
"desc": "无缓存-返回500-恢复网络"
}
]
},
…
}

编写测试脚本

我们以京喜首页主接口的测试用例为例子，通过模接口返回 500 响应码的异常场景，验证主接口的异常处理机制是否完善、用户体验是否友好。

预期效果：

  • 有缓存情况下，显示缓存数据

  • 无缓存情况下显示异常信息、刷新按钮

  • 点击刷新按钮，显示异常信息

  • 恢复网络，点击刷新按钮，显示正常数据

测试流程：

方案流程图

场景实现：

根据测试流程以及配置的测试用例信息，编写测试脚本，实现测试用例场景:

  1. 访问页面

await page.goto(url)

  1. 生成截图

 await page.screenshot({
path: './screenshot/index_home_page_500.png'
})

  1. 拦截接口请求

async test () => {
... // 创建 Page 实例,访问首页
await page.setRequestInterception(true) // 设置拦截请求
page.on("request", interceptionEvent)   // 监听请求事件，当请求发起后页面会触发这个事件
... // 刷新页面，触发请求拦截，生成测试场景截图
}

若测试用例需要拦截不同的请求，或是模拟多种场景，则需要设置多个请求监听事件。且一个事件执行结束后，必须要移除事件监听，才能继续下一个事件监听。

添加事件监听：page.on("request", eventFunction)

移除事件监听：page.off("request", eventFunction)

    // 设置拦截请求
await page.setRequestInterception(true)
const iconInterception1 = requestInterception(api, "body")
// 添加事件 1 监听
page.on("request", iconInterception1)
await page.goto(url)
await page.screenshot({
path: './screenshot/1.png'
})
// 移除事件 1 监听
page.off("request", iconInterception1)
const iconInterception2 = requestInterception(api, "body", )
// 添加事件 2 监听
page.on("request", iconInterception2)
await page.goto(url)
await page.screenshot({
path: './screenshot/2.png'
})
// 移除事件 2 监听
page.off("request", iconInterception2)

  1. 模拟异常数据场景，生成 mock 数据。

function requestInterception (api, setProps, setValue) {
let mockData
switch (setProps) {
case "status":      // 修改返回状态码
mockData = {
status: setValue
}
break
case "contentType": // 修改返回内容类型
mockData = {
contentType: setValue
}
break
case "body":        // 修改返回数据
mockData = {
contentType: getMockResponse(setValue)
}
break
default:
break
}
return async req => {
// 如果是需要拦截的 API，则通过 req.respond(mockData) 修改返回数据，否则 continue 继续请求别的
if (req.url().includes(api)) { // 拦截 API
req.respond(mockData) // 修改返回数据
return false  // 处理完了某个请求必须退出，不再执行 continue
}
req.continue()
}

模拟接口返回 500：

  const interception500 = requestInterception(api, 'status', 500)
page.on("request", interception500) // 当请求发起后页面会触发这个事件

模拟异常数据：

 const iconInterception = requestInterception(api, "body", {
"data": {
"modules": [{
"tpl": "3000",
"content": []
}]
}
})
page.on("request", iconInterception)

生成 mock 数据有两种实现方案，可依据实际情况而定：

  • [ ] 直接通过修改接口真实返回的数据生成 mock 数据，需要先获取接口实时返回数据

  • [x] 本地存储一份完整的接口数据，通过修改本地存储数据的方式生成 mock 数据（本文所述案例均基于此方案实现）

若选择第一种方案，则需先拦截接口请求，通过 req.response() 获取接口实时返回数据，根据测试场景修改实时返回数据作为 mock 数据。

由于京喜 H5 页面接口返回是 JSONP 格式的数据，所以在模拟返回数据的时候，必须先截取 JSONP 的 callback 信息，与模拟数据拼接后再返回；

 function requestInterception (api, setProps, setValue) {
let mockData
switch (setProps) {
case "status":
mockData = {
status: setValue
}
break
case "contentType":
mockData = {
contentType: setValue
}
break
default:
break
}
return async req => {
if (req.url().includes(api)) {
if (setProps === "body") {
const callback = getUrlParam("callback", req.url())  // 获取 callback 信息
const localData = getLocalMockResponse(api)  // 匹配 API ，获取本地存储数据
mockData = {
body: getResponseMockLocalData(localData, setValue, callback, api) // 生成 mock 数据
}
}
req.respond(mockData)  // 设置返回数据
return false
}
req.continue()
}
}

  1. 清除缓存

page.evaluate(() => {
try {
localStorage.clear()
sessionStorage.clear()
} catch (e) {
console.log(e)
}
})

  1. 点击刷新按钮

await page.waitFor(".page-error__refresh-btn") // 可以传 CSS 选择器，也可以传时间（单位毫秒）
await page.click(".page-error__refresh-btn")

在模拟点击刷新按钮之前，需等待按钮渲染完成，再触发按钮点击。（防止刷新页面后，DOM 还未渲染完成的情况下，因找不到 DOM 导致报错）

  1. 取消拦截，恢复网络

await page.setRequestInterception(false)

运行脚本及调试

由于第一阶段的测试工具尚未平台化，自动化测试流程先通过在终端输入命令行，运行脚本的方式启动。

在项目的 package.json 文件中，使用 scripts 字段定义脚本命令：

 "scripts": {
"test:real": "node ./pages/index/index.js",
"test:mock": "node ./pages/index-mock/index.js"
},

运行：

在终端切入到项目根目录路径，输入以下命令行，就可以启动测试工具，运行测试脚本。

- npm run test:real                     // 接口真实返回的数据测试
- npm run test:mock                     // 使用本地 mock 数据测试

调试：

开启调试模式之前，需要先了解 Headless Chrome。

Headless Chrome ，无头模式，浏览器的无界面形态，可以在不打开浏览器的前提下，在命令行中运行测试脚本，能够完全像真实浏览器一样完成用户所有操作，不用担心运行测试脚本时浏览器受到外界的干扰，也不需要借助任何显示设备，使自动化测试更稳定。

Puppeteer 默认以无头模式运行。

那么要开启调试模式，就必须取消无头模式，在打开浏览器的场景下，进行自动化测试。因此，在命令行脚本中增加了“取消无头模式”和“打开开发者工具”的参数，测试脚本通过获取到的参数，决定是否开启调试模式。

const headless = process.argv[2] !== 'head'  // 获取是否开启无头模式参数
const devtools = process.argv[3] === 'dev'   // 获取是否打开开发者工具参数
const browser = await puppeteer.launch({
executablePath: browserPath,
headless,
devtools
})

在终端切入到项目根目录路径，输入以下命令行，就可以开启调试模式，运行测试脚本。

- npm run test:mock head            // 打开 Chromium 窗口
- npm run test:mock head dev        // 打开 Chromium 窗口 和 开发者工具窗口

  • head 参数：取消无头模式，打开 Chromium 窗口运行脚本；

  • head dev 参数：在打开 Chromium 窗口运行脚本，并打开 Devtools 窗口，开启调试模式。

测试结果

人工比对截图结果：

测试结果图

运行脚本示例：

方案流程图

更多测试场景实现

1. 截取从页面顶部到指定 DOM 之间的区域（内容可能超出一屏的长图）

Puppeteer 提供了四种截图方式：

（1）截取一屏内容（默认普通截屏）；
（2）截取指定 DOM；
（3）截取全屏；
（4）指定裁剪区域，可设置 x、y、width、height。 x, y 是相对页面左上角。但只能截取一屏的内容，超出一屏不展示。

基于第四种方法进行改造：

  1. 通过原生 JavaScript 的 getBoundingClientRect() 方法获取到指定 DOM 的 x，y 坐标值；

  2. 通过 page.setViewport() 重置视口的高度；

  3. 调用截图 API 生成截图。

async function screenshotToElement (page, selector, path) {
try {
await page.waitForSelector(selector)
let clip = await page.evaluate(selector => {
const element = document.querySelector(selector)
let { x, y, width, height } = element.getBoundingClientRect()
return {
x: 0,
y: 0,
width,
height: M(y),
}
}, selector)
await page.setViewport(clip)
await page.screenshot({
path: path,
clip: clip
})
} catch (e) {
console.log(e)
}
}

  • height: y ：截到指定 DOM 的顶部，不包含该 DOM；

  • height: y + height ： 截到指定 DOM 的底部，包含该 DOM；

  • 原生 Javascript 的 getBoundingClientRect() 方法获取 DOM 元素定位和宽高值可能是小数，而 Puppeteer 的 setViewport() 设置视口方法不支持小数，所以需要对获取到的 DOM 元素定位信息取整。

2. 模拟不同渠道，如：手Q场景：

// 设置 UA
await page.setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 QQ/6.7.1.416 V1_IPH_SQ_6.7.1_1_APP_A Pixel/750 Core/UIWebView NetType/4G QBWebViewType/1")

3. 滚动页面

 await page.evaluate((top) => {
window.scrollTo(0, top)
}, top)

page.evaluate(pageFunction, …args)：在当前页面实例上下文中执行 JavaScript 代码

4. 监听页面崩溃事件

// 当页面崩溃时触发
page.on('error', (e) => {
console.log(e)
})

结语

第一阶段的 H5 自动化之路告一段落，容灾演习已实现了半自动化，可通过在终端运行测试脚本，模拟异常场景自动生成截图，再配合人工比对截图操作，判断演习结果是否符合预期。目前已投入到每个月的容灾演习中使用。

随着京喜业务的迭代，页面也将更新改版，因此测用例也需要持续维护和更新。后续将持续优化自动化工具，共享测试脚本、在生成截图的基础上自动比对测试结果是否符合预期、数据入库、将测试结果转化成文档，自动发送邮件等等。基于容灾演习的自动化测试，还可扩展广告位的监测，数据上报监自动化测试……

对于京喜首页自动化测试之路，远没有结束，还有很多可以优化和扩展的地方，接下来分阶段持续优化自动化测试工具，敬请期待！

以上是 京东京喜前端自动化测试之路 的全部内容， 来源链接： utcz.com/a/18679.html

回到顶部