Merge pull request #59 from dddsw/playwright-on-workflow

Playwright on workflow

.github/workflows/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.1-jammy
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Playwright tests
+        run: npx playwright test --project=ci
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.husky/pre-commit

@@ -1,2 +1 @@
 npx lint-staged
-npm run test

package.json

@@ -6,9 +6,9 @@
 		"build": "vite build",
 		"package": "svelte-kit package",
 		"preview": "vite preview",
-		"test": "playwright test",
-		"test:ui": "playwright test --ui",
-		"test:update-screenshots": "playwright test tests/visual-comparison.spec.ts --update-snapshots",
+		"test": "playwright test --project=local",
+		"test:ui": "playwright test --ui --project=local",
+		"test:update-screenshots": "playwright test tests/visual-comparison.spec.ts --update-snapshots --project=local",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . & eslint .",

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
 	webServer: {
@@ -7,10 +7,23 @@ export default defineConfig({
 		reuseExistingServer: !process.env.CI
 	},
 	use: {
-		baseURL: 'http://127.0.0.1:5173/'
+		baseURL: 'http://127.0.0.1:5173/',
+		...devices['Desktop Chrome']
 	},
+
+	forbidOnly: !!process.env.CI,
 	fullyParallel: true,
 	reporter: [['list'], ['html']],
+	snapshotPathTemplate: '{testDir}/__screenshots__/{arg}{ext}',
 	testDir: './tests',
-	snapshotPathTemplate: '{testDir}/__screenshots__/{arg}{ext}'
+
+	projects: [
+		{
+			name: 'ci',
+			testIgnore: 'visual-comparison.spec.ts'
+		},
+		{
+			name: 'local'
+		}
+	]
 });