feat: Add tests for signup

playwright.config.ts

@@ -1,12 +1,33 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: 'tests',
-  reporter: 'list',
+  projects: [
+    {
+      name: 'signup',
+      testMatch: /signup\.setup\.ts/,
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // Make all other tests depend on the signup,
+    // since they need user accounts to run
+
+    {
+      name: 'tests',
+      use: { ...devices['Desktop Chrome'] },
+      dependencies: ['signup'],
       testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+      fullyParallel: true,
+    },
+  ],
+  reporter: 'list',
   webServer: {
     command: 'npm run dev',
-    port: 5174,
+    port: 5173,
     reuseExistingServer: true,
   },
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
 });

tests/signup.setup.ts

@@ -0,0 +1,6 @@
+import { test } from '@playwright/test';
+import { signup } from './utils';
+
+test('Signup', async ({ page }) => {
+  await signup(page);
+});

tests/updateUsername.spec.ts

@@ -1,7 +1,6 @@
 import { test, expect, type Page, type Locator } from '@playwright/test';
 import { login } from './utils';
 
-test.describe.configure({ mode: 'parallel' });
 test.describe('Username Update Form', () => {
   let page: Page;
   let usernameInput: Locator;
@@ -17,11 +16,12 @@ test.describe('Username Update Form', () => {
     currentUsernameElement = page.locator('#currentuser-username');
 
     await login(page);
-    page.goto('http://localhost:5173/account');
+    page.goto('/account');
   });
 
   // Test that the username will change
   test('should successfully update the username', async () => {
+    await page.waitForLoadState('domcontentloaded');
     await usernameInput.fill(newUsername);
     await submitButton.click();
 
@@ -36,6 +36,7 @@ test.describe('Username Update Form', () => {
 
   // Test invalidator
   test('should show validation error for invalid username', async () => {
+    await page.waitForLoadState('domcontentloaded');
     await usernameInput.fill('a');
     await submitButton.click();
 

tests/utils.ts

@@ -1,10 +1,19 @@
 import type { Page } from '@playwright/test';
 
 export async function login(page: Page): Promise<void> {
-  await page.goto('http://localhost:5174/login');
+  await page.goto('/login');
   await page.waitForLoadState('domcontentloaded');
-  console.log('loaded');
   await page.fill('#email', 'playwright@playwright.com');
   await page.fill('#password', 'Password1234!');
   await page.click('button[type="submit"]');
 }
+
+export async function signup(page: Page): Promise<void> {
+  await page.goto('/signup');
+  await page.waitForLoadState('domcontentloaded');
+  await page.fill('#username', 'playwrightuser');
+  await page.fill('#email', 'playwright@playwright.com');
+  await page.fill('#password', 'Password1234!');
+  await page.fill('#verify', 'Password1234!');
+  await page.click('button[type="submit"]');
+}