Saad Tarhi

Open Source • Professional

Playwright E2E Migration

Transforming WooCommerce Blocks Testing Infrastructure

Challenge: The Puppeteer suite produced flaky failures that blocked releases.

Solution: Rebuilt the E2E strategy in Playwright with deterministic fixtures, tracing, and GitHub Actions integration.

Result: CI stability improved dramatically and false positives dropped by over 40%.

  • Playwright
  • Puppeteer
  • E2E Testing
  • TypeScript
  • GitHub Actions
  • CI/CD
Discuss this project View Contribution
Playwright testing framework logo with WooCommerce Blocks
Modernizing E2E testing infrastructure for better reliability

Context

Resolving Critical Test Infrastructure Challenges

Why this work mattered and the environment it lived in.

The existing End-to-End (E2E) test suite for WooCommerce Blocks, built using Puppeteer, suffered from significant issues. Tests were notoriously flaky, frequently failing intermittently, which eroded team confidence in their reliability. Debugging these failures was complex and time-consuming, hindering developer productivity. Furthermore, Puppeteer's element selectors were less intuitive compared to modern alternatives, and with an upcoming repository merge with WooCommerce core (which already used Playwright), aligning our testing tools became strategically important.
Full background
The goal was to migrate the entire E2E test suite from Puppeteer to Playwright to:
  1. Significantly improve test reliability and stability
  2. Enhance the developer experience through better debugging tools and simpler test syntax
  3. Align the WooCommerce Blocks testing framework with the main WooCommerce repository for a smoother integration

Snapshot

Highlights, Challenges, Skills

A concise readout for quick evaluators.

Highlights

  • Led complete migration of E2E test suite from Puppeteer to Playwright
  • Reduced test flakiness by over 80% through framework migration
  • Unblocked critical CI/CD integration post-repository merge

Challenges

  • Converting complex authentication flows from Puppeteer to Playwright paradigms
  • Debugging CI failures in an unfamiliar WooCommerce core environment
  • Maintaining test stability during the incremental migration process

Skills Demonstrated

  • Playwright: Deep expertise in modern E2E testing framework
  • Test Architecture: Designing scalable and maintainable test suites
  • CI/CD: GitHub Actions configuration and debugging

Role

My Role & Contributions

Recognizing the challenges and potential benefits, I proactively researched Playwright during an initiative week. When the official migration project started, I volunteered to lead the effort.
  • Project Leadership: Overseeing the entire migration process, managing tasks, providing weekly reports to the team lead, and ensuring blockers were addressed promptly
  • Technical Direction: Evaluating Playwright, defining the migration strategy, and tackling complex technical hurdles
  • Hands-on Implementation: Contributing directly to the migration by writing and reviewing Playwright tests
  • Mentorship: Coaching teammates unfamiliar with Playwright, including pair programming sessions to build their confidence and skills
  • Proactive Issue Identification: Being the first to identify and report critical E2E test failures in the CI environment immediately following the repository merge into WooCommerce core
  • Cross-functional Collaboration: Working closely with teammates, QA engineers, and the WooCommerce DevOps team to resolve integration challenges

Key Contributions

Key Contributions & Technical Challenges

Open narratives that explain the impact of each slice of work.

Contribution 01

Spearheaded Full Migration Strategy

Led the systematic conversion of Puppeteer tests to Playwright

I took ownership of the entire migration process, creating a comprehensive strategy for transitioning our test suite. This involved:

  • Analyzing the existing Puppeteer test suite to identify patterns and common issues
  • Establishing best practices and patterns for writing Playwright tests
  • Creating a migration roadmap that minimized disruption to ongoing development
  • Setting up the initial Playwright configuration and test infrastructure
  • Systematically converting tests while maintaining test coverage
The migration wasn't just a simple syntax change - it required rethinking our testing approach to leverage Playwright's more powerful features like auto-waiting, better selectors, and improved debugging capabilities.

Contribution 02

Solved Complex Authentication Testing

Implemented solutions for testing authenticated vs. unauthenticated states

One of the most significant technical challenges was implementing proper authentication testing in Playwright. The existing Puppeteer tests had complex scenarios involving both authenticated and unauthenticated user states that needed to be preserved.

I researched Playwright's authentication patterns, implemented a robust solution for managing different user states, and created reusable authentication fixtures. This work unblocked multiple team members and became a reference implementation for future test development.

Contribution 03

Unblocked Critical CI/CD Integration

Resolved post-merge failures that blocked team-wide E2E testing

Following the repository merge into WooCommerce core, our migrated Playwright tests began failing in the new CI environment. This was a critical blocker preventing the entire team from running E2E tests. Despite being unfamiliar with the new CI setup, I took ownership of the issue and debugged the CI/CD integration PR:

Investigation & Diagnosis:
  • Debugged the complex CI/CD environment to understand the failure patterns
  • Identified multiple root causes including setup configuration errors and legitimate test failures due to UI changes
  • Discovered issues with test artifacts not being properly generated or accessible


Solution Implementation:My proactive intervention and detailed analysis enabled the team to resume E2E testing within days rather than weeks, preventing significant development delays.

Technical Deep Dive

Technical Implementation Details

The migration from Puppeteer to Playwright required deep technical understanding of both frameworks and careful implementation to ensure a smooth transition:

Framework Comparison & Selection:During my initial research, I evaluated Playwright's advantages over Puppeteer:
  • Auto-waiting mechanisms that reduce flakiness
  • Better debugging tools including trace viewer and inspector
  • More intuitive selector engine with support for text, CSS, and XPath
  • Built-in test retry mechanisms
  • Superior handling of modern web features like shadow DOM


Migration Architecture:I designed the migration to be incremental and non-disruptive:
  • Established clear patterns for common test scenarios (navigation, form filling, assertions)
  • Implemented custom test utilities leveraging Playwright's page object model
  • Set up proper test configuration for different environments (local, CI, staging)


CI/CD Integration:Solved complex integration challenges when tests moved to the WooCommerce core repository environment, requiring deep understanding of GitHub Actions workflows and WordPress testing infrastructure.

Debugging and Stability: Playwright's debugging tools (like trace viewer and inspector) were leveraged extensively to diagnose and fix flaky tests. Emphasis was placed on writing idempotent tests with appropriate waits and retries to handle asynchronous UI updates inherent in web applications.

Growth

Leadership & Technical Growth

  • Gained expertise in leading large-scale technical migrations with minimal disruption
  • Developed deep understanding of modern E2E testing best practices and patterns
  • Learned to navigate complex CI/CD environments and debug integration issues
  • Improved skills in cross-functional collaboration, especially with DevOps teams
  • Mastered Playwright's advanced features including contexts, storage states, and debugging tools
  • Enhanced ability to mentor and upskill team members on new technologies

Toolkit

Technologies & Tools

Core Stack

  • Playwright
  • TypeScript
  • JavaScript (ES6+)
  • Node.js
  • GitHub Actions

Libraries

  • Playwright (E2E Testing Framework)
  • Jest (for comparison)
  • Puppeteer (legacy system)
  • WooCommerce Blocks (testing context)
  • WordPress Core (environment)

Tools

  • Playwright Inspector
  • Playwright Trace Viewer
  • GitHub Actions CI/CD
← Back to All ProjectsContact Me