test: add guidepup as screen-reader automation (#2556)

* test: add guidepup as screen-reader automation * test: screen-reader in pipeline * test: screen-reader * chore: update frm evaluations * chore: update screen-reader tests * chore: update screen-reader tests * chore: update screen-reader tests * chore: update screen-reader tests * chore: update screen-reader tests * chore: update screen-reader tests * chore: update screen-reader tests * chore: update screen-reader tests * fix: screen reader workflow for ci * fix: screen reader workflow for ci * chore: update from main * fix: issues with typescript * chore: changed tests for guidedpup * fix: issue with angular * fix: snapshots * chore: update from main * chore: update guidepup tests * fix: issue with download showcase * chore: remove webkit from screen reader test * fix: path for recordings * fix: issue with line ending * test: if voiceover.next works for labels * fix: issue with voiceOver test * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * test: guidepup * fix: linting issue * fix: linting issue * test: guidepup * test: guidepup * test: guidepup
db-ui · Jul 24, 2024 · b6ed7a4 · b6ed7a4
1 parent 184432c
commit b6ed7a4
Show file tree

Hide file tree

Showing 35 changed files with 901 additions and 37 deletions.
diff --git a/.github/actions/npm-cache/action.yml b/.github/actions/npm-cache/action.yml
@@ -39,6 +39,12 @@ runs:
         restore-keys: |
           ${{ runner.os }}-node-${{ inputs.nodeVersion }}
 
+    - name: 🎄🎸🥊 Log Cache Hit
+      shell: bash
+      env:
+        HIT: ${{ steps.cache.outputs.cache-hit }}
+      run: echo $HIT
+
     - name: ⏬ NPM ci
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'

diff --git a/.github/actions/playwright-cache/action.yml b/.github/actions/playwright-cache/action.yml
@@ -0,0 +1,44 @@
+---
+name: "Playwright Cache Action"
+description: "Initialize Playwright Cache"
+inputs:
+  version:
+    description: "Playwright version"
+    required: false
+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-${{ inputs.version }}"
+        restore-keys: |
+          ${{ runner.os }}-playwright-
+
+    - name: 🎄🎸🥊 Log Cache Hit
+      shell: bash
+      env:
+        HIT: ${{ steps.playwright-cache.outputs.cache-hit }}
+      run: echo $HIT
+
+    - name: ⏬ Install Playwright's dependencies
+      shell: bash
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: npx --no -- playwright install --with-deps ${{ env.BROWSERS }}
diff --git a/.github/workflows/01-init-playwright.yml b/.github/workflows/01-init-playwright.yml
@@ -0,0 +1,28 @@
+name: 🎭 Init Playwright
+
+on:
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+
+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 Cache Default
+        uses: ./.github/actions/npm-cache
+
+      - name: 🔄 Init Playwright Cache
+        uses: ./.github/actions/playwright-cache
+        with:
+          version: ${{ inputs.version }}
diff --git a/.github/workflows/02-e2e-screen-reader.yml b/.github/workflows/02-e2e-screen-reader.yml
@@ -0,0 +1,67 @@
+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 }} - react - ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [macos-13, windows-2022]
+        shardIndex: [1, 2]
+        shardTotal: [2]
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🦮 Guidepup Setup
+        uses: guidepup/[email protected]
+        with:
+          record: true
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: 🔄 Init Playwright Cache
+        uses: ./.github/actions/playwright-cache
+        with:
+          version: ${{ inputs.version }}
+
+      - name: ⏬ Download react-showcase
+        uses: actions/download-artifact@v4
+        with:
+          name: db-ui-react-showcase
+          path: build-showcases/react-showcase
+
+      - name: 👩‍🔬 Test showcase with Playwright 🎭
+        env:
+          showcase: react-showcase
+        run: |
+          npm run test:screen-reader:${{ env.OS }} --workspace=react-showcase -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-screen-reader-${{ matrix.os }}-${{ matrix.shardIndex }}
+          path: ./showcases/react-showcase/test-results
+          retention-days: 30
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-recordings-${{ matrix.os }}-${{ matrix.shardIndex }}
+          path: ./showcases/react-showcase/recordings
+          retention-days: 30
diff --git a/.github/workflows/default.yml b/.github/workflows/default.yml
@@ -27,6 +27,12 @@ jobs:
     uses: ./.github/workflows/01-build-packages.yml
     needs: [init]
 
