Our Journey from Cypress to Playwright for E2E Testing

Introduction

Adapting to unexpected technical challenges often leads to innovation. Our team faced such a moment when we discovered that our primary end-to-end (E2E) testing framework, Cypress, was incompatible with an essential component of our tech stack. This discovery led us to consider alternatives to resolve the compatibility issue and enhance our testing processes.

Our choice was Playwright, a modern testing framework acclaimed for its robust features and compatibility with multiple browsers. The shift to Playwright was swift and efficient: all our E2E tests were successfully migrated within a few hours. This rapid transition highlighted our team's ability to adapt and integrate new technologies quickly.

In this blog post, we will share the hands-on process we followed during the migration to Playwright, the challenges we encountered along the way, and the solutions we implemented to overcome them.

Using a Test Conversion Tool

We utilized a third-party test conversion tool to facilitate our migration from Cypress to Playwright, which significantly streamlined the process. Among several options available, we chose Ray's Cypress to Playwright Conversion Tool for its ease of use and effectiveness. This tool allowed us to automatically transpose our existing Cypress tests into the Playwright format.

The tool processes each test script by identifying equivalent functions and commands in Playwright, translating our entire suite with minimal input. Below are some before and after images of our test scripts, demonstrating the tool's conversion capabilities.

One test script written in Cypress:

describe("Newsletter page", () => {
  it("subscribing to email newsletter should show success message", () => {
    cy.visitWithTimeout("/newsletter");

    cy.getDataCy("newsletter-email-input").type(SIGN_UP_EMAIL_TEST);
    cy.getDataCy("newsletter-submit-button").wait(100).click();

    cy.contains("You subscribed to the newsletter successfully!");
  });

  it("home page should contain button to navigate to newsletter page", () => {
    cy.visitWithTimeout("/");

    // email registration signup is located at the bottom of the home page
    cy.scrollTo("bottom");

    cy.getDataCy("newsletter-sign-up-link").contains(
      "Sign up for our newsletters",
    );

    // adding a 100ms wait for safety, otherwise this command runs too fast and the click is not registered by the website
    cy.getDataCy("newsletter-sign-up-link").wait(100).click();

    cy.url().should("include", "/newsletter");
  });
});

And its result converted in Playwright:

import { test, expect } from "@playwright/test";

test.describe("Newsletter page", () => {
  test("subscribing to email newsletter should show success message", async ({
    page,
  }) => {
    page.FIXME_visitWithTimeout("/newsletter");
    page.FIXME_getDataCy("newsletter-email-input");
    await page.fill(SIGN_UP_EMAIL_TEST);
    page.FIXME_getDataCy("newsletter-submit-button");
    await page.waitForTimeout(100);
    await page.click();
    await expect(
      page.getByText(/You subscribed to the newsletter successfully!/).first()
    ).toBeVisible();
  });

  test("home page should contain button to navigate to newsletter page", async ({
    page,
  }) => {
    page.FIXME_visitWithTimeout("/");

    // email registration signup is located at the bottom of the home page
    await page.FIXME_scrollTo("bottom");
    page.FIXME_getDataCy("newsletter-sign-up-link");
    await expect(
      page.getByText(/Sign up for our newsletters/).first()
    ).toBeVisible();

    // adding a 100ms wait for safety, otherwise this command runs too fast and the click is not registered by the website
    page.FIXME_getDataCy("newsletter-sign-up-link");
    await page.waitForTimeout(100);
    await page.click();
    await expect(page).toHaveURL(/\/newsletter/);
  });
});

While the tool performed impressively, converting most of our tests accurately had limitations. Certain custom helper functions and test aliases did not translate directly, and the tool clearly marked these for manual intervention. This feature was beneficial as it allowed us to quickly identify and address the segments that required our attention.

Small Fixes and Fine-Tuning

The initial output from the conversion tool was highly useful, yet it required some tweaks to align with Playwright's capabilities perfectly. The tool conveniently marked each unconverted function with the identifier FIXME_<unconverted function>, making it straightforward to address these specific areas. Here’s how we tackled some of these functions:

FIXME_visitWithTimeout: Originally a custom Cypress command designed to visit a URL with a specified timeout (cy.visit(url, { timeout: 30000 })), this was straightforwardly converted to Playwright's page.goto(url) FIXME_getDataCy: Another custom command (cy.get('[data-cy="<a_selector>"]')) was efficiently translated to Playwright’s page.locator('[data-testid="<a_selector>"]') FIXME_scrollTo: This native Cypress command, which scrolls the window to a specific position, proved unnecessary in Playwright. Given Playwright’s automatic detection of elements on the page, we opted to remove this command entirely

import { test, expect } from "@playwright/test";

test.describe("Newsletter page", () => {
  test("subscribing to email newsletter should show success message", async ({
    page,
  }) => {
    await page.goto("/newsletter");
    await page
      .locator(`[data-testid="newsletter-email-input"]`)
      .fill(SIGN_UP_EMAIL_TEST);
    await page.locator(`[data-testid="newsletter-submit-button"]`).click();
    await expect(
      page.getByText(/You subscribed to the newsletter successfully!/).first(),
    ).toBeVisible();
  });

  test("home page should contain button to navigate to newsletter page", async ({
    page,
  }) => {
    await page.goto("/");

    await expect(
      page
        .locator(`[data-testid="newsletter-sign-up-link"]`)
        .getByText(/Sign up for our newsletters/)
        .first(),
    ).toBeVisible();

    await page.locator(`[data-testid="newsletter-sign-up-link"]`).click();
    await expect(page).toHaveURL(/\/newsletter/);
  });
});

Further refinements were made to the converted code, such as removing some "wait/delay" commands. Playwright’s robust handling of asynchronous events allowed us to streamline our tests by eliminating unnecessary pauses enhancing test execution speed and reliability.

Conclusion

The transition from Cypress to Playwright in our testing framework was driven by necessity but has significantly improved our testing practices. Utilizing a test conversion tool allowed us to migrate our entire suite of E2E tests efficiently, minimizing manual effort and accelerating the adoption of Playwright.

Our experience highlights the importance of flexibility and the willingness to embrace new technologies in the face of unexpected challenges. The marked improvements in test execution speed and reliability, along with Playwright's advanced features, have made this transition a resounding success for our team.

As we continue to refine our tests and explore the full capabilities of Playwright, we encourage other teams facing similar challenges to consider this approach. The tools and processes outlined here can serve as a roadmap for those looking to enhance their automated testing solutions.