How to Switch from Cypress to Playwright

I’ve spent countless hours building and running tests with Cypress. For a long time, it felt like the perfect choice-fast, intuitive, and great for getting quick feedback.

But as my projects grew more complex, cracks began to appear.

Things got tricky when I had to automate workflows that stretched across multiple tabs, windows, or domains. The moment I tried to test cross-origin interactions in a single run, Cypress just hit a wall.

And in a world where modern web apps constantly switch between pages, contexts, and APIs, that limit became impossible to ignore.

That’s when I decided to switch to Playwright-and it completely changed how I approached test automation.

In this article, I’ll walk you through how to switch from Cypress to Playwright, addressing the key differences, migration steps, and best practices to help you take advantage of Playwright’s full capabilities.

Playwright vs Cypress: Key Differences

In order to successfully transition from Cypress to Playwright, it’s important to first understand the key differences between the two frameworks to ensure a smooth migration and take full advantage of Playwright’s features.

While Playwright offers broader browser support, faster execution, and more powerful automation capabilities compared to Cypress, running your Playwright tests on real devices is crucial for complete accuracy.

BrowserStack Automate enables you to execute Playwright tests across a wide range of real browsers and devices at scale, with zero infrastructure setup. This ensures reliable, high-coverage test runs and faster delivery of high-quality releases.

Preparing for the Switch

Switching from Cypress to Playwright requires thoughtful planning to ensure a smooth transition. Here’s how to effectively prepare for the switch:

1. Assess Your Existing Cypress Test Suite

• Identify Critical Tests: Review your Cypress tests and identify which ones are critical for your project. Focus on migrating these first to ensure core functionality is tested in Playwright.
• Evaluate Test Complexity: Consider the complexity of your test suite. Tests that rely on specific Cypress features (like custom commands or plugins) may need extra attention during the migration process.
• Prioritize Multi-Browser Tests: If you’re running tests across different browsers, take note of these tests as Playwright’s multi-browser support can be a significant advantage.

2. Familiarize Yourself with Playwright’s Key Concepts

• Browser Contexts: Playwright uses browser contexts to provide test isolation, unlike Cypress. Learn how to manage multiple contexts and simulate real user behavior across tabs, windows, and cross-origin interactions.
• Cross-Browser Testing: Playwright supports Chromium, Firefox, and WebKit (Safari). Familiarize yourself with how to configure and run tests on different browsers.
• Parallel Testing: Playwright allows you to run tests in parallel, which can significantly speed up test execution. Understand how to set this up in your test environment.

3. Set Up the Playwright Environment

Install Playwright: Install Playwright using the following command:

npm install playwright

Configure Browsers: Playwright requires you to download the necessary browser binaries for testing. This can be done with the following command:

npx playwright install

Update Your Project Dependencies: Remove Cypress-related dependencies and install the required Playwright dependencies in your project.

4. Review Your CI/CD Pipeline

• Update Test Runners: If you’re using a CI/CD pipeline (like Jenkins, GitHub Actions, or GitLab CI), update your pipeline configuration to support Playwright.
• Parallel Execution in CI: Leverage Playwright’s native support for parallel execution within your CI environment to speed up test runs.

5. Plan for Test Migration

• Map Cypress Commands to Playwright: Review the Cypress commands you’ve used in your tests and understand how they map to Playwright’s API. For example, cy.get() in Cypress translates to page.locator() in Playwright.
• Adjust for Differences in Test Syntax: Playwright’s syntax differs from Cypress in some key areas. Prepare for changes in selectors, assertions, and test structure.
• Consider Test Data Management: Playwright uses isolated browser contexts, so test data management may differ. Ensure you plan for handling test data in the new environment.

6. Training and Team Alignment

• Educate Your Team: If your team is new to Playwright, invest time in training them on Playwright’s features and best practices. Resources like Playwright’s documentation and tutorials can help ease the learning curve.
• Update Best Practices: Establish new best practices for writing Playwright tests, especially around managing browser contexts, handling timeouts, and debugging.

