使用 playwright 进行截图测试

.github/workflows/build_test.yml

@@ -1,18 +1,32 @@
-name: lint
+name: Build & Test
 
 on: [pull_request]
 
 jobs:
-  lint:
+  ci:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [18]
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: yarn
-    - run: yarn build
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - run: yarn
+      - run: yarn build
+      - run: yarn test:e2e
+
+      - name: Upload snapshots to GitHub Actions Artifacts
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: snapshots
+          path: |
+            __tests__/e2e/snapshots
+          retention-days: 1

.gitignore

@@ -92,3 +92,6 @@ docs-dist
 /packages/leaflet
 site_temp
 /packages/site/server
+
+*-actual.png
+*-diff.png

.npmrc

@@ -0,0 +1,5 @@
+@ali:registry=https://registry.npm.alibaba-inc.com
+@alipay:registry=https://registry.npm.alibaba-inc.com
+@alife:registry=https://registry.npm.alibaba-inc.com
+
+registry=https://registry.npm.taobao.org/

.umirc.ts

@@ -5,10 +5,11 @@ export default defineConfig({
   logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
   outputPath: 'docs-dist',
   base: '/',
-  define:{
+  define: {
     'process.env.renderer': process.env.renderer?.replace(/\'/g, ''),
+    'process.env.CI': process.env.CI?.replace(/\'/g, ''),
   },
-  
+
   devServer: {
     port: '6006',
   },

__tests__/e2e/snapshot.spec.ts

@@ -0,0 +1,36 @@
+import { chromium, devices } from 'playwright';
+import { tests } from './tests';
+import { sleep } from './utils/sleep';
+import './utils/useSnapshotMatchers';
+
+describe('Snapshots', () => {
+  Object.keys(tests).forEach((key) => {
+    it(key, async () => {
+      // Setup
+      const browser = await chromium.launch({
+        args: ['--headless', '--no-sandbox'],
+      });
+      const context = await browser.newContext(devices['Desktop Chrome']);
+      const page = await context.newPage();
+
+      // Go to test page served by vite devServer.
+      const url = `http://localhost:6006/${tests[key]}`;
+      await page.goto(url);
+
+      await sleep(1500);
+
+      // Chart already rendered, capture into buffer.
+      const buffer = await page.locator('canvas').screenshot();
+
+      const dir = `${__dirname}/snapshots`;
+
+      const maxError = 0;
+      try {
+        expect(buffer).toMatchCanvasSnapshot(dir, key, { maxError });
+      } finally {
+        await context.close();
+        await browser.close();
+      }
+    });
+  });
+});

__tests__/e2e/tests.ts

@@ -0,0 +1,11 @@
+/**
+ * TODO: extract url from dumi md & tsx
+ */
+export const tests = {
+  'point-circle': 'features/point/circle',
+  'point-billboard': 'features/point/point-billboard',
+  'point-column': 'features/point/point-column',
+  'point-fill-image': 'features/point/point-fill-image',
+  'point-normal-device': 'features/point/point-normal-device',
+  'citybuilding-amap1': 'features/citybuilding/amap1',
+};

__tests__/e2e/utils/sleep.ts

@@ -0,0 +1,5 @@
+export function sleep(n: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, n);
+  });
+}

__tests__/e2e/utils/toMatchCanvasSnapshot.ts

@@ -0,0 +1,92 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import pixelmatch from 'pixelmatch';
+import { PNG } from 'pngjs';
+
+export type ToMatchCanvasSnapshotOptions = {
+  maxError?: number;
+};
+
+function writePNG(buffer: Buffer, path: string) {
+  const png = PNG.sync.read(buffer);
+  fs.writeFileSync(path, PNG.sync.write(png));
+}
+
+/**
+ * diff between PNGs
+ */
+function diff(
+  src: string,
+  target: string,
+  diff: string,
+  maxError = 0,
+  showMismatchedPixels = true,
+) {
+  const img1 = PNG.sync.read(fs.readFileSync(src));
+  const img2 = PNG.sync.read(fs.readFileSync(target));
+  const { width, height } = img1;
+
+  let diffPNG: PNG | null = null;
+  let output: Buffer | null = null;
+  if (showMismatchedPixels) {
+    diffPNG = new PNG({ width, height });
+    output = diffPNG.data;
+  }
+
+  // @see https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options
+  const mismatch = pixelmatch(img1.data, img2.data, output, width, height, {
+    threshold: 0.1,
+  });
+
+  if (showMismatchedPixels && mismatch > maxError && diffPNG) {
+    fs.writeFileSync(diff, PNG.sync.write(diffPNG));
+  }
+
+  return mismatch;
+}
+
+// @see https://jestjs.io/docs/26.x/expect#expectextendmatchers
+export function toMatchCanvasSnapshot(
+  buffer: Buffer,
+  dir: string,
+  name: string,
+  options: ToMatchCanvasSnapshotOptions = {},
+): { message: () => string; pass: boolean } {
+  const { maxError = 0 } = options;
+  const namePath = path.join(dir, name);
+  const actualPath = path.join(dir, `${name}-actual.png`);
+  const expectedPath = path.join(dir, `${name}.png`);
+  const diffPath = path.join(dir, `${name}-diff.png`);
+
+  try {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+    if (!fs.existsSync(expectedPath)) {
+      console.warn(`! generate ${namePath}`);
+      writePNG(buffer, expectedPath);
+      return {
+        message: () => `generate ${namePath}`,
+        pass: true,
+      };
+    } else {
+      writePNG(buffer, actualPath);
+      const error = diff(actualPath, expectedPath, diffPath, maxError);
+      if (error <= maxError) {
+        if (fs.existsSync(diffPath)) fs.unlinkSync(diffPath);
+        fs.unlinkSync(actualPath);
+        return {
+          message: () => `match ${namePath}`,
+          pass: true,
+        };
+      }
+      return {
+        message: () => `mismatch ${namePath} (error: ${error}) `,
+        pass: false,
+      };
+    }
+  } catch (e) {
+    return {
+      message: () => `${e}`,
+      pass: false,
+    };
+  }
+}

__tests__/e2e/utils/useSnapshotMatchers.ts

@@ -0,0 +1,14 @@
+import { toMatchCanvasSnapshot, ToMatchCanvasSnapshotOptions } from "./toMatchCanvasSnapshot";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toMatchCanvasSnapshot(dir: string, name: string, options?: ToMatchCanvasSnapshotOptions): R;
+    }
+  }
+}
+
+expect.extend({
+  toMatchCanvasSnapshot,
+});

dev-demos/features/citybuilding/amap1.tsx

@@ -1,15 +1,15 @@
 // @ts-ignore
-import { Scene,CityBuildingLayer } from '@antv/l7';
+import { CityBuildingLayer, Scene } from '@antv/l7';
 // @ts-ignore
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
 
 export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
       renderer: process.env.renderer,
-      map: new GaodeMap({
+      map: new (process.env.CI ? Map : GaodeMap)({
         style: 'dark',
         center: [120.145, 30.238915],
         pitch: 60,
@@ -25,7 +25,7 @@ export default () => {
         .size('floor', [0, 500])
         .color('rgba(242,246,250,1.0)')
         .animate({
-          enable: true,
+          enable: !process.env.CI,
         })
         .active({
           color: '#0ff',

dev-demos/features/citybuilding/amap2.tsx

@@ -1,15 +1,15 @@
 // @ts-ignore
 import { CityBuildingLayer, Scene } from '@antv/l7';
 // @ts-ignore
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
 
 export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
       renderer: process.env.renderer,
-      map: new GaodeMap({
+      map: new (process.env.CI ? Map : GaodeMap)({
         style: 'dark',
         center: [120.145, 30.238915],
         pitch: 60,