【開源】自動化巡檢系統，基於 Testng + Playwright + SpringBoot + Vue + Ant-Design

為方便 “及時” 感知 H5 頁面服務是否存在穩定性問題，所以搭建一個基礎巡檢系統，用於檢測 H5 頁面是否正常，主動性感知頁面異常從而快速處理問題，減少對線上服務的影響範圍和時長。

基於Testng + Playwright + SpringBoot + Vue + Ant-Design，程式碼已開源在：https://github.com/TheCoolQATeam/online-inspection-tracker

出發點：遇到的問題、巡檢必要性

• 頁面白頁
• 頁面樣式飛掉
• 頁面無響應

遇到上述問題，有眾多原因：

• 人為操作不當：配置檔案錯誤、程式碼錯誤等
• 依賴服務異常
• 機房線路問題：阿里雲崩了、騰訊雲崩了等
• 機器原因：降配、磁碟不足等導致
• Nginx 負載問題
• waf 誤封禁
• 域名被運營商封禁
• cdn 原因
• 。。。

如圖，今年的熱搜：

• 內部的 119 反饋群中，某某城市頁面打不開、崩了之類的反饋
• boss：技術團隊在幹什麼，這麼嚴重的問題都沒發現

遇到上述情形，我想沒有任何一個 QA 會輕鬆吧，都是淚

故，基於這些痛點，搭建一套自動化巡檢系統的必要性不用多說吧

---

實現方案

整體使用Testng + Playwright + SpringBoot + Vue + Ant-Design搭建自動化巡檢系統，有以下優勢：

• 輕量：基於 SpringBoot 和 VUE，使用前後端開發模式，便於把測試用例、資料包告等進行落庫和前端展示，非常輕量，易於搭建
• 快速：基於 Playwright，使用 Playwright 請求頁面、擷取頁面元素、頁面截圖、效能分析、網路請求資源分析等，非常高效快速
• 穩定：基於 Testng，使用 Testng 的斷言、引數化、Listener 監聽、失敗重試、資料包告等功能，易於上手

程式碼已開源在：https://github.com/TheCoolQATeam/online-inspection-tracker

主要巡檢功能及核心原始碼

頁面主要元素檢測

請求頁面後，對頁面進行截圖，檢測頁面的 title 是否正常，正常則代表頁面 HTML 已進行渲染，否則代表頁面 HTML 未渲染，頁面無法正常訪問。

@Test(description = "遍歷頁面可用狀態", dataProvider = "HtmlData")
public void testHtmlServiceability(int id, String htmlinfo, String title, String url, String dingKey, String wechatKey, String feishuKey) throws FileNotFoundException, UnknownHostException {
    page.navigate(url);
    long currentTimeMillis = System.currentTimeMillis();
    // 獲取當前工作目錄
    String userDir = System.getProperty("user.dir");
    String titleCleanInvalid = StrUtil.replace(StrUtil.replace(FileNameUtil.cleanInvalid(title), " ", "_"), "\t", "");
    String imageName = titleCleanInvalid.concat("_").concat(Long.toString(currentTimeMillis));
    logger.info("基準值地址"+imageName);
    // 使用String的concat()方法拼接路徑
    String imagePath = userDir.concat(File.separator).concat("online-images").concat(File.separator).concat(imageName).concat(".png");
    page.waitForLoadState(LoadState.NETWORKIDLE); // 資源下載完畢
    page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get(imagePath)));
    Assert.assertEquals(page.title(), title);
}

測試用例利用 TestNg 引數化功能從資料庫中進行獲取和轉化為引數化型別，實現資料驅動；使用 mybatis 從資料庫取資料

