Add playwright tests and CI

.github/workflows/playwright.yml

@@ -0,0 +1,30 @@
+name: Playwright Tests
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: pnpm/action-setup@v4
+      with:
+        version: 9
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 22
+        cache: 'pnpm'
+    - run: pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 7

.gitignore

@@ -9,3 +9,7 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .idea
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -12,7 +12,12 @@ Initial setup to edit the website locally:
 
 - install [pnpm](https://pnpm.io/installation), e.g. `curl -fsSL https://get.pnpm.io/install.sh | sh -`
 - install node dependencies, e.g. `pnpm install`
+- install playwright browsers for testing: `pnpm exec playwright install --with-deps`
 
 To start a dev server:
 
 - `pnpm dev`
+
+To run the tests locally:
+
+- `pnpm exec playwright test`

package.json

@@ -5,12 +5,15 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && vite build",
-		"preview": "vite preview"
+		"preview": "vite preview",
+		"test": "pnpm exec playwright test"
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.49.0",
 		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@types/node": "^22.10.1",
 		"autoprefixer": "^10.4.20",
 		"flowbite": "2.5.2",
 		"flowbite-svelte": "0.47.4",

playwright.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./tests",
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: "html",
+	use: {
+		baseURL: "http://127.0.0.1:5173",
+		trace: "on-first-retry",
+	},
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+	],
+	webServer: {
+		command: "pnpm exec vite dev",
+		url: "http://127.0.0.1:5173",
+		reuseExistingServer: !process.env.CI,
+	},
+});

src/lib/components/ApplicationForm.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 import UploadPdf from "$lib/components/UploadPdf.svelte";
+import { preventDefault } from "$lib/util";
 import DownloadOutline from "flowbite-svelte-icons/DownloadOutline.svelte";
 import Button from "flowbite-svelte/Button.svelte";
 import Checkbox from "flowbite-svelte/Checkbox.svelte";
@@ -130,12 +131,13 @@ async function downloadMergedPdf() {
 			>To apply for this position, please fill in all required fields, then click "Download PDF"
 				to download your application as PDF file and send it to [email protected]</P
 			>
+			<form onsubmit={preventDefault(downloadMergedPdf)}>
 			<div>
-				<Label>Name</Label>
-				<Input bind:value={name}></Input>
+				<Label for="name">Name</Label>
+				<Input bind:value={name} id="name"></Input>
 			</div>
 			{#each pdfs as pdf (pdf.id)}
-				<UploadPdf bind:file={pdf.file} label={`${pdf.label} (pdf)`} />
+				<UploadPdf bind:file={pdf.file} label={`${pdf.label} (pdf)`} id={pdf.id} />
 			{/each}
 			<P>Please check if any of the following apply to your application:</P>
 			{#each checkboxes as checkbox (checkbox.id)}
@@ -144,8 +146,9 @@ async function downloadMergedPdf() {
 			<P>Once you have uploaded all required documents, please click "Download PDF" to download your application as a
 				PDF
 				file and then send it by email to [email protected]</P>
-			<Button color="primary" on:click={downloadMergedPdf} disabled={!applicationComplete}>
+			<Button type="submit" color="primary" on:click={downloadMergedPdf} disabled={!applicationComplete}>
 				<DownloadOutline />
 				Download PDF
 			</Button>
+			</form>
 		</div>

src/lib/components/UploadPdf.svelte

@@ -6,9 +6,11 @@ import { Fileupload, Label } from "flowbite-svelte";
 let {
 	file = $bindable(null as File | null),
 	label,
+	id,
 }: {
 	file: File | null;
 	label: string;
+	id: string;
 } = $props();
 
 let files: FileList | undefined = $state(undefined);
@@ -24,6 +26,6 @@ function updateFile(event: Event) {
 </script>
 
 <div class="flex flex-col">
-	<Label>{label}</Label>
-	<Fileupload bind:files accept=".pdf" multiple={false} on:change={updateFile} required />
+	<Label for={id}>{label}</Label>
+	<Fileupload {id} bind:files accept=".pdf" multiple={false} on:change={updateFile} required />
 </div>

src/lib/util.ts

@@ -0,0 +1,6 @@
+export function preventDefault(fn: (event: Event) => void) {
+	return function (event: Event) {
+		event.preventDefault();
+		fn.call(this, event);
+	};
+}