How To Cache Playwright Browser On Github Actions

Many of us who find ourselves tasked with automating processes, have likely been recommended or suggested Playwright as the go-to tool for our company's automation needs. Playwright empowers us to craft comprehensive end-to-end tests for our software applications, making it an indispensable resource for every software engineer.

For those of us who are already experienced with creating tests using Playwright and wish to seamlessly integrate these tests into our GitHub Actions workflow, the pace at which our tests run can be a source of frustration. Waiting for test results on GitHub Actions can sometimes be a time-consuming process.

The good news is, I've come across an effective solution that can significantly boost the speed and efficiency of running Playwright tests within the GitHub Action Continuous Integration (CI) environment. This enhancement promises to not only save valuable time but also streamline our CI/CD pipeline, resulting in a more productive and reliable development process. In the following sections, I'll outline the steps and strategies to achieve these accelerated Playwright test runs on GitHub Actions.

name: Playwright Tests
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v2
      with:
        node-version: '18.x'
    - name: Get installed Playwright version
      id: playwright-version
      run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
    - name: Cache playwright binaries
      uses: actions/cache@v3
      id: playwright-cache
      with:
        path: |
          ~/.cache/ms-playwright
        key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
    - run: npm ci
    - run: npx playwright install --with-deps
      if: steps.playwright-cache.outputs.cache-hit != 'true'
    - run: npx playwright install-deps
      if: steps.playwright-cache.outputs.cache-hit != 'true'

    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v2
      if: always()
      with:
        name: playwright-test-results
        path: test-results/

Reference links:

1.https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/

2.https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519

Comments

[Zhivko Kostadinov]

The script is not optimal. Why have you installed dependencies twice?
- run: npx playwright install --with-deps
if: steps.playwright-cache.outputs.cache-hit != 'true'
- run: npx playwright install-deps
if: steps.playwright-cache.outputs.cache-hit != 'true'
it's not needed at all. Check the official documentation here -> playwright.dev/docs/browsers#insta...
You can use just:
- run: npx playwright install --with-deps
if: steps.playwright-cache.outputs.cache-hit != 'true'