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")
        }
    })

好困，先说这么多。