UI 自動化測試整合 Charles breakpoint & mock 等功能

Scripts_Web_UI_Autotest

簡介: 一款結合 breakpoint && mock 的 Web-UI 自動化測試工具，讓你的前端自動化徹底擺脫後端和抓包工具的束縛，直接起飛。

專案地址: shaonianyr/Scriptes_Web_UI_Autotest

技術棧: node.js && puppeteer

備註: demo 裡面通過 goto.url 的方式來觸發攔截，實際上可以通過模擬自動點點點的方式來觸發攔截，支援監聽正常 Response 做校驗斷言，也支援攔截超時，中斷請求，mock資料等各種異常狀態的模擬，已封裝好函式可快捷呼叫實現。

Usage

# 部署專案
git clone https://github.com/ShaoNianyr/Scripts_Web_UI_Autotest
cd Scripts_Web_UI_Autotest

# 跳過 puppeteer 的 chronium 安裝
npm i --ignore-scripts

# 手動訪問如下地址版本下載 puppeteer 的 chronium，解壓至專案根目錄下
https://storage.googleapis.com/chromium-browser-snapshots/Mac/756035/chrome-mac.zip

# 啟動 demo 後端
cd server
node app.js

# 啟動 demo 攔截測試
cd ..
node index.js

Methods

// 正常監聽 request 和 reponse
try {
        listen_url = 'http://localhost:5000/';
        var page = await browser.newPage();
        await page.setRequestInterception(true);
        scripts_listen(page, listen_url);
        await page.goto('http://localhost:5000/');
        await page.waitFor(1000);
        await page.close();
    } catch (error) {
        await page.close();
    }

// 模擬 request timout
try {
        timeout_url = 'http://localhost:5000/';
        var page = await browser.newPage();
        await page.setRequestInterception(true);
        scripts_abort(page, timeout_url, "timedout");
        await page.goto('http://localhost:5000/');
    } catch (error) {
        await page.close();
    }

// mock reponse
try {
        mock_url = 'http://localhost:5000/';
        var page = await browser.newPage();
        await page.setRequestInterception(true);
        scripts_mock(page, mock_url, 500, 'text/plain', 'Mock body what you want!');
        await page.goto('http://localhost:5000/');
        await page.waitFor(1000);
        await page.close();
    } catch (error) {
        await page.close();
    }

View

Contributing

Puppeteer