chore: update playwright in ci to run only on aria changes

.config/.jscpd.json

@@ -35,6 +35,7 @@
 		"**/test-results/**",
 		"**/tests/**",
 		"**/tsconfig.json",
+		"**/e2e/**/*.spec.ts",
 		"packages/components/scripts/post-build/components.ts",
 		"packages/components/src/components/**/*.spec.tsx",
 		"packages/components/src/components/**/index.html",

.github/workflows/02-e2e-patternhub.yml

@@ -0,0 +1,77 @@
+name: 🎭 Playwright E2E
+
+on:
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      path:
+        required: false
+        type: string
+
+permissions:
+  actions: write
+  contents: write
+
+jobs:
+  playwright-patternhub:
+    name: 🧪🎭 - patternhub
+    runs-on: ubuntu-24.04 # Use Ubuntu 24.04 explicitly
+    container:
+      image: mcr.microsoft.com/playwright:v${{ inputs.version }}
+      options: --user 1001
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: ⏬ Download foundations build
+        uses: actions/download-artifact@v4
+        with:
+          name: db-ux-foundations-build
+          path: packages/foundations/build
+
+      - name: ⏬ Download output
+        uses: actions/download-artifact@v4
+        with:
+          name: db-ux-output
+          path: output
+
+      - name: ⏬ Download components styles build
+        uses: actions/download-artifact@v4
+        with:
+          name: db-ux-components-build
+          path: packages/components/build
+
+      - name: ⏬ Download patternhub
+        uses: actions/download-artifact@v4
+        with:
+          name: db-ux-patternhub
+          path: build-showcases/patternhub
+
+      # We test everything for patternhub and main branch
+      - name: 👩‍🔬 Test showcase with Playwright 🎭
+        shell: bash
+        env:
+          NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }}
+        run: |
+          mkdir -p ./build-showcases${{ inputs.path }}
+          cp -RT ./build-showcases/patternhub ./build-showcases${{ inputs.path }}
+          npm run test:e2e --workspace=patternhub
+
+      - name: 🔣 Print GitHub Report
+        if: failure()
+        shell: bash
+        run: |
+          npx playwright merge-reports --reporter github ./blob-report
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: patternhub-playwright-results
+          path: ./showcases/patternhub/test-results
+          retention-days: 30

.github/workflows/02-e2e-regenerate.yml

@@ -78,7 +78,8 @@ jobs:
             cp --recursive --no-target-directory ./build-showcases/${{ inputs.type }} ./build-showcases${{ inputs.path }}
             npm run regenerate:screenshots --workspace=patternhub
           else
-            npm run regenerate:screenshots --workspace=react-showcase
+            npm run regenerate:visual-snapshots --workspace=react-showcase
+            npm run regenerate:aria-snapshots --workspace=react-showcase
           fi
 
       - name: 🆙 Upload components

.github/workflows/02-e2e-showcases.yml

@@ -9,9 +9,16 @@ on:
       showcase:
         required: true
         type: string
-      path:
-        required: false
-        type: string
+    outputs:
+      aria-snapshots-changed:
+        description: "If aria snapshots changed in current PR"
+        value: ${{ jobs.playwright-showcases.outputs.aria-snapshots-changed }}
+      aria-snapshots-changed-to-main:
+        description: "If aria snapshots changed to main branch"
+        value: ${{ jobs.playwright-showcases.outputs.aria-snapshots-changed-to-main }}
+      visual-snapshots-changed:
+        description: "If visual snapshots changed"
+        value: ${{ jobs.playwright-showcases.outputs.visual-snapshots-changed }}
 
 permissions:
   actions: write
@@ -27,11 +34,18 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6]
-        shardTotal: [6]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    outputs:
+      aria-snapshots-changed: ${{ steps.aria-snapshots.outputs.aria-snapshots-changed }}
+      aria-snapshots-changed-to-main: ${{ steps.aria-snapshots.outputs.aria-snapshots-changed-to-main }}
+      visual-snapshots-changed: ${{ steps.visual-snapshots.outputs.visual-snapshots-changed }}
     steps:
       - name: ⏬ Checkout repo
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # fetch all history for all branches
+          fetch-tags: false
 
       - name: 🔄 Init Cache
         uses: ./.github/actions/npm-cache
