test: screen-reader

.github/actions/npm-cache/action.yml

@@ -0,0 +1,46 @@
+---
+name: "NPM Cache Action"
+description: "Initialize NPM Cache"
+inputs:
+  nodeModulesPath:
+    description: "Path for node_modules"
+    required: false
+    default: "**node_modules"
+  packageLockPath:
+    description: "Path for package-lock.json"
+    required: false
+    default: "**/package-lock.json"
+  nodeVersion:
+    description: "Node version"
+    required: false
+    default: "20"
+runs:
+  using: "composite"
+  steps:
+    - name: 🆙 Setup node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.nodeVersion }}
+        cache-dependency-path: screen-reader-test/package-lock.json
+
+    - name: Display node and npm version
+      shell: bash
+      run: |
+        node --version
+        npm --version
+
+    - name: 🆒 Init Cache
+      uses: actions/cache@v4
+      id: "cache"
+      with:
+        path: "**/node_modules"
+        key: ${{ runner.os }}-node-${{ inputs.nodeVersion }}-${{ hashFiles(inputs.packageLockPath) }}
+        restore-keys: |
+          ${{ runner.os }}-node-${{ inputs.nodeVersion }}
+
+    - name: ⏬ NPM ci
+      shell: bash
+      working-directory: screen-reader-test
+      if: steps.cache.outputs.cache-hit != 'true'
+      run: |
+        npm ci

.github/actions/playwright-cache/action.yml

@@ -0,0 +1,35 @@
+---
+name: "Playwright Cache Action"
+description: "Initialize Playwright Cache"
+runs:
+  using: "composite"
+  steps:
+    - name: 🆙 Set env for os
+      shell: bash
+      env:
+        OS: ${{ runner.os }}
+      run: |
+        if [[ $OS == "Windows" ]]; then
+          echo "CACHE_PATH=C:\Users\runneradmin\AppData\Local\ms-playwright" >> "$GITHUB_ENV"
+          echo "BROWSERS=chromium firefox" >> "$GITHUB_ENV"
+          echo "OS=windows" >> "$GITHUB_ENV"
+        else
+          echo "CACHE_PATH=~/Library/Caches/ms-playwright" >> "$GITHUB_ENV"
+          echo "BROWSERS=webkit chromium firefox" >> "$GITHUB_ENV"
+          echo "OS=macos" >> "$GITHUB_ENV"
+        fi
+
+    - name: 🆒 Cache Playwright binaries
+      uses: actions/cache@v4
+      id: playwright-cache
+      with:
+        path: ${{ env.CACHE_PATH }}
+        key: "${{ runner.os }}-playwright-1.43.1"
+        restore-keys: |
+          ${{ runner.os }}-playwright-
+
+    - name: Install Playwright's dependencies
+      shell: bash
+      working-directory: screen-reader-test
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: npx playwright install --with-deps ${{ env.BROWSERS }}

.github/workflows/00-init-playwright.yml

@@ -0,0 +1,19 @@
+name: 🎭 Init Playwright
+
+on:
+  workflow_call:
+
+jobs:
+  init-playwright:
+    name: 🎭 Init Playwright - ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [macos-13, windows-2022]
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔄 Init Playwright Cache
+        uses: ./.github/actions/playwright-cache

.github/workflows/02-e2e-screen-reader.yml

@@ -0,0 +1,55 @@
+name: 🎭 Playwright Screen Reader
+
+on:
+  workflow_call:
+
+permissions:
+  actions: write
+  contents: write
+
+jobs:
+  playwright-screen-reader:
+    name: 🧪🎭 - screen-reader - ${{ matrix.os }} - ${{ matrix.framework }} - ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [macos-13, windows-2022]
+        framework: [react]
+        shardIndex: [1, 2, 3]
+        shardTotal: [3]
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🦮 Guidepup Setup
+        uses: guidepup/[email protected]
+        with:
+          record: true
+
+      - name: 🔄 Init Cache Default
+        uses: ./.github/actions/npm-cache
+
+      - name: 🔄 Init Playwright Cache
+        uses: ./.github/actions/playwright-cache
+
+      - name: 👩‍🔬 Test showcase with Playwright 🎭
+        working-directory: screen-reader-test
+        run: |
+          npm run test:screen-reader:${{ env.OS }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.framework }}-screen-reader-${{ matrix.os }}-${{ matrix.shardIndex }}
+          path: ./screen-reader-test/${{ matrix.framework }}-showcase/test-results
+          retention-days: 30
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.framework }}-recordings-${{ matrix.os }}-${{ matrix.shardIndex }}
+          path: ./screen-reader-test/${{ matrix.framework }}-showcase/recordings
+          retention-days: 30

.github/workflows/default.yml

@@ -0,0 +1,20 @@
+---
+name: Default Pipeline
+
+on:
+  pull_request:
+  push:
+    branches:
+      - "main"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  init-playwright:
+    uses: ./.github/workflows/00-init-playwright.yml
+
+  test-screen-reader:
+    uses: ./.github/workflows/02-e2e-screen-reader.yml
+    needs: [init-playwright]

.gitignore

@@ -105,4 +105,5 @@ dist
 
 # Setting files for IntelliJ / WebStorm
 .idea/
+/screen-reader-test/react-showcase/test-results/
 /variable-fonts/fonts