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

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.js → auth.spec.js)
• Migrate plugin activation tests (activatePlugin.spec.js → plugin.spec.js)
• Migrate metabox tests (metaBoxes.spec.js → metabox.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

• Playwright Documentation
• WordPress Testing Best Practices
• Migration Guide: Cypress to Playwright
• GitHub Actions with Playwright

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.