@@ -60,21 +74,50 @@ jobs:
           name: db-ux-${{ inputs.showcase }}
           path: build-showcases/${{ inputs.showcase }}
 
-      - name: 🧴 Copy patternhub testing app
-        if: inputs.path
-        shell: bash
-        run: |
-          mkdir --parents ./build-showcases${{ inputs.path }}
-          cp --recursive --no-target-directory ./build-showcases/${{ inputs.showcase }} ./build-showcases${{ inputs.path }}
-
+      # We test everything for patternhub and main branch
       - name: 👩‍🔬 Test showcase with Playwright 🎭
         shell: bash
+        if: github.event.pull_request == null
         env:
           NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }}
         run: |
-          ls ./build-showcases${{ inputs.path }}
           npm run test:e2e --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
+      # We check if aria-snapshots were changed
+      - name: 👩‍🔬 Test aria-snapshots with Playwright 🎭
+        id: aria-snapshots
+        shell: bash
+        if: github.event.pull_request != null
+        run: |
+          npm run test:aria-snapshots --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots
+          OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-aria.ts)
+          echo "aria-snapshots-changed=$OUTPUT" >> $GITHUB_OUTPUT
+          OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-main-aria.ts)
+          echo "aria-snapshots-changed-to-main=$OUTPUT" >> $GITHUB_OUTPUT
+
+      - name: 👩‍🔬 Test axe-core with Playwright 🎭
+        shell: bash
+        if: github.event.pull_request != null
+        run: |
+          npm run test:axe-core --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: 👩‍🔬 Test visual-snapshots with Playwright 🎭
+        id: visual-snapshots
+        shell: bash
+        if: github.event.pull_request != null
+        run: |
+          npm run test:visual-snapshots --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots
+          OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-visual.ts)
+          echo "visual-snapshots-changed=$OUTPUT" >> $GITHUB_OUTPUT
+
+      - name: 👩‍🔬 Test a11y-checker with Playwright 🎭
+        shell: bash
+        if: |
+          github.event.pull_request != null &&
+          steps.aria-snapshots.outputs.aria-snapshots-changed-to-main=='true'
+        run: |
+          npm run test:a11y-checker --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
       - name: 🔣 Print GitHub Report
         if: failure()
         shell: bash
@@ -88,11 +131,3 @@ jobs:
           name: ${{ inputs.showcase }}-playwright-results-${{ matrix.shardIndex }}
           path: ./showcases/${{ inputs.showcase }}/test-results
           retention-days: 30
-
-      - name: 🆙 Upload aChecker results
-        if: failure()
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.showcase }}-showcase-achecker-results-${{ matrix.shardIndex }}
-          path: ./showcases/${{ inputs.showcase }}-showcase/results
-          retention-days: 30

.github/workflows/default.yml

@@ -143,12 +143,11 @@ jobs:
       showcase: vue-showcase
 
   test-showcase-patternhub:
-    uses: ./.github/workflows/02-e2e-showcases.yml
+    uses: ./.github/workflows/02-e2e-patternhub.yml
     needs: [build-showcase-patternhub, get-playwright-version]
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
       path: ${{ needs.build-showcase-patternhub.outputs.path }}
-      showcase: patternhub
 
   regenerate-snapshots-components:
     if: always() && needs.test-components.result == 'failure'
@@ -180,14 +179,24 @@ jobs:
         get-playwright-version
       ]
 
+  # This job runs only if aria-snapshots were changed compared to main or if it runs on main branch
   test-screen-reader:
+    if: |
+      needs.test-showcase-react.outputs.aria-snapshots-changed-to-main == 'true' ||
+      github.event.pull_request == null
     uses: ./.github/workflows/02-e2e-screen-reader.yml
