Our Shift From Cypress to Playwright in Testing
In our submit about extensive-react-boilerplate updates, we talked about that we migrated e2e-testing from Cypress to Playwright. Now, let’s delve a little bit deeper into this variation.
On the time of writing the automated checks, we had a small quantity of performance to cowl and did not face vital limitations when utilizing Cypress. But, we determined to show our consideration to Playwright for a number of causes. We needed to discover the framework created by Microsoft and perceive why it’s gaining recognition. Moreover, much like the case once we added MongoDB help, we obtained requests from the group and colleagues who needed to start out a challenge primarily based on boilerplate with Playwright checks.
As we started the method of migrating checks, we acknowledged that the quantity of checks was insignificant. Due to this fact, we determined to rewrite the checks manually with a view to familiarize ourselves with the brand new framework in additional element.
Familiarizing Ourselves With a New Framework
First, we begin discussing the documentation. We will confidently say that Cypress’s documentation surpasses Playwright. Cypress documentation could be very detailed and incorporates quite a few examples and tutorials. There’s additionally a whole challenge on GitHub with examples for each motion that may be carried out on a typical web site. Moreover, the Cypress group is bigger compared to Playwright. Though skilled builders could also be content material with the data supplied in Playwright’s documentation, much less skilled builders might discover studying Cypress extra fulfilling.
Transferring on to establishing the configuration file. We don’t discover vital variations between the 2 frameworks. We solely have to configure the timeouts and the bottom URL. We additionally explored some new capabilities that Playwright gives on this regard, resembling:
- Setting timeouts for every take a look at, together with take a look at and Earlier than/After hooks:
// playwright.config.ts
export default defineConfig(
...
timeout: 2 * 60 * 1000,
...
);- Help of testing on WebKit, which is predicated on Apple Safari, whereas Cypress lacks such help
Playwright additionally has the power to start out an area improvement server together with your challenge earlier than working checks, which may be simply applied utilizing the webServer parameter.
webServer:
command: course of.env.CI
? "npm run construct:e2e && npm run begin"
: "npm run dev",
url: "http://127.0.0.1:3000",
reuseExistingServer: !course of.env.CI,
,Subsequent, we write our first take a look at. The distinction in syntax between the 2 frameworks is notable. Cypress makes use of chainable syntax and has its personal implementation of asynchrony, whereas Playwright helps the ECMAScript 2015 normal (ES6) and works with handy async/await development for asynchronous capabilities.
Here’s a Playwright code pattern:
take a look at("needs to be profitable open web page and examine information is displayed", async (
web page,
) => {
await web page.getByTestId("profile-menu-item").click on();
await web page.getByTestId("user-profile").click on();
await web page.waitForURL(//profile/);
await anticipate(web page.getByTestId("user-name")).toHaveText(
`$firstName $lastName`
);
await anticipate(web page.getByTestId("user-email")).toHaveText(electronic mail,
ignoreCase: true,
);
await web page.getByTestId("edit-profile").click on();
await web page.waitForURL(//profile/edit/);
await anticipate(web page.getByTestId("first-name").locator("enter")).toHaveValue(
firstName
);
await anticipate(web page.getByTestId("last-name").locator("enter")).toHaveValue(
lastName
)And right here is Cypress:
it("needs to be profitable open web page and examine information is displayed", () =>
cy.getBySel("PersonIcon").click on();
cy.getBySel("user-profile").click on();
cy.location("pathname").ought to("embrace", "/profile");
cy.getBySel("user-name").ought to("include.textual content", firstName + " " + lastName);
cy.getBySel("user-email").ought to("include.textual content", electronic mail);
cy.getBySel("edit-profile").click on();
cy.location("pathname").ought to("embrace", "/profile/edit");
cy.get('[data-testid="first-name"] enter').ought to("include.worth", firstName);
cy.get('[data-testid="last-name"] enter').ought to("include.worth", lastName);
);Framework Comparisons
With regards to working the checks, we discover the architectural variations between the frameworks.
- Cypress executes instructions contained in the browser, which provides it quick access to essential parts resembling DOM, native storage, and window objects. Then again, Playwright makes use of a client-server structure and communicates with browsers by way of a WebSocket connection.
- After rewriting all of the checks, we ran all of them and noticed that by default, Playwright runs checks in parallel, offering this function free of charge. In distinction, Cypress performs parallelization just for completely different machines, and it’s a paid function.
- Operating the identical checks in each frameworks revealed that Playwright accomplished the checks extra shortly than Cypress.
We carried out the checks and located that Playwright accomplished them in 2.7 minutes:
Whereas Cypress took 3.82 minutes, displaying a major time distinction in favor of Playwright.
Conclusion
Contemplating all of the above factors, one may surprise why we determined to alter the framework. Though we didn’t see vital advantages at that second, we took under consideration the way forward for our challenge and potential initiatives that can be constructed on prime of boilerplates from the bcboilerplates ecosystem. From this angle, Playwright appeared extra promising than Cypress resulting from its parallelization of checks, increased pace, the potential of testing cellular functions, the power to make use of programming languages aside from JS and TS, and the backing of a serious participant like Microsoft.