@DataProvider
public Object[][] HtmlData() {
    List<OnlinesPatrol> onlinesPatrols = onlinesPatrolMapper.selectDate();
    if (onlinesPatrols == null) {
        return null;
    }
    Object[][] pageData = new Object[onlinesPatrols.size()][7];
    for (int i = 0; i < onlinesPatrols.size(); i++) {
        OnlinesPatrol onlinesPatrol = onlinesPatrols.get(i);
        pageData[i][0] = onlinesPatrol.getId();
        pageData[i][1] = onlinesPatrol.getHtmlinfo();
        pageData[i][2] = onlinesPatrol.getTitle();
        pageData[i][3] = onlinesPatrol.getUrl();
        pageData[i][4] = onlinesPatrol.getDingKey();
        pageData[i][5] = onlinesPatrol.getWechatKey();
        pageData[i][6] = onlinesPatrol.getFeishuKey();
    }
    return pageData;
}

視覺迴歸

首先，把第一次請求的頁面截圖作為基準值，

然後，後續的每次請求的頁面截圖與基準值進行對比，如果存在差異，則代表頁面有異常，異常則會傳送釘釘、企微、飛書等報警，需要及時處理。

圖片對比的閾值設定為 60%，即如果兩張圖片的相似度低於 60%，則認為兩張圖片有差異，代表頁面有異常。
實際使用中，經過大量測試，可以確定該閾值可以滿足需求。

OnlinesPatrol onlinesPatrol = onlinesPatrolMapper.selectByPrimaryKey(id);
if (onlinesPatrol != null) { // 若無基準值
    if (onlinesPatrol.getDatumAddress() == null) {
        onlinesPatrol.setDatumAddress(imageName);
        onlinesPatrol.setDatumCreatetime(new Date());
        onlinesPatrolMapper.updateByPrimaryKey(onlinesPatrol);
    } else {
        String pic1 = imagePath;  // 本次圖片
        logger.info("圖片1的地址"+pic1);
        // 基準值圖片
        String pic2 = userDir.concat(File.separator).concat("online-images").concat(File.separator).concat(onlinesPatrol.getDatumAddress()).concat(".png");//線上執行獲取圖片地址
        logger.info("圖片2的地址"+pic2);
        String result = null;
        try {
            result = imageComp.compareImage(pic2, pic1);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }
        int xiangsi = Integer.parseInt(result);
        if (xiangsi > 60) {
            Assert.assertTrue(true);
            logger.info("圖片對比相似率大於60:" + xiangsi);
        } else {
            String ip = InetAddress.getLocalHost().getHostAddress();
            logger.info("伺服器IP地址：" + ip);
            String picUrl = "http://" + ip + ":9091/patrol/onlines/images?imageName=" + imageName;
            DingUtil.sendMsgPic(url, id, picUrl, title, dingKey);
            WechatUtil.sendMsgPic(url, id, picUrl, title, wechatKey);
            FeishuUtil.sendMsgPic(url, id, picUrl, title, feishuKey);
            logger.info("圖片對比相似率小於60:" + xiangsi);
        }
    }

效能分析

效能分析有兩塊，一塊是計算測試用例的執行時間，另一塊是透過 playwright 執行 js 指令碼window.performance.timing計算頁面載入時間

// 獲取效能資料
Object performanceResult = page.evaluate("() => {\n" +
        "const timing = window.performance.timing; \n" +
        "return  JSON.stringify(timing.toJSON()); \n" +
        "}");

網路請求資源分析

playwright 的onRequest方法可以監聽到所有的請求，透過判斷請求的 url 等資訊是否是正常請求，如果不是正常請求，則傳送報警。

noLoginPage.onRequest((request) -> {
    try {
        getTestUrl(idForEnv, request.url());
    } catch (Exception e) {
        e.printStackTrace();
    }
});

定時巡檢

定時功能有很多方案，本次開源專案使用ScheduledExecutorService，較為輕量

設定定時執行間隔為 5 分鐘進行巡檢一次，每天會巡檢 288 次。

開源

專案開源地址：https://github.com/TheCoolQATeam/online-inspection-tracker

最後，歡迎一起迭代維護，記得 star~