-    needs: [build-showcase-react, init-playwright, get-playwright-version]
+    needs: [test-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')
+    if: |
+      needs.test-showcase-angular.outputs.aria-snapshots-changed == 'true' ||
+      needs.test-showcase-angular.outputs.visual-snapshots-changed == 'true' ||
+      needs.test-showcase-react.outputs.aria-snapshots-changed == 'true' ||
+      needs.test-showcase-react.outputs.visual-snapshots-changed == 'true' ||
+      needs.test-showcase-vue.outputs.aria-snapshots-changed == 'true' ||
+      needs.test-showcase-vue.outputs.visual-snapshots-changed == 'true'
     uses: ./.github/workflows/02-e2e-regenerate.yml
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
@@ -241,7 +250,7 @@ jobs:
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
           resultTestScreenReader="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
-             [[ $resultTestScreenReader == "success" ]] && \
+             [[ $resultTestScreenReader == "success" || $resultTestScreenReader == "skipped" ]] && \
              [[ $resultTestShowcaseStencil == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \

.github/workflows/release.yml

@@ -130,12 +130,11 @@ jobs:
       showcase: vue-showcase
 
   test-showcase-patternhub:
-    uses: ./.github/workflows/02-e2e-showcases.yml
+    uses: ./.github/workflows/02-e2e-patternhub.yml
     needs: [build-showcase-patternhub, get-playwright-version]
     with:
-      path: ${{ needs.build-showcase-patternhub.outputs.path }}
       version: ${{ needs.get-playwright-version.outputs.version }}
-      showcase: patternhub
+      path: ${{ needs.build-showcase-patternhub.outputs.path }}
 
   test-screen-reader:
     uses: ./.github/workflows/02-e2e-screen-reader.yml

__snapshots__/stack/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml

@@ -0,0 +1,94 @@
+- main:
+  - heading "DBStack" [level=1]
+  - link "Density"
+  - text: Functional
+  - link "Content 1"
+  - text: Content 2 Content 3 (Default) Regular
+  - link "Content 1"
+  - text: Content 2 Content 3 Expressive
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Variant"
+  - text: (Default) Simple
+  - link "Content 1"
+  - text: Content 2 Content 3 Divider
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Gap"
+  - text: none
+  - link "Content 1"
+  - text: Content 2 Content 3 3x-small
+  - link "Content 1"
+  - text: Content 2 Content 3 2x-small
+  - link "Content 1"
+  - text: Content 2 Content 3 x-small
+  - link "Content 1"
+  - text: Content 2 Content 3 (Default) small
+  - link "Content 1"
+  - text: Content 2 Content 3 medium
+  - link "Content 1"
+  - text: Content 2 Content 3 large
+  - link "Content 1"
+  - text: Content 2 Content 3 x-large
+  - link "Content 1"
+  - text: Content 2 Content 3 2x-large
+  - link "Content 1"
+  - text: Content 2 Content 3 3x-large
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Direction"
+  - text: (Default) Column
+  - link "Content 1"
+  - text: Content 2 Content 3 Row
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Wrap"
+  - text: "(Default) No Wrap: Column"
+  - link "Content 1"
+  - text: "Content 2 Content 3 No Wrap: Row"
+  - link "Content 1"
+  - text: "Content 2 Content 3 Wrap: Column"
+  - link "Content 1"
+  - text: "Content 2 Content 3 Wrap: Row"
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Alignment Column"
+  - text: (Default) Stretch
+  - link "Content 1"
+  - text: Content 2 Content 3 Start
+  - link "Content 1"
+  - text: Content 2 Content 3 Center
+  - link "Content 1"
+  - text: Content 2 Content 3 End
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Alignment Row"
+  - text: (Default) Stretch
+  - link "Content 1"
+  - text: Content 2 Content 3 Start
+  - link "Content 1"
+  - text: Content 2 Content 3 Center
+  - link "Content 1"
+  - text: Content 2 Content 3 End
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Justify Content Column"
+  - text: (Default) Start
+  - link "Content 1"
+  - text: Content 2 Content 3 Center
+  - link "Content 1"
+  - text: Content 2 Content 3 End
+  - link "Content 1"
+  - text: Content 2 Content 3 Space-Between
+  - link "Content 1"
+  - text: Content 2 Content 3
+  - link "Justify Content Row"
+  - text: (Default) Start
+  - link "Content 1"
+  - text: Content 2 Content 3 Center
+  - link "Content 1"
+  - text: Content 2 Content 3 End
+  - link "Content 1"
+  - text: Content 2 Content 3 Space-Between
+  - link "Content 1"
+  - text: Content 2 Content 3