refactor: address pr comments.

Author: knightedcodemonkey

.github/workflows/playwright.yml

@@ -6,10 +6,10 @@ on:
       - main
     paths:
       - 'src/**'
+      - 'playwright/**'
       - 'package-lock.json'
-  pull_request:
-    branches:
-      - main
+      - 'playwright.config.ts'
+      - '.github/workflows/playwright.yml'
   workflow_dispatch:
 
 jobs:

README.md

@@ -24,6 +24,18 @@ Then open the URL printed by the dev server (it should open `src/index.html`).
 
 ## End-to-end tests
 
+Install Playwright browsers once before your first local run:
+
+```bash
+npx playwright install
+```
+
+If your environment needs system dependencies too (for example Linux CI-like containers), use:
+
+```bash
+npx playwright install --with-deps
+```
+
 Run local Playwright tests (Chromium):
 
 ```bash

playwright.config.ts

@@ -23,10 +23,10 @@ if (isCI) {
 
 export default defineConfig({
   testDir: 'playwright',
-  timeout: 45_000,
+  timeout: isCI ? 120_000 : 20_000,
   retries: isCI ? 1 : 0,
   expect: {
-    timeout: 15_000,
+    timeout: isCI ? 90_000 : 15_000,
   },
   reporter: isCI ? 'github' : 'list',
   use: {

playwright/app.spec.ts

@@ -4,7 +4,7 @@ import type { Page } from '@playwright/test'
 const waitForInitialRender = async (page: Page) => {
   await page.goto('/src/index.html')
   await expect(page.getByRole('heading', { name: '@knighted/develop' })).toBeVisible()
-  await expect(page.locator('#status')).toHaveText('Rendered', { timeout: 90_000 })
+  await expect(page.locator('#status')).toHaveText('Rendered')
   await expect(page.locator('#cdn-loading')).toHaveAttribute('hidden', '')
 }
 
@@ -42,7 +42,7 @@ test('renders in react mode with css modules', async ({ page }) => {
   await page.getByLabel('ShadowRoot (open)').uncheck()
   await page.locator('#render-mode').selectOption('react')
   await page.locator('#style-mode').selectOption('module')
-  await expect(page.locator('#status')).toHaveText('Rendered', { timeout: 90_000 })
+  await expect(page.locator('#status')).toHaveText('Rendered')
 
   const previewItems = page.locator('#preview-host li')
   await expect(previewItems).toHaveCount(3)
@@ -79,7 +79,7 @@ test('requires render button when auto render is disabled', async ({ page }) =>
   await expect(styleWarning).toHaveText('')
 
   await renderButton.click()
-  await expect(page.locator('#status')).toHaveText('Rendered', { timeout: 90_000 })
+  await expect(page.locator('#status')).toHaveText('Rendered')
   await expect(styleWarning).toContainText('CSS Modules are compiled in-browser')
 })
 
@@ -103,7 +103,7 @@ test('renders with less style mode', async ({ page }) => {
 
   await page.getByLabel('ShadowRoot (open)').uncheck()
   await page.locator('#style-mode').selectOption('less')
-  await expect(page.locator('#status')).toHaveText('Rendered', { timeout: 90_000 })
+  await expect(page.locator('#status')).toHaveText('Rendered')
   await expect(page.locator('#style-warning')).toContainText(
     'Less is compiled in-browser via @knighted/css/browser.',
   )
@@ -118,7 +118,7 @@ test('renders with sass style mode', async ({ page }) => {
 
   await page.getByLabel('ShadowRoot (open)').uncheck()
   await page.locator('#style-mode').selectOption('sass')
-  await expect(page.locator('#status')).toHaveText('Rendered', { timeout: 90_000 })
+  await expect(page.locator('#status')).toHaveText('Rendered')
   await expect(page.locator('#style-warning')).toContainText(
     'Sass is compiled in-browser via @knighted/css/browser.',
   )