title: Web测试
category: Web
tag:
date: 2019-07-19
缘起
之前组里出的专题，有个bug没测出来，上线之后出问题了。除了督导和严格code review ，还应该考虑从工具层面消除隐患。
慢慢的，我们摸石头过河摸着了门道——前端测试。
因为是自发性地探索，前端测试需要 单元测试 Unit Test 和 UI测试 UI Test，前者侧重流程和逻辑，比如登录和购买的流程梳理，后者侧重静态页的实现，css写的对不对。
先说摸索到的成果：
单元测试。使用 Puppeteer 控制浏览器控制浏览器点点点，键盘操作，以及拦截数据。
UI测试。使用 Puppeteer 滚动页面消除懒加载图片之后截全屏，和psd进行相似度匹配，太低的不给过。
目前想到这个，先说已经会的。
绕不开的操作浏览器
提及Python，在ai智能火起来之前，拿Python做自动化测试是很热门的一个话题，但Google出了node版本的 Puppeteer之后，前端也能用node玩爬虫，搞测试了，简单易懂。
翻阅别人的经验总结，会提到其他工具，我以后会写，但这次还是Puppeteer。关于Puppeteer的进一步介绍，我之前写过相关经验总结，你可以进我首页找找。
拿Puppeteer操作浏览器
Puppeteer对前端友好，直接使用js搞定一切，请看下面代码块：
const puppeteer = require("puppeteer-core")
// 以下两行用来设置手机屏幕宽度
const devices = require("puppeteer-core/DeviceDescriptors")
const iPhone6 = devices["iPhone 8"]
// xxx代码省略
;(async () => {
// 打开浏览器，新开标签
const browser = await puppeteer.launch(launchOptions)
const page = await browser.newPage()
// 切换手机和pc屏幕大小
if (isPhone) {
await page.emulate(iPhone6)
} else {
await page.setViewport({ width: 1920, height: 946 })
}
// 拦截所有请求
await page.setRequestInterception(true)
page.on("request", (interceptedRequest) => {
// 如果是表单提交就拦截，其他请求都放行
if (
interceptedRequest
.url()
.startsWith("http://xxx.api")
) {
interceptedRequest.abort()
infoReport(interceptedRequest)
} else {
interceptedRequest.continue()
}
})
// 打开页面，确保关键dom渲染完成
await page.goto(url)
await page.waitForSelector(inputPos[0])
// 复用click和 type 模拟用户输入
await page.click(inputPos[0])
await page.keyboard.type("17600000000")
// 点击提交
await page.click("#js__submit")
// await page.setOfflineMode(enabled);
// await page.screenshot({ path: "baidu.png" });
browser.close()
})()
模拟手机屏幕访问，拦截请求，鼠标点点点，键盘敲敲敲，就跟写着玩似的。
我们拦截到了数据，接下来进行判断就好了，以为还不会断言啥的，还是用 === 去匹配的
干掉懒加载，截全屏
截屏是小事，顺手用Puppeteer写：
await page.goto(url, {
waitUntil: "networkidle2"
})
console.log("准备滚动")
await autoScroll(page)
await page.screenshot({ path: "./code.png", fullPage: true })
console.log("截图成功")
像素眼，相似度
我们搞到 效果图 psd.png 和 全屏截图 code.png 之后，就可以进行对比了
这里使用的是resemblejs：
const resemble = require("resemblejs")
var diff = resemble("./code.png")
.compareTo("./psd.png")
.ignoreColors()
.onComplete(function(data) {
// console.log(data)
console.log("两者差异百分比" + data.misMatchPercentage)
console.log(
"尺寸差异\n 宽度：" +
data.dimensionDifference.width +
"\n 高度：" +
data.dimensionDifference.height
)
console.log("不同的范围")
console.log(data.diffBounds)
if (data.misMatchPercentage > 20) {
console.log("不匹配超过20%")
} else {
console.log("pass")
}
})
好困，先说这么多。
