Fix CI timeouts for extension service worker

Author: sm17p

e2e/fixtures-pages/inspector-playground.html

@@ -21,11 +21,28 @@
 			}
 			body {
 				margin: 0;
-				background: radial-gradient(1200px 800px at 20% 10%, rgba(187, 244, 81, 0.18), transparent 60%),
-					radial-gradient(900px 700px at 80% 20%, rgba(59, 130, 246, 0.14), transparent 55%),
+				background:
+					radial-gradient(
+						1200px 800px at 20% 10%,
+						rgba(187, 244, 81, 0.18),
+						transparent 60%
+					),
+					radial-gradient(
+						900px 700px at 80% 20%,
+						rgba(59, 130, 246, 0.14),
+						transparent 55%
+					),
 					var(--bg);
 				color: var(--fg);
-				font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
+				font-family:
+					ui-sans-serif,
+					system-ui,
+					-apple-system,
+					Segoe UI,
+					Roboto,
+					Helvetica,
+					Arial,
+					"Apple Color Emoji",
 					"Segoe UI Emoji";
 				line-height: 1.4;
 				padding: 24px;
@@ -79,7 +96,11 @@
 				height: 64px;
 				border-radius: 12px;
 				border: 1px solid rgba(255, 255, 255, 0.14);
-				background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
+				background: linear-gradient(
+					180deg,
+					rgba(255, 255, 255, 0.08),
+					rgba(255, 255, 255, 0.02)
+				);
 			}
 			.flexRow {
 				display: flex;
@@ -195,22 +216,22 @@ <h2>Layer stack</h2>
 			<section data-testid="color-lab">
 				<h2>Color lab</h2>
 				<div class="swatches" data-testid="swatches">
-					<div class="swatch" style="background:#ffffff" data-testid="swatch-1"></div>
-					<div class="swatch" style="background:#0ea5e9" data-testid="swatch-2"></div>
-					<div class="swatch" style="background:#22c55e" data-testid="swatch-3"></div>
-					<div class="swatch" style="background:#e11d48" data-testid="swatch-4"></div>
-					<div class="swatch" style="background:#f59e0b" data-testid="swatch-5"></div>
-					<div class="swatch" style="background:#111827" data-testid="swatch-6"></div>
+					<div class="swatch" style="background: #ffffff" data-testid="swatch-1"></div>
+					<div class="swatch" style="background: #0ea5e9" data-testid="swatch-2"></div>
+					<div class="swatch" style="background: #22c55e" data-testid="swatch-3"></div>
+					<div class="swatch" style="background: #e11d48" data-testid="swatch-4"></div>
+					<div class="swatch" style="background: #f59e0b" data-testid="swatch-5"></div>
+					<div class="swatch" style="background: #111827" data-testid="swatch-6"></div>
 				</div>
 			</section>
 
 			<section data-testid="typography-lab">
 				<h2>Typography</h2>
 				<p data-testid="editable-paragraph">
-					This paragraph is intended for design mode testing. It contains enough text to verify editing.
+					This paragraph is intended for design mode testing. It contains enough text to
+					verify editing.
 				</p>
 			</section>
 		</main>
 	</body>
 </html>
-

e2e/fixtures.ts

@@ -38,7 +38,7 @@ export const test = base.extend<{
 	extensionId: async ({ context }, use) => {
 		let [background] = context.serviceWorkers();
 		if (!background) {
-			background = await context.waitForEvent("serviceworker");
+			background = await context.waitForEvent("serviceworker", { timeout: 30_000 });
 		}
 		const extensionId = background.url().split("/")[2];
 		await use(extensionId);

e2e/pages/popup.ts

@@ -5,4 +5,3 @@ export async function openPopup(page: Page, extensionId: string) {
 	await page.waitForLoadState("domcontentloaded");
 	return page;
 }
-

e2e/serve-fixtures.mjs

@@ -1,5 +1,5 @@
-import http from "http";
 import fs from "fs";
+import http from "http";
 import path from "path";
 
 const port = Number(process.argv[2] ?? 51234);
@@ -63,4 +63,3 @@ const server = http.createServer((req, res) => {
 server.listen(port, "127.0.0.1", () => {
 	console.log(`fixtures server listening on http://127.0.0.1:${port}`);
 });
-

e2e/tests/sidepanel.spec.ts

@@ -8,7 +8,11 @@ import {
 } from "../pages/web";
 
 test.describe("Side panel", () => {
-	test("side panel can be shown from toolbar", async ({ context, extensionId: _extensionId, page }) => {
+	test("side panel can be shown from toolbar", async ({
+		context,
+		extensionId: _extensionId,
+		page,
+	}) => {
 		await enableStableDomainInStorage(context);
 		await openStableTestPage(page);
 		await expect(getExtensionRoot(page)).toHaveCount(1);
@@ -20,4 +24,3 @@ test.describe("Side panel", () => {
 		await expect(page.getByRole("heading", { name: "Element Inspector" })).toBeVisible();
 	});
 });
-

e2e/tests/toolbar-distances.spec.ts

@@ -35,4 +35,3 @@ test.describe("Toolbar distances", () => {
 		await expect(distanceLines.first()).toHaveAttribute("stroke-dasharray", "none");
 	});
 });
-

e2e/tests/toolbar-overlays.spec.ts

@@ -39,4 +39,3 @@ test.describe("Toolbar overlays", () => {
 		await expect(rulerGroup).toBeVisible();
 	});
 });
-

e2e/tests/toolbar-settings.spec.ts

@@ -20,9 +20,7 @@ test.describe("Toolbar settings menu", () => {
 
 		await openToolbarSettings(page);
 
-		const featureVoting = page
-			.getByRole("group", { name: "Feature Voting" })
-			.first();
+		const featureVoting = page.getByRole("group", { name: "Feature Voting" }).first();
 		await expect(featureVoting).toBeVisible();
 
 		const toolbarAutoHideItem = page.locator('[id*="toolbar-auto-hide"]').first();
@@ -41,4 +39,3 @@ test.describe("Toolbar settings menu", () => {
 		}
 	});
 });
-

playwright.config.ts

@@ -61,10 +61,10 @@ export default defineConfig({
 		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
 		// },
 	],
-	timeout: 5_000,
+	timeout: process.env.CI ? 60_000 : 5_000,
 	webServer: {
 		command: "node e2e/serve-fixtures.mjs 51234",
-		url: "http://localhost:51234/inspector-playground.html",
+		url: "http://127.0.0.1:51234/inspector-playground.html",
 		reuseExistingServer: true,
 		timeout: 60_000,
 	},