[investigate] Replace Puppeteer with Playwright (Vitest Browser Mode?)

.github/workflows/test-all.yml

@@ -81,6 +81,8 @@ jobs:
         with:
           node-version-file: '.nvmrc'
       - run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - run: npm run build-dist
       - uses: actions/upload-artifact@v4
         if: '!cancelled()'
@@ -117,6 +119,8 @@ jobs:
         if: runner.os == 'Linux'
         run: sudo apt install fonts-noto-cjk
       - run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - name: Start display server
         if: runner.os == 'Linux'
         run: nohup Xvfb &

build/generate-doc-images.ts

@@ -1,20 +1,21 @@
 import path from 'path';
 import fs from 'fs';
-import puppeteer from 'puppeteer';
+import playwright from '@playwright/test';
 import packageJson from '../package.json' with { type: 'json' };
 
 const exampleName = process.argv[2];
 const useLocalhost = (process.argv.length > 3) && (process.argv[3] === 'serve');
 const examplePath = path.resolve('test', 'examples');
 
-const browser = await puppeteer.launch({headless: true});
-
-const page = await browser.newPage();
+const browser = await playwright.chromium.launch({headless: true});
+const context = await browser.newContext({
+    deviceScaleFactor: 2
+});
+const page = await context.newPage();
 // set viewport and double deviceScaleFactor to get a closer shot of the map
-await page.setViewport({
+await page.setViewportSize({
     width: 600,
-    height: 250,
-    deviceScaleFactor: 2
+    height: 250
 });
 
 async function createImage(exampleName) {