DEV Community

Ayomiku Olatunji John
Ayomiku Olatunji John

Posted on

12 1 1 1 1

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/
Enter fullscreen mode Exit fullscreen mode

Reference links:

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

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
zhivko_kostadinov_1302049 profile image
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'

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs