Cache Playwright Binaries in Github Actions

Introduction

I've been an avid user of Playwright, but the constant wait for binary downloads has been a deterrent. To address this, I've experimented with various strategies, ultimately settling on caching the binaries within GitHub Actions.

However, a significant challenge arises from caching the binaries alone. Playwright relies on certain operating system dependencies, which must be installed if they're not already present. This necessitates careful handling within the steps of my GitHub workflow.

The Workflow

...

- uses: actions/cache@v3
  id: playwright-cache
  with:
    path: |
      ~/.cache/ms-playwright
      key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- name: Install Dependencies
  run: npm ci
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
  if: steps.playwright-cache.outputs.cache-hit != 'true'
- name: Install Playwright Browsers - Cached
  run: npx playwright install-deps
  if: steps.playwright-cache.outputs.cache-hit == 'true'

...

Explanation

This GitHub Actions workflow segment is designed to speed up the process of installing Playwright and its dependencies by caching the binaries in the workflow. Here's a breakdown of each step:

1. Cache Playwright Binaries:

• This step utilizes the actions/cache action to cache Playwright binaries.
• The path parameter specifies the directories to cache, which includes ~/.cache/ms-playwright.
• The key parameter ensures that the cache is uniquely identified based on the operating system and the hash of the package-lock.json file.
• The cache is stored under the identifier playwright-cache.

2. Install Dependencies:

• This step runs npm ci, which installs dependencies based on the package-lock.json file. It ensures a deterministic installation of dependencies.

3. Install Playwright Browsers (if cache miss):

• If the cache is not hit (meaning the Playwright binaries are not found in the cache), this step is executed.
• It uses npx playwright install --with-deps to install Playwright and its dependencies.

4. Install Playwright Browsers - Cached (if cache hit):

• If the cache is hit (meaning the Playwright binaries are found in the cache), this step is executed.
• It runs npx playwright install-deps to install only the operating system dependencies required by Playwright.

The if conditions in steps 3 and 4 ensure that the installation of Playwright and its dependencies is optimized. If the cache is hit, it skips the installation of Playwright binaries and only installs the necessary operating system dependencies. If the cache is missed, it installs both the binaries and dependencies from scratch.

Results

It's great to see that the optimization efforts have resulted in a notable reduction in the workflow execution time, from 2 minutes and 17 seconds down to 1 minute and 59 seconds. This improvement indicates that caching the Playwright binaries and optimizing the installation process have effectively streamlined the workflow, making it more efficient. If further optimization is desired, you might consider exploring additional strategies or fine-tuning the existing ones to achieve even faster execution times.