Migrating Test Scripts

Migrating your test scripts from Cypress to Playwright involves adapting to Playwright’s syntax and unique features. Here’s how to approach the migration:

1. Map Cypress Commands to Playwright

• Selectors: In Cypress, you use cy.get() to select elements. In Playwright, the equivalent is page.locator().
• Interactions: Cypress interactions like cy.click() translate to locator.click() in Playwright.
• Assertions: Cypress uses should() for assertions, while Playwright uses expect() or assert() for more flexible validation.

2. Adjust for Multi-Browser and Cross-Origin Testing

• Cross-Origin Handling: Playwright easily supports cross-origin testing within a single test by using multiple browser contexts. Ensure your test scripts handle cross-origin scenarios using Playwright’s context and page objects.
• Multi-Browser Testing: If you were testing only Chromium in Cypress, you can now expand to Firefox and WebKit with minimal changes to your test setup in Playwright.

3. Rework Custom Commands

• Cypress Custom Commands: Cypress allows you to define custom commands, but Playwright doesn’t have a similar feature. You’ll need to refactor any custom commands into reusable functions or helper methods in Playwright.

4. Handle Test Data and State Management

• State Isolation: Cypress shares state across tests within a single browser, while Playwright offers isolated browser contexts. Update tests to use isolated contexts (browser.newContext()) for each test to avoid state leaks.
• Test Data: Refactor any test data handling to fit Playwright’s browser context-based approach. You may need to handle cookies, sessions, and local storage differently.

5. Update Timeouts and Waits

• Waits: Cypress automatically waits for elements to appear before interacting. Playwright requires more explicit wait handling, such as await page.waitForSelector() or using Playwright’s built-in retries.
• Timeout Adjustments: Review and adjust the timeout settings in your Playwright tests, as Playwright may require different time management for certain operations.

6. Run and Debug Tests

• After migrating the scripts, run tests to identify any failures. Playwright provides powerful debugging tools, such as screenshots, trace logs, and video recordings, which can help you troubleshoot issues during the migration.

Playwright Features for Enhanced Testing

Playwright offers a suite of powerful features designed to enhance your testing capabilities and address complex testing needs. Here’s an overview of key features that make Playwright an excellent choice for modern web application testing:

• Cross-Browser Testing: Playwright supports testing across Chromium, Firefox, and WebKit (Safari), making it easy to ensure compatibility across different browsers.
• Multi-Page and Multi-Tab Support: Playwright allows interaction with multiple tabs and windows within a single test. It can also handle cross-origin scenarios seamlessly, enabling tests that span across different domains.
• Parallel Test Execution: Run tests in parallel across multiple browsers or devices, dramatically speeding up test execution time and improving efficiency, especially for large test suites.
• Browser Contexts for Test Isolation: Playwright provides browser contexts, which ensure tests run in completely isolated environments, avoiding interference from shared states like cookies or session storage.
• Mobile Testing and Device Emulation: Playwright supports mobile device emulation and integrates with real device testing, allowing you to test mobile responsiveness and simulate touch events for a better user experience.
• Advanced Interaction with Elements: It allows fine-grained control over interactions, such as mouse movements, drag-and-drop, keyboard actions, and more, which ensures comprehensive testing of interactive elements.
• Detailed Debugging and Tracing: Playwright provides built-in screenshots, videos, and tracing capabilities to debug and monitor test execution, making it easier to identify and fix issues.
• Network Interception and Mocking: You can intercept and modify network requests and responses, simulate different server states, or mock APIs, making it easier to test in controlled environments without relying on external servers.
• File Upload and Download Handling: Playwright handles file uploads and downloads seamlessly, which is especially useful for testing file input fields and verifying file generation on the server.
• Robust API and DocumentationPlaywright’s intuitive API and comprehensive documentation make it easy to get started and integrate into your existing workflow, providing detailed examples and guides.

Integrating with CI/CD Pipelines

