Improved end to end test pipeline.

Author: amyjko

.github/workflows/playwright.yml

@@ -29,10 +29,10 @@ jobs:
             - name: Build project
               run: npm run build
             - name: Start Emulator
-              run: firebase emulators:exec "npx playwright test --reporter=list" --project=demo-wordplay --only "firestore,hosting,auth"
+              run: firebase emulators:exec "npx playwright test --reporter=list" --project=demo-wordplay --only "firestore,hosting,auth" --log-verbosity QUIET
             - uses: actions/upload-artifact@v4
               if: always()
               with:
                   name: playwright-report
-                  path: playwright-report/
+                  path: test-results/
                   retention-days: 30

package.json

@@ -10,7 +10,7 @@
         "check": "svelte-check --tsconfig ./tsconfig.json --watch .svelte-kit",
         "test": "vitest",
         "test:coverage": "vitest run --coverage",
-        "end2end": "npm run build && firebase emulators:exec \"npx playwright test\" --project=demo-wordplay",
+        "end2end": "npm run build && firebase emulators:exec \"npx playwright test\" --project=demo-wordplay --log-verbosity QUIET",
         "dev": "vite dev",
         "emu": "firebase emulators:start --project=demo-wordplay",
         "env": "run-script-os",

playwright.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
-        baseURL: 'http://localhost:4173',
+        baseURL: 'http://127.0.0.1:5002',
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry',
         viewport: { width: 1280, height: 720 },
@@ -55,11 +55,14 @@ export default defineConfig({
     /* Remove any lingering authentication state before starting the tests */
     webServer: {
         name: 'Vite build preview',
-        command: 'rm -rf playwright/.auth && npm run preview',
-        url: 'http://localhost:4173/',
+        command: '',
+        url: 'http://127.0.0.1:5002/',
         timeout: 180000,
         reuseExistingServer: !process.env.CI,
         stdout: 'pipe',
         stderr: 'pipe',
     },
+
+    /* Clean stuff up after tests */
+    globalTeardown: './tests/teardown.ts',
 });

playwright/fixtures.ts

@@ -21,7 +21,7 @@ export const test = baseTest.extend<{}, { workerStorageState: string }>({
 
             // Important: make sure we authenticate in a clean environment by unsetting storage state.
             const page = await browser.newPage({
-                baseURL: 'http://localhost:4173',
+                baseURL: 'http://127.0.0.1:5002',
             });
 
             // Acquire a unique account, for example create a new one.

tests/end2end/login.spec.ts

@@ -1,7 +1,9 @@
 import { expect, test } from '../../playwright/fixtures';
 
 test('verify default login, logout, and login form', async ({ page }) => {
-    // Go to the join page.
+    // fixtures.ts logins in the user prior to this.
+
+    // Go to the profile page and wait for the auth to load.
     await page.goto('/profile');
 
     // Verify that the profile username page is visible

tests/teardown.ts

@@ -0,0 +1,5 @@
+import fs from 'fs';
+
+export default function teardown() {
+    fs.rmSync('playwright/.auth', { recursive: true, force: true });
+}