refactor: migrate to playwright (#141)

.github/workflows/cron-run.yml

@@ -19,8 +19,8 @@ jobs:
       - name: Install
         run: bun install
 
-      - name: Puppeteer Setup
-        run: bunx @puppeteer/browsers install chrome@stable
+      - name: Playwright Setup
+        run: bunx playwright install --with-deps chromium
 
       - name: Generate API
         run: bun run cli generate $GOOGLE_API_KEY

.github/workflows/manual-run-force.yml

@@ -17,8 +17,8 @@ jobs:
       - name: Install
         run: bun install
 
-      - name: Puppeteer Setup
-        run: bunx @puppeteer/browsers install chrome@stable
+      - name: Playwright Setup
+        run: bunx playwright install --with-deps chromium
 
       - name: Generate API
         run: bun run cli generate $GOOGLE_API_KEY

.github/workflows/manual-run.yml

@@ -14,8 +14,8 @@ jobs:
         with:
           bun-version: latest
 
-      - name: Puppeteer Setup
-        run: bunx @puppeteer/browsers install chrome@stable
+      - name: PLaywright Setup
+        run: bunx playwright install --with-deps chromium
 
       - name: Generate API
         run: bun run cli generate $GOOGLE_API_KEY

.gitignore

@@ -68,3 +68,7 @@ yarn-error.log
 .idea
 
 dist/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -36,12 +36,14 @@
 		"p-queue": "^8.0.1",
 		"pathe": "^1.1.2",
 		"picocolors": "^1.1.1",
-		"puppeteer": "^23.11.1",
+		"playwright": "^1.49.1",
 		"stylis": "^4.3.4",
 		"zod": "^3.24.1"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
+		"@playwright/test": "^1.49.1",
+		"@types/bun": "latest",
 		"@types/node": "^22.10.2",
 		"c8": "^10.1.3",
 		"magic-string": "^0.30.17",

src/license.ts

@@ -4,7 +4,7 @@ import { consola } from 'consola';
 import stringify from 'json-stringify-pretty-compact';
 import { parseHTML } from 'linkedom';
 import { dirname, join } from 'pathe';
-import puppeteer from 'puppeteer';
+import { chromium } from 'playwright';
 
 import type { Authors, License, Licenses } from './types';
 
@@ -128,20 +128,20 @@ const processTable = (tableHTML: string) => {
  * {@link https://fonts.google.com/attribution}
  */
 export const parseLicenses = async () => {
-	const browser = await puppeteer.launch({ headless: true });
+	const browser = await chromium.launch({ headless: true });
 	const page = await browser.newPage();
 	// We only need html, skip css and font downloads
-	await page.setRequestInterception(true);
-	page.on('request', (request) => {
+	await page.route('**/*', (route) => {
+		const request = route.request();
 		if (
 			['image', 'stylesheet', 'font', 'other'].includes(request.resourceType())
 		) {
-			request.abort();
+			route.abort();
 		} else {
-			request.continue();
+			route.continue();
 		}
 	});
-	await page.goto(url, { waitUntil: 'networkidle0' });
+	await page.goto(url, { waitUntil: 'networkidle' });
 
 	const tableHTML = await page.evaluate(() => {
 		const query = document.querySelector('gf-attribution > section > table');

src/variable-gen.ts

@@ -6,7 +6,7 @@ import merge from 'deepmerge';
 import stringify from 'json-stringify-pretty-compact';
 import { parseHTML } from 'linkedom';
 import { dirname, join } from 'pathe';
-import puppeteer from 'puppeteer';
+import { chromium } from 'playwright';
 
 import type { FontObjectVariableDirect } from './types';
 
@@ -104,10 +104,10 @@ const processTable = (tableHTML: string) => {
  * {@link https://fonts.google.com/variablefonts}
  */
 export const fetchVariable = async () => {
-	// Need to use Puppeteer to let JavaScript load page elements fully
-	const browser = await puppeteer.launch({ headless: true });
+	// Need to use Playwright to let JavaScript load page elements fully
+	const browser = await chromium.launch({ headless: true });
 	const page = await browser.newPage();
-	await page.goto(url, { waitUntil: 'networkidle0' });
+	await page.goto(url, { waitUntil: 'networkidle' });
 
 	const tableHTML = await page.evaluate(() => {
 		const selector = document.querySelector(