tests: setup playwright (#4032)

Initial setup of playwright

See #4033 for a test demoing the "result" and good practice.

.deployment.config.json

@@ -119,7 +119,7 @@
       "s3": {
         "bucket": "{terraform.infra.infra.bucket_binaries}",
         "directory": "proda/StaticCDN/atomic/v$[ATOMIC_MINOR_VERSION]/storybook",
-        "source": "packages/atomic/storybook-static",
+        "source": "packages/atomic/dist-storybook",
         "parameters": {
           "acl": "public-read"
         }

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

@@ -0,0 +1,18 @@
+name: 'Playwright Atomic'
+description: 'Run Playwright tests for Atomic'
+runs:
+  using: composite
+  steps:
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+      shell: bash
+    - name: Run Playwright tests
+      run: npx playwright test
+      working-directory: packages/atomic
+      shell: bash
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: atomic-playwright-report
+        path: packages/atomic/playwright-report/
+        retention-days: 5

.github/actions/publish-pr-review-site/action.yml

@@ -24,7 +24,7 @@ runs:
         else
           git fetch origin "refs/heads/${{github.event.pull_request.number}}"
           git switch "${{github.event.pull_request.number}}"
-          git pull
+          git reset --hard main
         fi
       working-directory: prs
       shell: bash
@@ -38,20 +38,27 @@ runs:
       if: ${{inputs.copy}}
       run: |
         cp -R packages/atomic/dist-storybook prs/${{github.event.pull_request.number}}
+        cp -R packages/atomic/playwright-report prs/${{github.event.pull_request.number}}
       shell: bash
     - name: 'Commit/Push'
       run: |
         git config user.name "GitHub Actions Bot"
         git config user.email "<>"
         git add "${{github.event.pull_request.number}}"
         git commit -m "Add ${{github.sha}}"
-        git push --set-upstream origin ${{github.event.pull_request.number}}
+        git push --set-upstream origin ${{github.event.pull_request.number}} -f
       working-directory: prs
       shell: bash
-    - name: 'Open & put PR in merge queue'
-      run: |
-        gh pr new -f
-        gh pr merge
+    - name: 'Ensure PR exists'
+      run: gh pr new -f
+      continue-on-error: true
+      env:
+        GH_TOKEN: ${{inputs.token}}
+      working-directory: prs
+      shell: bash
+    - name: 'Merge PR'
+      run: gh pr merge
+      continue-on-error: true
       env:
         GH_TOKEN: ${{inputs.token}}
       working-directory: prs

.github/workflows/prbot.yml

@@ -8,9 +8,9 @@ jobs:
   report-size:
     if: github.event_name == 'pull_request'
     name: 'Report bundle size'
+    environment: PR Artifacts
     runs-on: ubuntu-latest
     env:
-      GITHUB_CREDENTIALS: ${{ secrets.GITHUB_TOKEN }}
       NODE_OPTIONS: --max_old_space_size=4096
     steps:
       - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4
@@ -20,7 +20,15 @@ jobs:
         with:
           node-version-file: '.nvmrc'
       - run: npm ci
+      - name: Generate a token
+        id: generate-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.GH_APP_ID }}
+          private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
       - run: npm run pr:report
+        env:
+          GITHUB_CREDENTIALS: ${{ steps.generate-token.outputs.token }}
   build:
     name: 'Build'
     runs-on: ubuntu-latest
@@ -29,11 +37,6 @@ jobs:
       - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4
       - uses: ./.github/actions/build
       - uses: ./.github/actions/commit-generated-files
-      - uses: ./.github/actions/publish-pr-review-site
-        if: github.event_name == 'pull_request'
-        with:
-          token: ${{ secrets.GH_PUBLISH_TOKEN }}
-          copy: true
   lint-check:
     name: 'Check with linter'
     needs: build
@@ -58,6 +61,30 @@ jobs:
       - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4
       - uses: ./.github/actions/setup
       - uses: ./.github/actions/e2e-atomic-csp
+  playwright-atomic:
+    name: 'Run Playwright tests for Atomic'
+    environment: PR Artifacts
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4
+      - uses: ./.github/actions/setup
+      - run: npm run build
+      - run: cat packages/atomic/dist/atomic/atomic.esm.js
+      - uses: ./.github/actions/playwright-atomic
+      - name: Generate a token
+        id: generate-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.GH_APP_ID }}
+          private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
+          owner: coveo
+          repo: ui-kit-prs
+      - uses: ./.github/actions/publish-pr-review-site
+        if: ${{ always() && github.event_name == 'pull_request'}}
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+          copy: true
   e2e-atomic-test:
     name: 'Run e2e tests on Atomic'
     needs: build
@@ -268,6 +295,7 @@ jobs:
       - 'build'
       - 'lint-check'
       - 'unit-test'
+      - 'playwright-atomic'
       - 'e2e-atomic-test'
       - 'e2e-atomic-csp-test'
       - 'e2e-quantic'
@@ -302,6 +330,7 @@ jobs:
       - 'build'
       - 'lint-check'
       - 'unit-test'
+      - 'playwright-atomic'
       - 'e2e-atomic-test'
       - 'e2e-atomic-screenshots'
       - 'e2e-atomic-react-test'

.vscode/extensions.json

@@ -4,6 +4,6 @@
     "esbenp.prettier-vscode",
     "redhat.vscode-yaml",
     "streetsidesoftware.code-spell-checker",
-    "orta.vscode-jest"
+    "ms-playwright.playwright"
   ]
 }