test: add E2E tests with Playwright (#95)

.github/workflows/azure-static-web-apps-polite-desert-00b80111e.yml

@@ -44,6 +44,30 @@ jobs:
           api_location: 'demo/api' # Api source code path - optional
           output_location: 'build/static' # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
+    outputs:
+      preview_url: ${{ steps.builddeploy.outputs.static_web_app_url }}
+  test:
+    needs: build_and_deploy_job
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    name: Run E2E Tests
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: demo
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm test
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ needs.build_and_deploy_job.outputs.preview_url }}
 
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
     branches: [main]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
 
     steps:

demo/package.json

@@ -7,7 +7,8 @@
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"test": "playwright test"
 	},
 	"engines": {
 		"npm": ">=8.7.0 < 9",
@@ -16,6 +17,7 @@
 	"devDependencies": {
 		"@fontsource/fira-mono": "^4.5.0",
 		"@neoconfetti/svelte": "^1.0.0",
+		"@playwright/test": "^1.25.0",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"@types/cookie": "^0.5.1",

demo/playwright.config.js

@@ -0,0 +1,11 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: process.env.CI
+		? undefined
+		: {
+				command: 'npm run build && npm run preview',
+				port: 4173
+		  }
+};
+
+export default config;