generate screenshots during test

.github/workflows/test.yml

@@ -9,16 +9,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🍔🍟🥤
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Use Node.js 😂
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Test 🧪
         run: |
           npm ci
           npm run check-ci
+
+      - name: Upload Artifact ⬆️
+        uses: actions/upload-artifact@v4
+        with:
+          path: ./screenshots/*.png
+          overwrite: true

.gitignore

@@ -4,6 +4,7 @@
 
 /docs
 /dist
+/screenshots
 index.html
 
 # -- clip-for-deploy-end --

test/puppeteer.js

@@ -32,6 +32,7 @@ function getExamples(port) {
       .map(f => ({
         url: `http://localhost:${port}/examples/${f}`,
         js: exampleInjectJS,
+        screenshot: true,
       }));
 }
 
@@ -71,7 +72,7 @@ async function test(port) {
     ...getExamples(port),
   ];
 
-  for (const {url, js} of testPages) {
+  for (const {url, js, screenshot} of testPages) {
     waitingPromiseInfo = makePromiseInfo();
     console.log(`===== [ ${url} ] =====`);
     if (js) {
@@ -87,9 +88,15 @@ async function test(port) {
       });
     }
     await waitingPromiseInfo.promise;
+    if (screenshot) {
+      const dir = 'screenshots';
+      fs.mkdirSync(dir, { recursive: true });
+      const name = /\/([a-z0-9_-]+).html/.exec(url)[1];
+      const path = `${dir}/${name}.png`;
+      await page.screenshot({path});
+    }
   }
 
-
   await browser.close();
   server.close();