Integrating Playwright with your CI/CD pipeline helps automate testing, ensuring faster feedback and consistent quality in every build. Here’s how to effectively set up Playwright in your CI/CD environment:

1. Set Up Playwright in CI/CD

Add Playwright and its required browser binaries to your CI pipeline.

npm install playwright

npx playwright install

2. Configure Parallel Test Execution

Leverage Playwright’s native support for parallel execution to speed up tests in your CI pipeline. This can be configured in your CI/CD tool.

Example for GitHub Actions:

jobs:

test:

runs-on: ubuntu-latest

strategy:

matrix:

browser: [chromium, firefox, webkit]

steps:

– uses: actions/checkout@v2

– run: npm install

– run: npx playwright install

– run: npx playwright test –project=$browser

3. Handle Artifacts for Debugging

Store screenshots, videos, and logs as artifacts for easier debugging.

Example for GitHub Actions:

– name: Upload Playwright test artifacts

uses: actions/upload-artifact@v2

with:

name: playwright-artifacts

path: .playwright/test-results

4. Test Reporting

Use tools like JUnit or Mocha to generate test reports from Playwright results. You can configure your CI to output detailed test results for easy tracking.

Example to upload results:

– name: Upload test results

uses: actions/upload-artifact@v2

with:

name: test-results

path: test-results/

5. Optimize with Caching

Speed up your CI process by caching node_modules to avoid reinstalling dependencies on every run.

– name: Cache Node.js modules

uses: actions/cache@v2

with:

path: node_modules

key: ${{ runner.os }}-node-${{ hashFiles(‘**/package-lock.json’) }}

By integrating Playwright into your CI/CD pipeline, you can automate cross-browser testing, optimize execution times with parallel testing, and streamline debugging and reporting-all while ensuring continuous integration of high-quality code.

Testing and Debugging in Playwright

Playwright offers powerful testing and debugging features that help you quickly identify and resolve issues in your automated tests. Here’s an overview of key Playwright features for efficient testing and debugging:

Screenshots and Video Recording

1. Screenshots: Capture screenshots at specific points in your test to visually inspect what happened during execution. This is especially useful for debugging failed tests.

await page.screenshot({ path: ‘screenshot.png’ });

2. Video Recording: Record videos of your test runs to analyze what happened during a test, especially for UI-related failures.

const browser = await chromium.launch({ headless: false });

const context = await browser.newContext({ recordVideo: { dir: ‘videos/’ } });

Tracing

Playwright provides tracing to record every action in your tests. This includes screenshots, network activity, DOM snapshots, and more, which can be used to pinpoint the exact cause of a failure.

await context.tracing.start({ screenshots: true, snapshots: true });

