前端UI自動化測試（TypeScript+Jest+Puppeteer）

時間 2019-11-08

標籤前端自動化測試 typescript+jest+puppeteer typescript jest puppeteer 欄目測試自動化简体版

原文原文鏈接

最近幾個月來，筆者一直在探索前端UI自動化測試的場景和方案。最初的時候，面對衆多的技術選型，顯得有些茫然，而團隊此前也沒有太多關於這方面的經驗，只能一步一步摸索總結，固然期間也踩過很多坑，最終造成了一套相對穩定的測試方案，將來還將繼續擴展和完善。前端

項目地址： jest-puppeteer-testing

在這篇文章中，筆者想和你們分享一下本身對於UI自動化測試的思考和經驗。git

爲何要進行UI自動化測試

業務的更新迭代頻繁，傳統測試大部分都仍是手工、肉眼的模式來進行，沒法知足產品敏捷開發、快速迭代的需求。而UI自動化能讓全功能的迴歸變得簡單，釋放純手工測試的人力資源，而且迴歸測試可以覆蓋到全部的邏輯場景，這對測試的效率，以及整個開發流程的效率都是很大的提高，而且可以規避不少人的主觀和客觀因素致使的漏測或者疏忽。github

其餘測試方式的侷限性：api

單元測試（Unit Testing）服務器

事實上，單元測試確實可以幫助咱們發現大部分的問題，可是在複雜的前端交互中，單純的單元測試並不能真實地反映用戶操做的路徑，而單元測試通常的場景是測試一系列的功能集合。網絡

快照測試（Snapshot Testing）框架

DOM結構並不能徹底反映頁面的視覺效果，DOM結構不變並不徹底等於樣式不變。此外，大多數工具都是React專用，非React應用基本不支持。async

筆者想說：工具

不少人認爲，UI老是頻繁的變更，致使測試用例維護成本高，性價比低，所以UI自動化測試比較適合場景穩定的業務。其實不是，這裏的UI不只僅指的是視覺，更多的是業務邏輯。UI能夠多變，但業務邏輯必定是趨於穩定的，尤爲是核心業務，想想用戶得多辛苦才能適應這種業務邏輯頻繁變動的產品啊。

關於技術選型

TypeScript + Jest + Puppeteer

事實上，對於UI自動化測試來講，許多框架之間並無太多差異，也歷來不是影響整套測試用例是否健壯的關鍵性因素。相比之下，如何提升測試用例穩定性及全面性纔是讓UI自動化測試方案落地的重要細節。單元測試

開發實踐

項目搭建

你們能夠參考jest-puppeteer-testing，這裏再也不累述。

核心文件

// setup/expect-image-snapshot.ts
// 讓jest支持保存/比對屏幕截圖
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';

expect.extend({
  toMatchImageSnapshot: configureToMatchImageSnapshot({
    customSnapshotsDir: '__image_snapshots__',
  }),
});

// setup/enhance-puppeteer.ts
// 加強puppeteer功能，如：攔截請求並使用mock數據
import { onRequestInterceptor } from '../utils/request';

jest.setTimeout(30000);

beforeAll(async () => {
  page.on('request', onRequestInterceptor); // 攔截請求，使用代理數據
  await page.setRequestInterception(true);
});

// utils/request.ts
// mock數據的核心文件
// 這裏只攔截xhr或fetch請求，固然你也能夠自行擴展
import { URL } from 'url';
import { Request } from 'puppeteer';
import mocks from '../mocks';

// 設置請求攔截器的數據，用於同一請求返回不一樣結果，生效一次後自動銷燬
export const interceptors: { [api: string]: any } = {};
export const setRequestInterceptor = (api: string, value: any) => {
  interceptors[api] = value;
};

export const onRequestInterceptor = (request: Request) => {
  const resourceType = request.resourceType();
  if (resourceType === 'xhr' || resourceType === 'fetch') {
    const location = new URL(request.url());
    const mockKey = location.pathname;
    if (mockKey && mocks.hasOwnProperty(mockKey)) {
      const mock = mocks[mockKey];
      let response: any;
      if (typeof mock === 'function') {
        response = mock({ location, request, interceptor: interceptors[mockKey] });
        delete interceptors[mockKey]; // 生效一次後自動銷燬
      } else {
        response = mock;
      }
      if (response) {
        if (response.body != null && typeof response.body === 'object') {
          response.body = JSON.stringify(response.body);
        }
        request.respond(response);
      }
    } else {
      request.continue();
    }
  } else {
    request.continue();
  }
};