+  init-playwright:
+    uses: ./.github/workflows/01-init-playwright.yml
+    needs: [get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+
   build-outputs:
     uses: ./.github/workflows/01-build-outputs.yml
     needs: [build-packages]
@@ -135,6 +141,12 @@ jobs:
       type: patternhub
     needs: [test-showcase-patternhub, get-playwright-version]
 
+  test-screen-reader:
+    uses: ./.github/workflows/02-e2e-screen-reader.yml
+    needs: [build-showcase-react, init-playwright, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+
   regenerate-snapshots:
     if: always() && (needs.test-showcase-angular.result == 'failure' || needs.test-showcase-react.result == 'failure' || needs.test-showcase-vue.result == 'failure')
     uses: ./.github/workflows/02-e2e-regenerate.yml
@@ -169,7 +181,9 @@ jobs:
           resultTestShowcaseReact="${{ needs.test-showcase-react.result }}"
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
+          resultTestScreenReaders="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
+             [[ $resultTestScreenReaders == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
              [[ $resultTestShowcaseVue == "success" ]] && \
@@ -204,7 +218,8 @@ jobs:
         test-showcase-react,
         test-showcase-vue,
         test-showcase-patternhub,
-        test-foundations
+        test-foundations,
+        test-screen-reader
       ]
 
   deploy:

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -25,6 +25,12 @@ jobs:
     uses: ./.github/workflows/01-build-packages.yml
     needs: [init]
 
+  init-playwright:
+    uses: ./.github/workflows/01-init-playwright.yml
+    needs: [get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+
   build-outputs:
     uses: ./.github/workflows/01-build-outputs.yml
     needs: [build-packages]
@@ -112,6 +118,12 @@ jobs:
       version: ${{ needs.get-playwright-version.outputs.version }}
       showcase: patternhub
 
+  test-screen-reader:
+    uses: ./.github/workflows/02-e2e-screen-reader.yml
+    needs: [build-showcase-react, init-playwright, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+
   checks-done:
     if: ${{ always() }}
     runs-on: ubuntu-latest
@@ -132,7 +144,9 @@ jobs:
           resultTestShowcaseReact="${{ needs.test-showcase-react.result }}"
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
+          resultTestScreenReader="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
+             [[ resultTestScreenReader == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
              [[ $resultTestShowcaseVue == "success" ]] && \
@@ -167,7 +181,8 @@ jobs:
         test-showcase-react,
         test-showcase-vue,
         test-showcase-patternhub,
-        test-foundations
+        test-foundations,
+        test-screen-reader
       ]
 
   deploy:

diff --git a/.gitignore b/.gitignore
@@ -44,6 +44,7 @@ packages/components/src/**/*.css.map
 showcases/patternhub/public/iframe-resizer/*
 
 **/test-results/
+**/recordings/
 
 /__snapshots__/**/*-win32.png
 /packages/foundations/assets/icons/functional/tmp/

diff --git a/.jscpd.json b/.jscpd.json
@@ -53,7 +53,8 @@
 		"packages/foundations/src",
 		"**/.output/**",
 		"**/.nuxt/**",
-		"showcases/nuxt-showcase/**"
+		"showcases/nuxt-showcase/**",
+		"**/tests/**"
 	],
 	"absolute": true
 }
diff --git a/.prettierignore b/.prettierignore
@@ -7,3 +7,4 @@ output
 build-outputs
 build-showcases
 packages/foundations/scripts/generate-icon-fonts/styles/**
+**/__snapshots__
diff --git a/output/react/package.json b/output/react/package.json
@@ -22,6 +22,7 @@
     "postbuild": "npm-run-all -p mv:*",
     "regenerate:screenshots": "playwright test -c playwright.config.ts --update-snapshots",
     "test:components": "playwright test -c playwright.config.ts",
+    "test:windows": "playwright test -c playwright.screen-reader.win.ts",
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {