Updates_31072025

.github/workflows/playwright.yml

@@ -0,0 +1,127 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master, develop ]
+  pull_request:
+    branches: [ main, master, develop ]
+  workflow_dispatch:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
+        shard: [1, 2, 3, 4]
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 8
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'pnpm'
+
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps ${{ matrix.browser }}
+
+    - name: Run Playwright tests
+      run: pnpm exec playwright test --project=${{ matrix.browser }} --shard=${{ matrix.shard }}/4
+      env:
+        CI: true
+
+    - name: Upload test results
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-results-${{ matrix.browser }}-${{ matrix.shard }}
+        path: |
+          playwright-report/
+          test-results/
+        retention-days: 30
+
+  test-components:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 8
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install Playwright
+      run: pnpm exec playwright install --with-deps chromium
+
+    - name: Run component tests
+      run: pnpm exec playwright test -c playwright-ct.config.ts
+
+    - name: Upload component test results
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-ct-results
+        path: |
+          playwright-ct-report/
+          test-results/
+        retention-days: 30
+
+  report:
+    needs: [test, test-components]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: actions/download-artifact@v4
+      with:
+        path: all-results
+        pattern: playwright-*
+
+    - name: Merge reports
+      run: |
+        npx playwright merge-reports --reporter html ./all-results/playwright-results-*
+
+    - name: Upload merged report
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+
+    - name: Deploy to GitHub Pages
+      if: github.ref == 'refs/heads/main'
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./playwright-report

.gitignore

@@ -8,6 +8,32 @@
 # testing
 # /coverage
 
+# Playwright test artifacts and reports
+/test-results/
+/playwright-report/
+/playwright-ct-report/
+/playwright/.cache/
+*.trace.zip
+/tests/**/trace*.zip
+/tests/**/*.trace.zip
+/tests/fixtures/auth.json
+/tests/downloads/
+/tests/temp/
+
+# Playwright screenshots (keep baseline, ignore test-generated)
+/tests/**/*-actual.png
+/tests/**/*-diff.png
+/tests/**/*-previous.png
+/tests/**/screenshot*.png
+
+# Additional Playwright artifacts
+/tests/results/
+/tests/output/
+/blob-report/
+*.har
+/test-results-*
+*-lighthouse-report.html
+
 # production
 /build
 
@@ -35,7 +61,9 @@ cache
 .idea
 .tmp
 
+# Legacy Cypress files (can be removed after full migration)
 cypress/videos
+cypress/screenshots
 
 .scannerwork
 # sonar-project.properties

PLAYWRIGHT_PACKAGE_SCRIPTS.md

@@ -0,0 +1,103 @@
+# Playwright Package.json Updates
+
+Add these scripts to your package.json:
+
+```json
+{
+  "scripts": {
+    "test:e2e": "playwright test",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:chrome": "playwright test --project=chromium",
+    "test:e2e:firefox": "playwright test --project=firefox",
+    "test:e2e:webkit": "playwright test --project=webkit",
+    "test:e2e:mobile": "playwright test --project='Mobile Chrome' --project='Mobile Safari'",
+    "test:ct": "playwright test -c playwright-ct.config.ts",
+    "test:ct:ui": "playwright test -c playwright-ct.config.ts --ui",
+    "test:report": "playwright show-report",
+    "test:trace": "playwright show-trace",
+    "test:install": "playwright install --with-deps",
+    "test:codegen": "playwright codegen",
+    "test:update-snapshots": "playwright test --update-snapshots",
+    "test:ci": "playwright test --reporter=github --reporter=html",
+    "test:shard": "playwright test --shard=$SHARD"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@playwright/experimental-ct-react": "^1.40.0"
+  }
+}
+```
+
+## Installation Commands
+
+```bash
+# Install Playwright
+pnpm add -D @playwright/test @playwright/experimental-ct-react
+
+# Install browsers
+pnpm exec playwright install --with-deps
+
+# Or install specific browsers only
+pnpm exec playwright install chromium firefox webkit
+```
+
+## Running Tests
+
+```bash
+# Run all E2E tests
+pnpm test:e2e
+
+# Run in UI mode (recommended for development)
+pnpm test:e2e:ui
+
+# Run component tests
+pnpm test:ct
+
+# Run specific test file
+pnpm test:e2e tests/e2e/timeline-horizontal.spec.ts
+
+# Run tests in headed mode
+pnpm test:e2e:headed
+
+# Run only Chrome tests
+pnpm test:e2e:chrome
+
+# Generate new tests with codegen
+pnpm test:codegen http://localhost:4444
+
+# Update visual snapshots
+pnpm test:update-snapshots
+
+# View test report
+pnpm test:report
+
+# View trace file
+pnpm test:trace trace.zip
+```
+
+## Debugging
+
+```bash
+# Debug mode with Playwright Inspector
+pnpm test:e2e:debug
+
+# Run with verbose logging
+DEBUG=pw:api pnpm test:e2e
+
+# Run single test in debug mode
+pnpm test:e2e:debug -g "should display correct number of timeline items"
+```
+
+## CI/CD
+
+```bash
+# Run in CI mode with GitHub Actions reporter
+pnpm test:ci
+
+# Run with sharding (for parallel CI)
+SHARD=1/4 pnpm test:shard
+SHARD=2/4 pnpm test:shard
+# etc...
+```