playwright-mysite.yml

# ╔═════════════════════════════════════════════════════════════╗
# ║  We use three Playwright configs to keep local and CI       ║
# ║  environments separate. Locally, tests run headed and slow, ║
# ║  one at a time for easy watching. CI runs tests in parallel ║
# ║  with retries set and no need to check process.env.CI.      ║
# ║                                                             ║
# ║  This avoids mistakes from env mix-ups and simplifies setup.║
# ║                                                             ║
# ║  The configs are:                                           ║
# ║  - playwright.config.ts (local)                             ║
# ║  - playwright.actions.config.ts (GitHub Actions)            ║
# ║  - playwright.actions-db.config.ts (API tests)              ║
# ║                                                             ║
# ║  A GitHub Actions variable selects which CI config to use.  ║
# ╚═════════════════════════════════════════════════════════════╝

# Note:
# Tests are triggered on both push and pull_request events,
# which results in duplicate runs (for PRs).
#
# Since I push directly to 'main' for most updates (except Dependabot PRs),
# this setup works fine for me.
#
# I have GitGuardian configured both through YAML and as a GitHub App integration.
# This results in redundant checks, but I wanted to see how both approaches work.

# Race Conditions on Concurrent PRs
# If multiple pull requests are open and their workflows try to access the the branch
# the Allure reports live in, you might hit a race condition when one of the workflows
# tries to push the report back to that repo. `! [remote rejected] live-reports -> live-reports
# (cannot lock ref 'refs/heads/live-reports': is locked`
# In my case it's multiple Dependabot PRs all being opened at the same time that cause this,
# and it's not a big deal for me. I just merge whichever one passed clean, and the others
# sort themselves out by automatically rebasing and rerunning.
# UPDATE: I've since worked around this issue..
# by adding "continue-on-error: true" to the step that deploys the Allure report.
# Now if the report fails to deploy, the workflow doesn't fail.
# I can still see the HTML report in the workflow summary page anyways.

# GitHub Contexts: https://docs.github.com/en/enterprise-cloud@latest/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#github-context

name: Playwright GitHub Page (manual, pr/push)
env:
  PLAYWRIGHT_ACTIONS_CONFIG: ${{ vars.PLAYWRIGHT_ACTIONS_CONFIG }}
on:
  push:
  pull_request:
  workflow_dispatch:

