refactor: better and faster e2e tests

.github/workflows/tests.yml

@@ -1,5 +1,5 @@
 name: Tests
-
+# this should run w cache now 3
 on:
   push:
     branches:
@@ -24,9 +24,9 @@ concurrency:
 jobs:
   tests:
     runs-on: ubuntu-latest
-
-    env:
-      PLAYWRIGHT_BROWSERS_PATH: 0
+    strategy:
+      matrix:
+        browser: [webkit, firefox, chromium]
 
     steps:
       - uses: actions/[email protected]
@@ -40,23 +40,34 @@ jobs:
           node-version: 22
           cache: 'pnpm'
 
+      - uses: actions/[email protected]
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-${{ matrix.browser }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+
       - name: Install deps
         run: pnpm install --frozen-lockfile
 
       - name: Type Check
         run: pnpm ts
 
-      - name: Install Playwright browsers
-        run: pnpm exec playwright install --with-deps
+      - name: Run unit tests
+        run: pnpm vitest run --coverage
+
+      - run: pnpm exec playwright install --with-deps ${{ matrix.browser }}
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
 
-      - name: Run e2e tests
-        run: |
-          pnpm build
-          pnpm test:ci-e2e
+      - run: pnpm exec playwright install-deps ${{ matrix.browser }}
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
 
-      - name: Run unit tests
-        run: pnpm test:ci
+      - name: Build
+        run: pnpm vite build
+
+      - name: Run e2e tests
+        run: pnpm playwright test --project="${{ matrix.browser }}"
 
       - name: Coverage
         uses: davelosert/[email protected]
-        if: ${{ always() }}
+        if: ${{ matrix.browser == 'webkit' && success() }}

CHANGES.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 7.2.0 (2024-11-19)
+
+- Feat: allow manual dispatch for tests.
+- Refactor: make e2e tests run parallel and cache the browsers for extra speed.
+
 ## 7.1.0 (2024-11-19)
 
 - Refactor: renamed `type-check` command to `ts`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-ts-tailwind-starter",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "type": "module",
   "scripts": {
     "dev": "cross-env DEBUG=0 vite",
@@ -9,10 +9,8 @@
     "preview": "vite build && vite preview",
     "start": "pnpm dev & wait-on tcp:3000 -v",
     "test": "vitest",
-    "coverage": "vitest run --coverage",
     "test-e2e": "playwright test --headed",
-    "test:ci": "vitest run --coverage",
-    "test:ci-e2e": "playwright test",
+    "coverage": "vitest run --coverage",
     "lint": "eslint . --fix",
     "ts": "vue-tsc --build --force"
   },
@@ -24,7 +22,7 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "1.8.1",
-    "@iconify/json": "2.2.273",
+    "@iconify/json": "2.2.274",
     "@iconify/types": "2.0.0",
     "@pinia/testing": "0.1.7",
     "@playwright/test": "1.49.0",
@@ -36,7 +34,7 @@
     "@tsconfig/node22": "22.0.0",
     "@types/jsdom": "21.1.7",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "22.9.0",
+    "@types/node": "22.9.1",
     "@typescript-eslint/eslint-plugin": "8.15.0",
     "@vitejs/plugin-vue": "5.2.0",
     "@vitest/coverage-v8": "2.1.5",
@@ -61,7 +59,7 @@
     "prettier": "3.3.3",
     "tailwindcss": "3.4.15",
     "typescript": "5.6.3",
-    "unplugin-auto-import": "0.18.4",
+    "unplugin-auto-import": "0.18.5",
     "unplugin-vue-components": "0.27.4",
     "vite": "5.4.11",
     "vite-plugin-vue-devtools": "7.6.4",

playwright.config.ts

@@ -40,21 +40,21 @@ export default defineConfig({
   },
   projects: [
     {
-      name: 'iPhone SE',
+      name: 'webkit',
       use: {
         browserName: 'webkit',
         ...devices['iPhone SE'],
       },
     },
     {
-      name: 'Macbook 11',
+      name: 'firefox',
       use: {
         browserName: 'firefox',
         ...devices['Macbook 11'],
       },
     },
     {
-      name: 'Desktop',
+      name: 'chromium',
       use: {
         browserName: 'chromium',
         ...devices['Macbook Pro'],