await page.goto(‘https://example.com’);

await context.tracing.stop({ path: ‘trace.zip’ });

After a test fails, you can analyze the trace files generated to see detailed execution logs, network activity, and visual evidence of what went wrong.

Debugging Tools

1. Playwright Inspector: Playwright provides an interactive debugging tool called Inspector, which allows you to pause your test execution and inspect the page. You can step through tests, inspect the DOM, and interact with elements in real-time.

await page.pause(); // Pauses execution and opens the Inspector

2. Headful Mode: Running tests in headful mode (with the browser UI visible) makes debugging easier. You can visually verify interactions and track down issues that may not be obvious in headless mode.

const browser = await chromium.launch({ headless: false });

Debugging with console.log

1. Console Logs: You can use console.log() to print debugging information during test execution. Playwright also logs any errors or console messages generated by the page, making it easier to track down issues.

2. Intercepting Console Logs: Capture and log browser console messages by listening to the console event.

page.on(‘console’, msg => console.log(msg.text()));

Playwright Debugger

You can use Node.js debugger features directly with Playwright to inspect variables, set breakpoints, and control execution flow.

NODE_OPTIONS=”–inspect-brk” npx playwright test

Retry Logic

To handle flaky tests, you can configure Playwright to retry failed tests automatically, which helps in reducing false positives.

module.exports = {

retries: 2, // Retry failed tests up to 2 times

};

Network Interception for Debugging

Playwright allows you to intercept and modify network requests, which is useful for debugging issues related to network responses, API calls, or server states.

await page.route(‘**/api/**’, (route) => route.fulfill({ status: 200, body: ‘{“message”:”success”}’ }));

By utilizing Playwright’s robust testing and debugging tools, you can efficiently resolve issues in your tests and improve overall reliability.

However, when it comes to scaling your tests and optimizing execution across different browsers and devices, Playwright’s true potential can be unlocked with the help of BrowserStack Automate.

Scale and Optimize Playwright Test Execution with BrowserStack Automate

Scaling Playwright test execution across multiple environments and devices can be challenging without the right infrastructure. BrowserStack Automate offers a cloud-based solution to run Playwright tests seamlessly across real browsers and devices, helping you maximize efficiency, speed, and test coverage.

BrowserStack Automate enhances Playwright’s capabilities by offering the following key features:

• Real Device Testing: Run Playwright tests on real iOS and Android devices as well as all major desktop browsers, ensuring test accuracy in true user environments.
• Cross-Browser Support: Effortlessly execute Playwright tests on Chromium, Firefox, WebKit, Edge, and Safari browsers across different OS versions without managing any infrastructure.
• High-Scale Parallel Execution: Speed up your test suite by running hundreds of Playwright tests concurrently, reducing total test runtime and accelerating release cycles.
• CI/CD Integration: Easily integrate BrowserStack Automate with your existing CI pipelines such as GitHub Actions and Jenkins for automated, continuous testing.
• Instant Debugging Insights: Access an all-in-one dashboard with video recordings, network logs, console output, and AI-assisted failure analysis to quickly identify and fix issues.
• Self-Healing Automation: Benefit from BrowserStack’s AI agents that dynamically fix broken locators during execution, improving test reliability and reducing flaky failures.
• Comprehensive Device and Browser Configuration: Specify Playwright versions, browsers, OS versions, screen resolutions, and even custom browser preferences.
• Real-World Network Simulation: Test under varied network conditions including offline, slow, and latency profiles to ensure app resilience in real user conditions.
• Proxy and Local Testing Support: Run Playwright tests securely behind proxies or against locally hosted or staging environments without hassle.
• Unified Test Intelligence: Combine Playwright Trace Viewer logs with BrowserStack’s test reporting for full test traceability and actionable insights.

With BrowserStack Automate, you can scale your Playwright tests effortlessly, improve coverage, and significantly reduce test execution time-all while ensuring reliable results across real devices and browsers.

Talk to an Expert

Conclusion

Switching from Cypress to Playwright offers significant advantages, especially when dealing with complex test scenarios like cross-browser testing, multiple tabs, and cross-origin interactions.

By understanding the key differences and preparing your test scripts for migration, you can seamlessly transition to Playwright and unlock its full potential.

Integrating Playwright with a cloud-based solution like BrowserStack Automate takes it a step further, enabling you to scale and optimize test execution across real browsers and devices, speed up feedback loops, and ensure reliable, consistent results.

Whether you’re testing across multiple browsers or devices, Playwright and BrowserStack provide the tools you need to accelerate development and ensure high-quality software releases.

With these tools in hand, you’re ready to make the most of Playwright’s capabilities and enhance your testing strategy for the modern web.

Try BrowserStack Now

Useful Resources for Playwright

• Playwright Automation Framework
• Playwright Java Tutorial
• Playwright Python tutorial
• Playwright Debugging
• End to End Testing using Playwright
• Visual Regression Testing Using Playwright
• Mastering End-to-End Testing with Playwright and Docker
• Page Object Model in Playwright
• Scroll to Element in Playwright
• Understanding Playwright Assertions
• Cross Browser Testing using Playwright
• Playwright Selectors
• Playwright and Cucumber Automation

Tool Comparisons:

• Playwright vs Puppeteer
• Playwright vs Cypress
• Playwright vs Selenium
• Cypress vs Selenium vs Playwright vs Puppeteer