Skip to content

Migrate from Cypress to Playwright for End-to-End Testing #1549

Description

@jtsternberg

Summary

The current Cypress-based end-to-end testing setup is failing consistently in CI due to Docker/wp-env dependency issues. This presents an opportunity to migrate to Playwright, which offers significant advantages for modern WordPress testing in 2025.

Current Issues with Cypress Implementation

CI Failures

  • Docker Dependency Issues: Current CI failures show spawn docker-compose ENOENT errors
  • wp-env Dependency: Tests depend on WordPress local environment setup via @wordpress/env
  • Consistent Failures: Recent workflow runs show 100% failure rate on the Test workflow

Technical Limitations

  • Browser Support: Limited primarily to Chromium-based browsers
  • Language Support: JavaScript/TypeScript only
  • Performance: Slower test execution compared to modern alternatives
  • Parallel Testing: Requires paid Cypress Cloud subscription for optimal parallelization
  • Memory Issues: Browser-based architecture can cause crashes during test execution
  • Cross-Origin Limitations: Same-origin policy restrictions limit testing scenarios

Current Test Structure

The existing Cypress tests cover:

  • WordPress admin login/logout functionality (login.spec.js)
  • Plugin activation/deactivation (activatePlugin.spec.js)
  • CMB2 metabox functionality (metaBoxes.spec.js)

Benefits of Migrating to Playwright

Performance Improvements

  • 88.68% Performance Improvement: Industry benchmarks show Playwright completing similar test suites in ~1.8s vs Cypress ~16s
  • Native Parallel Execution: Built-in support for parallel test execution without additional costs
  • Memory Management: Node.js-based architecture provides better memory management vs browser-based execution

Enhanced Capabilities

  • Cross-Browser Testing: Native support for Chromium, Firefox, and WebKit
  • Multi-Language Support: JavaScript, TypeScript, Python, C#, and Java support
  • Cross-Origin Testing: Seamless testing across different domains in single test flow
  • Mobile Emulation: Built-in device emulation (viewport, user-agent, touch support)
  • Advanced Network Interception: Superior mocking and network interception capabilities

CI/CD Advantages

  • Reduced Dependencies: No Docker/wp-env dependency issues
  • Better CI Integration: More reliable GitHub Actions integration
  • Faster Builds: Reduced CI execution time leads to faster feedback loops

2025 Industry Trends

  • Adoption Growth: Playwright surpassed Cypress in npm downloads mid-2024
  • Industry Standard: Becoming the preferred choice for complex, multi-layered applications
  • Microsoft Backing: Strong enterprise support and continuous development

Migration Plan

Phase 1: Environment Setup

  • Install Playwright and configure basic setup
  • Create Playwright configuration file
  • Set up WordPress test environment compatible with Playwright
  • Configure CI workflow for Playwright

Phase 2: Test Migration

  • Migrate login/logout tests (login.spec.jsauth.spec.js)
  • Migrate plugin activation tests (activatePlugin.spec.jsplugin.spec.js)
  • Migrate metabox tests (metaBoxes.spec.jsmetabox.spec.js)
  • Create Playwright custom commands equivalent to existing Cypress commands

Phase 3: Enhanced Testing

  • Implement cross-browser testing (Chrome, Firefox, Safari)
  • Add mobile/responsive testing scenarios
  • Implement parallel test execution
  • Add visual regression testing capabilities

Phase 4: Cleanup

  • Remove Cypress dependencies and configuration
  • Update documentation and README
  • Update package.json scripts
  • Archive old Cypress test files

Implementation Considerations

WordPress-Specific Requirements

  • WordPress admin authentication flow
  • Plugin activation/deactivation testing
  • Custom meta box field interactions
  • WordPress REST API testing capabilities
  • Multi-site testing support (if needed)

Test Environment

  • Evaluate alternatives to wp-env for local development
  • Consider Docker-free testing approaches
  • Implement database seeding and cleanup
  • Configure test data fixtures

CI/CD Integration

  • GitHub Actions workflow optimization
  • Parallel test execution configuration
  • Test result reporting and artifacts
  • Integration with existing PHPUnit test suite

Expected Outcomes

Performance Metrics

  • Execution Time: Expect 80%+ reduction in test execution time
  • CI Build Time: Faster overall build/test cycle
  • Reliability: Elimination of current Docker-related CI failures

Quality Improvements

  • Cross-Browser Coverage: Testing across all major browsers
  • Mobile Testing: Responsive design validation
  • Better Debugging: Improved debugging capabilities with trace viewer
  • Visual Testing: Screenshot comparison capabilities

Developer Experience

  • Faster Feedback: Quicker test results during development
  • Better IDE Integration: Superior TypeScript support and autocompletion
  • Debugging Tools: Advanced debugging and trace analysis tools
  • Documentation: Better documentation and community support

Migration Timeline

  • Week 1: Environment setup and basic configuration
  • Week 2: Core test migration and validation
  • Week 3: Enhanced features and cross-browser testing
  • Week 4: CI/CD optimization and cleanup

Resources and References

Acceptance Criteria

  • All existing Cypress tests ported to Playwright with equivalent functionality
  • CI pipeline consistently passing without Docker dependency issues
  • Cross-browser testing implemented for Chrome, Firefox, and Safari
  • Test execution time reduced by at least 50%
  • Documentation updated with new testing procedures
  • Development team trained on Playwright usage

Priority: High
Effort: Medium (2-3 weeks)

This migration addresses immediate CI reliability issues while positioning the project with modern, performant testing infrastructure for 2025 and beyond.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions