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: "./screen-reader-test/node_modules"
+  packageLockPath:
+    description: "Path for package-lock.json"
+    required: false
+    default: "./screen-reader-test/package-lock.json"
+  nodeVersion:
+    description: "Node version"
+    required: false
+    default: "20"
+runs:
+  using: "composite"
+  steps:
+    - name: 🆙 Setup node
+      # pick the Node version to use and install it
+      # https://github.com/actions/setup-node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.nodeVersion }}
+
+    - name: Display node and npm version
+      shell: bash
+      run: |
+        node --version
+        npm --version
+
+    - name: 🆒 Init Cache
+      uses: actions/cache@v4
+      id: "cache"
+      with:
+        path: ${{ inputs.nodeModulesPath }}
+        key: ${{ runner.os }}-node-${{ inputs.nodeVersion }}-${{ hashFiles(inputs.packageLockPath) }}
+        restore-keys: |
+          ${{ runner.os }}-node-${{ inputs.nodeVersion }}
+
+    - name: ⏬ NPM ci
+      shell: bash
+      if: steps.cache.outputs.cache-hit != 'true'
+      run: |
+        npm ci

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

@@ -0,0 +1,31 @@
+---
+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-latest" ]]; then
+            echo "PATH=C:\Users\runneradmin\AppData\Local\ms-playwright" >> "$GITHUB_ENV"
+            echo "BROWSER=chromium" >> "$GITHUB_ENV"
+        else
+            echo "PATH=~/Library/Caches/ms-playwright" >> "$GITHUB_ENV"
+            echo "BROWSER=webkit" >> "$GITHUB_ENV"
+        fi
+
+    - name: 🆒 Cache Playwright binaries
+      uses: actions/cache@v4
+      id: cache-playwright
+      with:
+        path: ${{ env.PATH }}
+        key: ${{ runner.os }}-playwright-${{ hashFiles('./screen-reader-test/package-lock.json') }}
+
+    - name: ⏬ Install Playwright Browsers
+      shell: bash
+      if: steps.cache-playwright.outputs.cache-hit != 'true'
+      run: |
+        npx playwright install --with-deps ${{ env.BROWSER }}

.github/scripts/get-playwright-version.js

@@ -0,0 +1,12 @@
+import packageJson from '../../screen-reader-test/package.json' assert { type: 'json' };
+
+const getPlaywrightVersion = () => {
+	const version = packageJson.devDependencies['@playwright/test'];
+	if (!version) {
+		console.error('Playwright version is missing');
+		process.exit(1);
+	}
+
+	return version;
+};
+export default getPlaywrightVersion;

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

@@ -0,0 +1,27 @@
+name: Init Playwright Mac/Win
+
+on:
+  workflow_call:
+
+jobs:
+  init:
+    name: Init playwright ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [windows-latest]
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔄 Init Cache Default
+        uses: ./.github/actions/npm-cache
+
+      - name: 🔄 Init Playwright
+        uses: ./.github/actions/playwright-cache
+        with:
+          os: ${{ matrix.os }}

.github/workflows/00-init.yml

@@ -0,0 +1,18 @@
+name: Init Workflow
+
+on:
+  workflow_call:
+
+jobs:
+  init:
+    name: Init
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔄 Init Cache Default
+        uses: ./.github/actions/npm-cache

.github/workflows/01-get-playwright-version.yml

@@ -0,0 +1,31 @@
+---
+name: 🎭 Get playwright version
+
+on:
+  workflow_call:
+    outputs:
+      version:
+        description: "Current playwright version"
+        value: ${{ jobs.playwright-version.outputs.version }}
+
+jobs:
+  playwright-version:
+    name: Get and save publish version
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.version.outputs.result }}
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: 🪁 Get playwright version
+        uses: actions/github-script@v7
+        id: version
+        with:
+          result-encoding: string
+          script: |
+            const { default: getPlaywrightVersion } = await import('${{ github.workspace }}/.github/scripts/get-playwright-version.js');
+            return await getPlaywrightVersion();

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

@@ -0,0 +1,50 @@
+name: 🎭 Playwright Screen Reader
+
+on:
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+
+permissions:
+  actions: write
+  contents: write
+
+jobs:
+  playwright-screen-reader:
+    name: 🧪🎭 - screen-reader - ${{ matrix.os }} - ${{ matrix.framework }}
+    runs-on: ${{ matrix.os }}
+    container:
+      image: mcr.microsoft.com/playwright:v${{ inputs.version }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [windows-latest]
+        framework: [react]
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: 🔄 Init Playwright
+        uses: ./.github/actions/playwright-cache
+        with:
+          os: ${{ matrix.os }}
+
+      - name: 👩‍🔬 Test showcase with Playwright 🎭
+        working-directory: ./screen-reader-test
+        env:
+          HOME: /root
+        run: |
+          npm run test:screen-reader:${{ matrix.os }} 
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.framework }}-screen-reader-${{ matrix.os }}
+          path: ./screen-reader-test/${{ matrix.framework }}-showcase/test-results
+          retention-days: 30

.github/workflows/default.yml

@@ -0,0 +1,27 @@
+---
+name: Default Pipeline
+
+on:
+  pull_request:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  init:
+    uses: ./.github/workflows/00-init.yml
+
+  init-playwright:
+    uses: ./.github/workflows/00-init-playwright.yml
+
+  get-playwright-version:
+    uses: ./.github/workflows/01-get-playwright-version.yml
+    needs: [init]
+
+
+  test-screen-reader:
+    uses: ./.github/workflows/02-e2e-screen-reader.yml
+    needs: [init-playwright, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+