jobs:
  Playwright-GitHub-Page-Test:
    runs-on: ubuntu-latest
    timeout-minutes: 10 #I'd set a timeout in case something hangs, which I've seen happen. This could waste your GitHub Actions minutes.
    steps:
      - name: Set Time Zone
        uses: szenius/set-timezone@v2.0
        with:
          timezoneLinux: "America/Los_Angeles" # GitHub Actions runner is in UTC time zone by default, which can cause date assertions to fail

      - name: Print Date and Time
        run: date

      - name: Message
        run: |
          echo "This action executes Playwright tests against pull requests and commits"
          echo "Configuration: playwright.actions.config.ts"
          echo "User: [${{ github.actor }}] initiated this test run"
          echo "Commit subject: ${{ github.event.commits[0].message }}"
          echo "Commit hash: ${{ github.sha }}"
          echo "Branch: ${{ github.ref_name }}"
          echo "GitHub workflow run: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
          echo "🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪"

      # Check out primary repo where I will start a server locally in the GH Runner environment
      - name: Checkout Website Repo
        uses: actions/checkout@v6.0.3

      # Check out second repo where Playwright scripts live
      - name: Checkout Playwright Repo
        uses: actions/checkout@v6.0.3
        with:
          repository: readytotest/test-playwright
          #token: ${{ secrets.GH_PAT }} If checking out a private repo, create a secret called `GH_PAT` that contains your personal access token
          ref: main
          path: ./test-playwright #Copy the Playwright repo to this directory within the main repo
          # Note: Don't worry, it won't copy to your real repo on the GitHub site.. I mean in the
          # "virtual repo", basically a directory in the GitHub Actions runner environment.

      # Check out third repo where Allure report history is stored
      - name: Checkout Allure Report Repo
        uses: actions/checkout@v6.0.3
        with:
          repository: readytotest/playwright-allure-report
          ref: live-reports
          path: ./playwright-allure-report/history # This is the destination path in the GitHub Actions runner

      - name: Setup Node.js environment with most recent version
        uses: actions/setup-node@v6.4.0
        with:
          node-version: "latest"
        #actions/setup-node installs Node.js globally for the entire GitHub Actions runner,
        #not just within a specific directory or repository.
        #That's why I didn't specify a working directory in this step.

      - name: Install dependencies
        working-directory: ./test-playwright #This is the sub-directory where the Playwright repo was copied to
        run: npm ci

      - name: Start Local Webserver in GH Runner environment (http://localhost:3000)
        run: | #We need the & sleep 1 or it will hang on this step and won't progress
          chmod +x start-server.sh
          ./start-server.sh &
          sleep 1

      - name: CD to test-playwright directory, print node version, and list contents
        run: |
          cd test-playwright
          node -v
          ls

      # Install OpenJDK 11 for Allure to work
      # Previously, I was manually installing Java, as I didn't even think about there being a
      # Marketplace action. Anyways, the manual install failed today with a 404, so that's what
      # got me to thinking there must be a Marketplace action.
      - name: Setup Java JDK
        uses: actions/setup-java@v5.2.0
        with:
          distribution: "temurin"
          java-version: "11"

      - name: Install Playwright Browsers
        working-directory: ./test-playwright #This is the sub-directory where the Playwright repo was copied to
        run: npx playwright install --with-deps
        #Yeah we need this step!

      - name: Run Playwright tests
        working-directory: ./test-playwright #This is the sub-directory where the Playwright repo was copied to
        #Tests against http://localhost:3000
        run: npx playwright test --config $PLAYWRIGHT_ACTIONS_CONFIG

      - name: Upload Built-In HTML Report (Not Allure) to GitHub Actions Workflow Run Summary Page
        uses: actions/upload-artifact@v7.0.1
        if: always()
        with:
          name: Built-in Playwright HTML Report Test Results + Video
          path: ./test-playwright/playwright-report/
          if-no-files-found: warn
          retention-days: 7

      # https://allurereport.org/docs/history-and-retries/#tests-history
      # https://allurereport.org/docs/integrations-github/#build-test-report
      # https://github.com/peaceiris/actions-gh-pages
      # Build the new Allure Report
      - name: Build test report
        uses: simple-elf/allure-report-action@v1.14
        if: always()
        with:
          gh_pages: ./playwright-allure-report/history # The path to the previous report history in the playwright-allure-report repo(subdir)
          allure_results: ./test-playwright/allure-results # Path to the current test results in the test-playwright repo (subdir)
          allure_history: ./allure-report # Directory to save the new Allure report in the readytotest.github.io repo

      # Deploy Allure Report to GitHub Pages https://readytotest.github.io/playwright-allure-report/
      # Don't forget to add the token to your Actions secrets in the repo the YAML is running in
      # AND ---> if you use Dependabot like I do, you need to add that same token to the Dependabot secrets as well
      # OR ---> All your Dependabot PRs will fail because it can't access the token!!!!
      - name: Deploy Allure Report to GitHub Pages (in playwright-allure-report repo)
        uses: peaceiris/actions-gh-pages@v4.1.0
        if: always()
        continue-on-error: true # This is a workaround to the race condition issue.
        # If it can't push the Allure report the whole run won't fail.
        # You'll just have to look at the HTML report uploaded as an artifact to the workflow summary page.
        # See the README on the playwright-allure-report repo for more details about the race condition.
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN_ALLURE }}
          external_repository: readytotest/playwright-allure-report
          publish_branch: live-reports # This is the branch in the Allure repo where the new Allure report is copied TO!
          publish_dir: ./allure-report # This is the directory of the readytotest.github.io repo where the new Allure report is copied FROM!
          keep_files: false # If you have keep_files at false, it will delete the files in the branch you are using for GitHub Pages.
          # I set it at false so there wouldn't be a ton of directories cluttering up the repo and it doesn't appear to affect history.
          # Even if you don't keep the files, git still tracks those deleted files and the repo keeps getting bigger.
          # Eventually the Allure repo is going to hit the repo size limit.
          # https://docs.github.com/en/repositories/working-with-files/managing-large-files/about-large-files-on-github#repository-size-limits
          # I ended up creating a "REPO-CLEAN-O-MATIC" workflow to run on that Allure repo which rewrites the git history on a cron schedule to remove a list of file types.

      - name: Check Allure repository size
        if: always()
        continue-on-error: true # Want the workflow to continue and not flag as failed (even if this step fails)
        run: |
          size=$(curl -s "https://api.github.com/repos/readytotest/playwright-allure-report" | jq -r '.size')
          size_mb=$(echo "scale=2; $size / 1024" | bc)
          size_gb=$(echo "scale=3; $size / 1024 / 1024" | bc)
          echo "Current Repo Size: ${size_mb} MB (or ${size_gb} GB if you prefer)"

      # https://tools.slack.dev/slack-github-action/sending-techniques/sending-data-slack-incoming-webhook/
      - name: Send to Slack channel
        if: always()
        uses: slackapi/slack-github-action@v3.0.3
        with:
          webhook: ${{ secrets.PLAYWRIGHT_SLACK }}
          webhook-type: incoming-webhook
          payload: |
            text: "*Test Summary*\n*Commit by:* ${{ github.actor }}\n*Commit hash:* ${{ github.sha }}\n*Test Status:* ${{ job.status }}\n*Branch:* ${{ github.ref_name }}\n*GitHub Workflow:*\nhttps://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}\n*Allure Report:*\nhttps://readytotest.github.io/playwright-allure-report/"
            blocks:
              - type: "section"
                text:
                  type: "mrkdwn"
                  text: "*Playwright Test Summary*\n*Commit by:* ${{ github.actor }}\n*Commit hash:* ${{ github.sha }}\n*Job Status:* ${{ job.status }}\n*Branch:* ${{ github.ref_name }}\n*GitHub Workflow:*\nhttps://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}\n*Allure Report:*\nhttps://readytotest.github.io/playwright-allure-report/"