chore(test): run unit tests with vitest and add playwright e2e tests

.github/workflows/CI.yml

@@ -48,4 +48,28 @@ jobs:
     - name: Build
       run: npm run build
     - name: Test
-      run: npm run test.unit -- --run
+      run: npm run test:unit
+
+  e2e:
+    name: E2E
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - name: Use Node.js 24
+      uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+      with:
+        node-version: 24
+    - name: Install Dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps chromium
+    - name: Run E2E Tests
+      run: npm run test:e2e
+    - name: Upload Playwright Report
+      uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 14

.gitignore

@@ -26,4 +26,10 @@ yarn-debug.log*
 yarn-error.log*
 
 # Optional eslint cache
-.eslintcache
+.eslintcache
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -40,7 +40,13 @@ After the user navigates to Tab 2 (Photos), they can tap/click on the camera but
 
 ## Linting
 
-The code is checked with [ESLint](https://eslint.org/) and formatted with [Prettier](https://prettier.io/), using Ionic's shared configs. Pull requests must pass `npm run lint`.
+The code is checked with [ESLint](https://eslint.org/) and formatted with [Prettier](https://prettier.io/), using Ionic's shared configs. `npm run lint` also type-checks the Playwright tests, which ESLint and Playwright don't do on their own. Pull requests must pass `npm run lint`.
 
 - Check for issues: `npm run lint`
 - Fix what can be fixed automatically: `npm run lint:fix`
+
+## Testing
+
+- Run the unit tests ([Vitest](https://vitest.dev/)): `npm run test:unit` (or `npm run test:unit:watch` to rerun on changes)
+- Run the end-to-end tests ([Playwright](https://playwright.dev/)): `npm run test:e2e`. The first time, install the browser with `npx playwright install chromium`.
+- Run both: `npm test`

e2e/app.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+
+test('shows the first tab on load', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.locator('ion-content').getByText('Tab 1 page')).toBeVisible();
+});
+
+test('opens the photo gallery from the tab bar', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('tab', { name: 'Photos' }).click();
+
+  await expect(page).toHaveURL(/\/tab2$/);
+  await expect(page.locator('ion-title', { hasText: 'Photo Gallery' }).first()).toBeVisible();
+});

eslint.config.js

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
 
 export default defineConfig([
-  { ignores: ['dist/**', 'android/**', 'ios/**', 'cypress.config.ts'] },
+  { ignores: ['dist/**', 'android/**', 'ios/**', 'playwright-report/**', 'test-results/**', 'blob-report/**'] },
   ionic,
   {
     files: ['**/*.{ts,tsx}'],