e2e.yml

name: 🤖 End-to-End Tests
on:
  push:
    branches: [main]
  pull_request:
    types:
      - opened
      - synchronize
      - labeled

env:
  NODE_ENV: testing
  PR_NUMBER: ${{ github.event.pull_request.number }}
  NETLIFY_MAIN_URL: 'https://spirit-design-system.netlify.app/'
  NETLIFY_DEPLOY_PREVIEW_URL: 'https://deploy-preview-${{ github.event.pull_request.number }}--spirit-design-system.netlify.app/'

jobs:
  has-label:
    name: 🏷️ Analyzing Labels
    runs-on: ubuntu-latest
    outputs:
      e2e: ${{ steps.has-label.outputs.labeled-run-visual-tests }}
    steps:
      - name: Cancel Previous Runs
        uses: styfle/cancel-workflow-action@0.12.1
        with:
          access_token: ${{ github.token }}
      - uses: actions/checkout@v4
      - name: Labeled to e2e
        id: has-label
        uses: DanielTamkin/HasLabel@v1.0.4
        with:
          contains: 'run-visual-tests'

  test:
    name: 🖥️ End-to-End Testing
    needs: has-label
    if: ${{ needs.has-label.outputs.e2e || (github.ref == 'refs/heads/main') }}
    runs-on: ubuntu-24.04
    timeout-minutes: 60

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node and Install Dependencies
        uses: ./.github/actions/setup-install

      # Wait for the Netlify preview URL to be ready
      - name: Wait for Netlify Deploy
        uses: mmazzarolo/wait-for-netlify-action@8a7a8d8cf5b313c916d805b76cc498380062d268
        id: get-netlify-preview-url
        continue-on-error: true
        with:
          site_id: ${{ secrets.NETLIFY_SITE_SPIRIT_DESIGN_SYSTEM }}
          max_timeout: 1
        env:
          NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
      # The Netlify preview URL is now available
      # as `steps.get-netlify-preview-url.outputs.url`

      - name: Get Site URL
        id: get-site-url
        env:
          # fallback to main url if the main branch is deployed
          NETLIFY_DEPLOYED_URL: ${{ env.PR_NUMBER && env.NETLIFY_DEPLOY_PREVIEW_URL || env.NETLIFY_MAIN_URL }}
        run: echo "site_url=${{ env.NETLIFY_DEPLOYED_URL }}" >> "$GITHUB_OUTPUT"

      - name: Run Playwright tests
        uses: docker://mcr.microsoft.com/playwright:v1.49.0-jammy
        with:
          args: 'sh -c "corepack install && corepack enable && yarn test:e2e"'
        env:
          WEBSITE_URL: ${{ steps.get-netlify-preview-url.outcome == 'success' && steps.get-netlify-preview-url.outputs.url || steps.get-site-url.outputs.site_url }}

      - uses: actions/upload-artifact@v4
        if: failure()
        id: artifact-upload-step
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

      - name: Comment PR with artifact URL
        if: failure()
        uses: actions/github-script@v7
        with:
          script: |
            const issue_number = context.issue.number;
            const repo = context.repo.repo;
            const owner = context.repo.owner;

            await github.rest.issues.createComment({
              owner,
              repo,
              issue_number,
              body: `Here is the URL of the uploaded artifact: ${{ steps.artifact-upload-step.outputs.artifact-url }}`
            });
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Notify Slack when failure
        id: Slack
        uses: slackapi/slack-github-action@v1.27.1
        if: failure()
        with:
          channel-id: ${{ secrets.SLACK_CHANNEL_ID }} # Slack channel-id of #spirit-design-system-notifications_en
          payload: |
            {
              "attachments": [
                {
                  "color": "#ff0000",
                  "blocks": [
                    {
                      "type": "header",
                      "text": {
                        "type": "plain_text",
                        "text": ":boom: GitHub Action failed",
                        "emoji": true
                      }
                    },
                    {
                      "type": "section",
                      "text": {
                        "type": "mrkdwn",
                        "text": "*Pull request title:* `${{ github.event.pull_request.title }}`"
                      }
                    },
                    {
                      "type": "section",
                      "text": {
                        "type": "mrkdwn",
                        "text": "*E2E tests result:* `${{ job.status }}`"
                      }
                    },
                    {
                      "type": "actions",
                      "elements": [
                        {
                          "type": "button",
                          "text": {
                            "type": "plain_text",
                            "text": ":github: Open Pull request"
                          },
                          "url": "${{ github.event.pull_request.html_url }}"
                        },
                        {
                          "type": "button",
                          "text": {
                            "type": "plain_text",
                            "text": ":github: Open failed GitHub Action"
                          },
                          "url": "${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
                        },
                        {
                          "type": "button",
                          "text": {
                            "type": "plain_text",
                            "text": ":github: Download Report"
                          },
                          "url": "${{ steps.artifact-upload-step.outputs.artifact-url }}"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_NOTIFICATIONS_TOKEN }} # Webhook from Slack Application
          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK