(feat): adds e2e test with registration and login workflow

.github/workflows/ci.yaml

@@ -57,10 +57,10 @@ jobs:
         run: pnpm test
 
       - name: Install Playwright Browsers
-        run: pnpx playwright install --with-deps
+        run: pnpx playwright install --with-deps chromium
 
       - name: Run Playwright tests
-        run: pnpm test:e2e
+        run: pnpm test:e2e:only
 
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

.gitignore

@@ -24,7 +24,10 @@ npm-debug.log*
 !.env.example
 
 # playwright
-**/playwright-report
+/e2e/results/
+/e2e/report/
+/playwright/.cache/
+/playwright-report
 
 db.sqlite
 
@@ -37,3 +40,5 @@ vite.config.ts.timestamp-*
 
 docs/.vitepress/cache
 docs/.vitepress/dist
+
+

e2e/specs/new-user-flow.spec.ts

@@ -0,0 +1,67 @@
+import test, { expect } from '@playwright/test'
+
+test.describe('registration process', { tag: ['@foo-bar'] }, () => {
+	const testEmail = 'foo@bar.com'
+	const testPassword = 'abc123abc123'
+
+	test('registers foo bar and logs into the app', async ({ page, baseURL }) => {
+		await page.goto(`${baseURL!}/signup`)
+
+		await test.step('sign up a new user', async () => {
+			const firstname = page.getByTestId('signup-firstname-input')
+			await expect(firstname).toBeVisible()
+			await firstname.focus()
+			await firstname.fill('Foo')
+
+			const lastname = page.getByTestId('signup-lastname-input')
+			await expect(lastname).toBeVisible()
+			await lastname.focus()
+			await lastname.fill('Bar')
+
+			const emailInput = page.getByTestId('signup-email-input')
+			await expect(emailInput).toBeVisible()
+			await emailInput.focus()
+			await emailInput.fill(testEmail)
+
+			const passwordInput = page.getByTestId('signup-password-input')
+			await expect(passwordInput).toBeVisible()
+			await passwordInput.focus()
+			await passwordInput.fill(testPassword)
+
+			const confirmPasswordInput = page.getByTestId('signup-password-confirm-input')
+			await expect(confirmPasswordInput).toBeVisible()
+			await confirmPasswordInput.focus()
+			await confirmPasswordInput.fill(testPassword)
+
+			const termsCheckbox = page.getByTestId('signup-terms-checkbox')
+			await expect(termsCheckbox).toBeVisible()
+			await termsCheckbox.check()
+
+			const signUpCta = page.getByTestId('signup-cta')
+			await expect(signUpCta).toBeVisible()
+			await signUpCta.hover()
+			await signUpCta.click()
+		})
+
+		await test.step('logs in with the created user', async () => {
+			const emailInput = page.getByTestId('login-email-input')
+			await emailInput.focus()
+			await emailInput.fill(testEmail)
+
+			const passwordInput = page.getByTestId('login-password-input')
+			await passwordInput.focus()
+			await passwordInput.fill(testPassword)
+
+			const stayLoginCheckbox = page.getByTestId('stay-logged-in')
+			await stayLoginCheckbox.check()
+
+			const loginCta = page.getByTestId('login-cta')
+			await loginCta.hover()
+			await loginCta.click()
+		})
+
+		await test.step('verify redirect to projects page', async () => {
+			await expect(page).toHaveURL(`${baseURL!}/projects`)
+		})
+	})
+})

package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"dev": "pnpm run setup:db && vite dev",
 		"build": "vite build",
-		"preview": "vite preview",
+		"preview": "pnpm run setup:db && vite preview",
 		"sync:svelte": "svelte-kit sync",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -15,7 +15,8 @@
 		"test": "pnpm test:unit && pnpm test:integration",
 		"test:unit": "vitest run --project unit",
 		"test:integration": "cross-env DATABASE_LOCATION=:memory: vitest run --project integration",
-		"test:e2e": "playwright test",
+		"test:e2e": "pnpm run build && playwright test",
+		"test:e2e:only": "playwright test",
 		"---- DB ------------------------------------------------------------": "",
 		"setup:db": "pnpm migrate:latest && pnpm sync:db",
 		"migrate": "tsx ./services/src/kysely/migrator.ts",
@@ -51,8 +52,8 @@
 		"zod": "^3.23.5"
 	},
 	"devDependencies": {
-		"vitepress": "^1.2.3",
 		"@eslint/js": "^9.2.0",
+		"@estruyf/github-actions-reporter": "^1.7.0",
 		"@playwright/test": "^1.44.0",
 		"@sveltejs/adapter-node": "^5.0.1",
 		"@sveltejs/kit": "^2.5.7",
@@ -91,6 +92,7 @@
 		"typescript": "^5.4.5",
 		"typescript-eslint": "^7.8.0",
 		"vite": "^5.2.11",
+		"vitepress": "^1.2.3",
 		"vitest": "^1.5.3"
 	},
 	"type": "module",

playwright.config.ts

@@ -1,13 +1,44 @@
-import type { PlaywrightTestConfig } from '@playwright/test'
+import { type PlaywrightTestConfig, devices } from '@playwright/test'
+
+const WEB_SERVER_PORT = 3000
+const isRunningInCI = process.env.CI
 
 const config: PlaywrightTestConfig = {
+	testDir: './e2e/specs',
+	outputDir: './e2e/results',
+	projects: [
+		{
+			name: 'Chrome',
+			testMatch: /.*\.spec\.ts/,
+			use: {
+				...devices['Desktop Chrome']
+			}
+		}
+	],
+	use: {
+		baseURL: `http://localhost:${WEB_SERVER_PORT}`,
+		bypassCSP: true,
+		trace: 'retain-on-failure',
+		video: 'retain-on-failure',
+		screenshot: 'only-on-failure'
+	},
 	webServer: {
-		command: 'pnpm run build && pnpm run preview',
-		port: 3000
+		command: 'pnpm run preview',
+		port: WEB_SERVER_PORT
 	},
-	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-	reporter: [['github'], ['dot'], ['html']]
+	reporter: [
+		isRunningInCI ? ['github'] : ['list'],
+		isRunningInCI
+			? ['@estruyf/github-actions-reporter', { useDetails: true, showError: true }]
+			: ['null'],
+		[
+			'html',
+			{
+				outputFolder: './e2e/report',
+				open: isRunningInCI ? 'never' : 'on-failure'
+			}
+		]
+	]
 }
 
 export default config