chore: replace puppeteer with playwright (#3540)

dotansimha · Dec 11, 2024 · 7209e16 · 7209e16
1 parent 73385e1
commit 7209e16
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 252 deletions.
diff --git a/examples/sveltekit/__integration-tests__/sveltekit.spec.ts b/examples/sveltekit/__integration-tests__/sveltekit.spec.ts
@@ -1,5 +1,5 @@
 import { execSync, spawn } from 'node:child_process';
-import puppeteer, { Browser, Page } from 'puppeteer';
+import { Browser, chromium, ElementHandle, Page } from 'playwright';
 import { promises as fsPromises } from 'node:fs';
 import { join } from 'node:path';
 import { setTimeout as setTimeout$ } from 'node:timers/promises';
@@ -58,11 +58,8 @@ describe('SvelteKit integration', () => {
 		// Wait for sveltekit to start
 		await setTimeout$(timings.setup.waitAfterPreview);
 
-		// Launch puppeteer
-		browser = await puppeteer.launch({
-			// If you wanna run tests with open browser
-			// set your PUPPETEER_HEADLESS env to "false"
-			headless: process.env.PUPPETEER_HEADLESS !== 'false',
+		browser = await chromium.launch({
+			headless: process.env.PLAYWRIGHT_HEADLESS !== 'false',
 			args: ['--incognito', '--no-sandbox', '--disable-setuid-sandbox']
 		});
 
@@ -73,7 +70,7 @@ describe('SvelteKit integration', () => {
 		if (page !== undefined) {
 			await page.close();
 		}
-		const context = await browser.createBrowserContext();
+		const context = await browser.newContext();
 		page = await context.newPage();
 	});
 

diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
@@ -13,12 +13,13 @@
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-		"postinstall": "node node_modules/puppeteer/install.mjs"
+		"postinstall": "playwright install --with-deps"
 	},
 	"devDependencies": {
+		"@playwright/browser-chromium": "^1.49.1",
 		"@sveltejs/adapter-auto": "3.2.2",
-		"@sveltejs/vite-plugin-svelte": "5.0.1",
 		"@sveltejs/kit": "2.10.1",
+		"@sveltejs/vite-plugin-svelte": "5.0.1",
 		"@types/jest": "^29.0.0",
 		"@typescript-eslint/eslint-plugin": "8.18.0",
 		"@typescript-eslint/parser": "8.18.0",
@@ -27,9 +28,9 @@
 		"eslint-config-prettier": "9.0.0",
 		"eslint-plugin-svelte3": "4.0.0",
 		"jest": "^29.0.0",
+		"playwright": "^1.49.1",
 		"prettier": "3.4.2",
 		"prettier-plugin-svelte": "3.3.2",
-		"puppeteer": "23.10.3",
 		"svelte": "5.10.1",
 		"svelte-check": "4.1.1",
 		"svelte-preprocess": "6.0.3",
@@ -39,9 +40,9 @@
 	},
 	"dependencies": {
 		"@envelop/graphql-jit": "8.0.4",
-		"graphql-yoga": "workspace:*",
 		"@graphql-yoga/render-graphiql": "workspace:*",
-		"graphql": "16.9.0"
+		"graphql": "16.9.0",
+		"graphql-yoga": "workspace:*"
 	},
 	"type": "module"
 }
diff --git a/packages/graphql-yoga/__integration-tests__/browser.spec.ts b/packages/graphql-yoga/__integration-tests__/browser.spec.ts
@@ -17,7 +17,7 @@ import 'json-bigint-patch';
 import { createServer, Server } from 'node:http';
 import { AddressInfo } from 'node:net';
 import { setTimeout as setTimeout$ } from 'node:timers/promises';
-import puppeteer, { Browser, ElementHandle, Page } from 'puppeteer';
+import { Browser, chromium, ElementHandle, Page } from 'playwright';
 import { fakePromise } from '@whatwg-node/server';
 import { CORSOptions, createYoga, Repeater } from '../src/index.js';
 
@@ -230,18 +230,16 @@ describe('browser', () => {
   beforeAll(async () => {
     await new Promise<void>(resolve => server.listen(0, resolve));
     port = (server.address() as AddressInfo).port;
-    browser = await puppeteer.launch({
-      // If you wanna run tests with open browser
-      // set your PUPPETEER_HEADLESS env to "false"
-      headless: process.env.PUPPETEER_HEADLESS !== 'false',
+    browser = await chromium.launch({
+      headless: process.env.PLAYWRIGHT_HEADLESS !== 'false',
       args: ['--incognito', '--no-sandbox', '--disable-setuid-sandbox'],
     });
   });
   beforeEach(async () => {
     if (page !== undefined) {
       await page.close();
     }
-    const context = await browser.createBrowserContext();
+    const context = await browser.newContext();
     const pages = await context.pages();
     page = pages[0] || (await context.newPage());
   });

diff --git a/packages/graphql-yoga/package.json b/packages/graphql-yoga/package.json
@@ -43,7 +43,7 @@
     "check": "tsc --pretty --noEmit",
     "generate-graphiql-html": "node scripts/generate-graphiql-html.js",
     "inject-version": "node scripts/inject-version.js",
-    "postinstall": "node node_modules/puppeteer/install.mjs",
+    "postinstall": "playwright install --with-deps",
     "prepack": "bob prepack"
   },
   "peerDependencies": {
@@ -69,6 +69,7 @@
     "@graphql-yoga/render-graphiql": "workspace:*",
     "@jest/globals": "^29.2.1",
     "@n1ru4l/in-memory-live-query-store": "0.10.0",
+    "@playwright/browser-chromium": "^1.49.1",
     "@repeaterjs/repeater": "^3.0.4",
     "@types/node": "22.9.0",
     "globby": "^14.0.2",
@@ -78,7 +79,7 @@
     "graphql-sse": "2.1.3",
     "html-minifier-terser": "7.2.0",
     "json-bigint-patch": "0.0.8",
-    "puppeteer": "23.10.3"
+    "playwright": "^1.49.1"
   },
   "publishConfig": {
     "directory": "dist",