Merge pull request #58 from slidr-app/transition-tests-to-playwright

Transition tests to playwright

.gitignore

@@ -39,3 +39,4 @@ public/pwa-*.png
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.pnpm-store

README.md

@@ -82,6 +82,24 @@ pnpm run emulators
 pnpm run test:start [args for vitest]
 ```
 
+#### E2E Tests
+
+```
+pnpm run test:e2e
+```
+
+Snapshots are platform dependent. To update the snapshots with docker (required when developing with mac):
+
+```sh
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash
+# host is now at 192.168.5.2 or host.docker.internal
+npm install -g pnpm
+# remove @vite-pwa/assets-generator from package.json
+# or apt install default-jre libvips libvips-dev build-essential
+pnpm install
+pnpm run test:e2e:snapshots
+```
+
 ### Build
 
 Create a production build:

package.json

@@ -16,18 +16,18 @@
     "build:all": "pwa-assets-generator && pnpm run build && pnpm run build:functions",
     "deploy": "firebase deploy --only functions:renderForBot,auth,firestore,storage,hosting",
     "generate-pwa-assets": "pwa-assets-generator",
-    "test": "pnpm run emulators:exec 'pnpm run test:start'",
-    "test:all": "pnpm run emulators:exec 'pnpm run test:start --run && pnpm run test:e2e:start'",
-    "test:once": "pnpm run emulators:exec 'pnpm run test:start --run'",
-    "test:ui": "pnpm run emulators:exec 'pnpm run test:start --ui'",
-    "test:start": "FIRESTORE_EMULATOR_HOST=\"127.0.0.1:8081\" vitest --mode emulator",
-    "coverage": "pnpm run emulators:exec 'pnpm run test:start --run --coverage'",
+    "test": "vitest",
+    "test:all": "pnpm run test:once && pnpm run test:e2e",
+    "test:once": "pnpm run test --run",
+    "test:ui": "pnpm run test --ui",
+    "coverage": "pnpm run test:once --coverage",
     "emulators": "firebase emulators:start --project demo-test --only auth,firestore,storage",
     "emulators:exec": "firebase emulators:exec --project demo-test --only auth,firestore,storage",
     "coverage:report": "nyc report --temp-dir ./coverage/tmp --reporter=text --reporter=lcov --reporter=text-summary --exclude-after-remap false",
     "test:e2e": "pnpm run emulators:exec --import test-data 'pnpm run test:e2e:start'",
     "test:e2e:coverage": "rm -Rf ./coverage && COVERAGE=1 pnpm run emulators:exec --import test-data 'pnpm run test:e2e:start' && pnpm run coverage:report",
     "test:e2e:ui": "pnpm run emulators:exec --import test-data 'pnpm run test:e2e:start --ui'",
+    "test:e2e:snapshots": "pnpm run emulators:exec --import test-data 'pnpm run test:e2e:start --update-snapshots'",
     "test:e2e:start": "FIRESTORE_EMULATOR_HOST=\"127.0.0.1:8081\" playwright test"
   },
   "dependencies": {
@@ -95,4 +95,4 @@
     "xo": "^0.54.2"
   },
   "packageManager": "pnpm@8.15.1+sha256.245fe901f8e7fa8782d7f17d32b6a83995e2ae03984cb5b62b8949bfdc27c7b5"
-}
+}

playwright.config.ts

@@ -53,7 +53,12 @@ export default defineConfig({
     {
       name: 'chromium',
       // Use: {...devices['Desktop Chrome'], storageState: STORAGE_STATE},
-      use: {...devices['Desktop Chrome']},
+      use: {
+        ...devices['Desktop Chrome'],
+        // https://playwrightsolutions.com/how-do-i-access-the-browser-clipboard-with-playwright/
+        // https://playwright.dev/docs/api/class-browsercontext#browser-context-grant-permissions
+        permissions: ['clipboard-read', 'clipboard-write'],
+      },
     },
     // {
     //   name: 'chromium - no sign-in',