test: add e2e tests with playwright

Author: Ernxst

.github/workflows/ci.yml

@@ -85,3 +85,36 @@ jobs:
 
       - name: 🧪 Run Type Tests
         run: bun run test:types --continue --filter='!./examples/*'
+
+  playwright:
+    name: "🧪 Playwright"
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: 📤 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.13.1
+
+      - name: 📤 Install Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: 📤 Install dependencies
+        run: bun install
+
+      - name: 📤 Install Playwright browsers
+        run: bunx playwright install --with-deps
+        working-directory: packages/core
+        
+      - name: 🧪 Run Playwright tests
+        run: bun test:e2e --continue -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

.gitignore

@@ -42,6 +42,11 @@ coverage
 
 .nyc_output
 
+# playwright
+**/tests/e2e/report
+**/tests/e2e/blob-report
+**/tests/e2e/results
+
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 
 .grunt

bun.lockb

@@ -27,6 +27,7 @@
 		"format": "biome format . --write",
 		"---------------------------------------------------------------------------------": "",
 		"test": "turbo run test",
+		"test:e2e": "turbo run test:e2e",
 		"test:types": "turbo run test:types",
 		"test:watch": "turbo run test:watch",
 		"----------------------------------------------------------------------------------": "",

package.json

@@ -97,6 +97,7 @@
 		"test": "vitest run",
 		"test:types": "vitest run --typecheck",
 		"test:watch": "vitest",
+		"test:e2e": "playwright test",
 		"---------------------------------------------------------------------------------": "",
 		"postinstall": "svelte-kit sync"
 	},
@@ -127,11 +128,13 @@
 		"zod": "^3.22.2"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "3.0.2",
+		"@playwright/test": "1.45.0",
+		"@sveltejs/adapter-auto": "3.2.2",
 		"@sveltejs/vite-plugin-svelte": "3.1.1",
 		"@testing-library/jest-dom": "6.4.6",
 		"@testing-library/svelte": "5.1.0",
 		"@testing-library/user-event": "14.5.2",
+		"@types/node": "20.14.9",
 		"jsdom": "24.1.0",
 		"svelte-check": "3.8.1",
 		"tslib": "2.6.3",

packages/core/package.json

@@ -0,0 +1,71 @@
+import { resolve } from "node:path";
+import { defineConfig, devices } from "@playwright/test";
+
+function playwrightDir(partialPath: string) {
+	return resolve("./tests/e2e", partialPath);
+}
+
+const CI = !!process.env.CI;
+
+export default defineConfig({
+	testDir: playwrightDir("specs"),
+	outputDir: playwrightDir("results"),
+	webServer: {
+		command: "bun vite build && bun vite preview",
+		port: 4173,
+	},
+	use: {
+		screenshot: "only-on-failure",
+		trace: "retain-on-failure",
+	},
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+	reporter: CI
+		? [["github"]]
+		: [
+				[
+					"html",
+					{ outputFolder: playwrightDir("./report"), open: "on-failure" },
+				],
+			],
+	projects: [
+		{
+			name: "chromium",
+			use: {
+				...devices["Desktop Chrome"],
+			},
+		},
+		{
+			name: "firefox",
+			use: {
+				...devices["Desktop Firefox"],
+			},
+		},
+		{
+			name: "webkit",
+			use: {
+				...devices["Desktop Safari"],
+			},
+		},
+		{
+			name: "Mobile Chrome",
+			use: { ...devices["Pixel 5"] },
+		},
+		{
+			name: "Mobile Safari",
+			use: { ...devices["iPhone 14"] },
+		},
+		/** Test branded browsers */
+		{
+			name: "google",
+			use: {
+				...devices["Desktop Google Chrome"],
+			},
+		},
+		{
+			name: "msedge",
+			use: {
+				...devices["Desktop Edge"],
+			},
+		},
+	],
+});

packages/core/playwright.config.ts

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { page } from "$app/stores";
+import { useMultiSelectFilters } from "./_hooks/multi-select";
+
+const [q, helpers] = useMultiSelectFilters($page.url);
+
+function updateCategories(category: string) {
+	const categories = q.categories.includes(category)
+		? q.categories.filter((c) => c !== category)
+		: [...q.categories, category];
+	helpers.update({ categories });
+}
+</script>
+
+<ul>
+  <li>
+    <label>
+      <input
+        type="checkbox"
+        value="books"
+        onchange={() => updateCategories("books")}
+        checked={q.categories.includes("books")}
+      />
+      Books
+    </label>
+  </li>
+  <li>
+    <label>
+      <input
+        type="checkbox"
+        value="electronics"
+        onchange={() => updateCategories("electronics")}
+        checked={q.categories.includes("electronics")}
+      />
+      Electronics
+    </label>
+  </li>
+</ul>

packages/core/src/routes/(test)/multiselect/+page.svelte

@@ -0,0 +1,15 @@
+import { sveltekit } from "$lib/adapters/sveltekit";
+import { createUseQueryParams } from "$lib/create-params.svelte";
+import { z } from "zod";
+
+export type MultiSelect = z.infer<typeof MultiSelect>;
+const MultiSelect = z.object({
+	categories: z
+		.union([z.string().array(), z.string()])
+		.default([])
+		.transform((c) => (Array.isArray(c) ? c : [c])),
+});
+
+export const useMultiSelectFilters = createUseQueryParams(MultiSelect, {
+	adapter: sveltekit(),
+});

packages/core/src/routes/(test)/multiselect/_hooks/multi-select.ts

@@ -0,0 +1,20 @@
+<script>
+import { page } from "$app/stores";
+import { usePagination } from "./_hooks/pagination";
+
+const [q] = usePagination($page.url);
+
+const nextPage = () => {
+	q.page = Math.min(q.page + 1, 10);
+};
+
+const prevPage = () => {
+	q.page = Math.max(q.page - 1, 1);
+};
+</script>
+
+<h1>Current Page: {q.page}</h1>
+<h2>Page Size: {q.pageSize}</h2>
+
+<button onclick={prevPage} disabled={q.page === 1}>Previous</button>
+<button onclick={nextPage} disabled={q.page === 10}>Next</button>

packages/core/src/routes/(test)/pagination/+page.svelte

@@ -0,0 +1,13 @@
+import { sveltekit } from "$lib/adapters/sveltekit";
+import { createUseQueryParams } from "$lib/create-params.svelte";
+import { z } from "zod";
+
+export type Pagination = z.infer<typeof Pagination>;
+const Pagination = z.object({
+	page: z.coerce.number().default(1),
+	pageSize: z.coerce.number().default(10),
+});
+
+export const usePagination = createUseQueryParams(Pagination, {
+	adapter: sveltekit(),
+});