Fixing Missing Playwright System Dependencies In CI Environment Phase 2

Guys, Let's Talk About Fixing Missing Playwright System Dependencies!

Hey everyone! 👋 Have you ever run into issues with your Playwright tests failing in your CI environment because of missing system dependencies? It's a common problem, and trust me, you're not alone! This article dives deep into how we tackled this issue, specifically focusing on Phase 2 of our project, and how we made sure Playwright runs smoothly in our CI setup. So, let's get started and make our CI environment a happy place for Playwright!

Overview: The Mission

Our mission is simple: fix the incomplete implementation of Phase 2 (#63) by ensuring all the necessary system dependencies for Playwright are correctly installed in our CI environment. This is super important because without these dependencies, our tests are going to fail, and nobody wants that!

Background: The Story So Far

During the implementation of Phase 3 (#64), we hit a snag. We realized that our CI environment was missing some crucial system dependencies that Playwright needs to run. The command we were using, playwright install --with-deps chromium, wasn't cutting it, especially for Ubuntu 24.04 (noble) which we're using in GitHub Actions. It's like trying to bake a cake without all the ingredients – it just won't work!

The Problem: What's Missing?

So, what exactly was missing? Well, a bunch of libraries! Here’s a rundown:

• libgtk-4.so.1
• libgraphene-1.0.so.0
• libwoff2dec.so.1.0.2
• libvpx.so.9
• libevent-2.1.so.7
• libopus.so.0
• Multiple GStreamer libraries (libgstallocators, libgstapp, libgstpbutils, etc.)
• libflite and related speech synthesis libraries
• libavif.so.16
• libharfbuzz-icu.so.0
• And many more...

Yeah, it's a long list! These libraries are essential for Playwright to function correctly, especially when running browsers like Chromium. Without them, Playwright can't launch the browser, and our tests are doomed to fail. Identifying these missing dependencies is the first crucial step in fixing the problem.

Root Cause: Why Are We Missing These Libraries?

The root cause boils down to this: our current CI configuration isn't robust enough. We were relying on this command:

- name: Install Playwright browsers
  run: playwright install --with-deps chromium

While this command should install the necessary dependencies, it seems like it's not sufficient for Ubuntu 24.04. It's like expecting a single tool to fix every problem – sometimes, you need a more comprehensive approach. Understanding the limitations of the current setup is key to finding a better solution.

Proposed Solution: Our Game Plan

Okay, so we know what the problem is. Now, let's talk solutions! We came up with three potential approaches to tackle this issue. Each option has its own pros and cons, so let's dive in!

Option A: The Playwright GitHub Action Way

Our first idea was to use the official Playwright GitHub Action. This action is designed to set up Playwright in a CI environment, and it should handle all the dependency installation for us. Think of it as the all-in-one solution. Here's how it looks:

- name: Install Playwright Browsers
  uses: microsoft/playwright-github-action@v1

The beauty of this approach is its simplicity. By using the official action, we're leveraging the expertise of the Playwright team, who have likely encountered and solved this problem before. It's like having a pre-built tool designed specifically for the job.

Option B: The Explicit Installation Route

Our second option involves explicitly installing the missing system packages. This means we'd need to list out all the required libraries and install them using apt-get. It's a bit more manual, but it gives us greater control over what's being installed. Here's the code:

- name: Install Playwright dependencies
  run: |
    sudo apt-get update
    sudo apt-get install -y libgtk-4-1 libgraphene-1.0-0 libwoff1 \
      libvpx7 libevent-2.1-7 libopus0 \
      gstreamer1.0-libav gstreamer1.0-plugins-bad gstreamer1.0-plugins-base \
      gstreamer1.0-plugins-good gstreamer1.0-plugins-ugly \
      libflite1 libavif15 libharfbuzz-icu0

This approach is like building our own custom toolset. We have to be precise and make sure we include all the necessary libraries, but we also have the flexibility to tailor the installation to our specific needs. It’s a great option if we want to understand exactly what’s being installed and have more control over the process.

Option C: The Docker Container Approach

Our third option is to use Playwright's Docker image. Docker containers provide a consistent and isolated environment, which can be a lifesaver in CI. Playwright's Docker image comes pre-configured with all the necessary dependencies, so we wouldn't have to worry about installing them ourselves. It’s like having a perfectly prepared workstation ready to go.

container:
  image: mcr.microsoft.com/playwright:v1.40.0-noble

This approach is excellent for ensuring consistency across different environments. By using a Docker image, we can be confident that Playwright will run the same way in CI as it does on our local machines. It's a great way to eliminate the