End-to-end testing with playwright

Introduction

Modern web applications require robust testing practices to ensure users get served high quality software that works as expected. End-to-end testing tools have become essential to this process. Playwright, a Node library by Microsoft, stands out as an impressive tool, offering several unique benefits that make it a compelling choice for web developers.

This blog will take a deep dive into Playwright and draw some comparisons to another very popular tool in the space called Cypress.

While I have personally used both tools productively at work, I have developed a relatively strong preference for Playwright over Cypress and I am going to try and unpack the reasons for this preference in this blog post, delving into the comparative analysis between the two, considering various factors such as functionality and ease of use.

Why Playwright?

Backing by Microsoft

Playwright is developed and maintained by Microsoft, a tech giant with an excellent track record for developing successful software tools. This backing means that Playwright is consistently updated, improved, and it is likely to have long-term support. It also means it will likely have very good integration with other tools in the ecosystem that are developed by Microsoft, such as typescript and VSCode.

Familiar Syntax

If you're already familiar with writing tests in Jest, you'll find Playwright's async/await and expect syntax familiar and straightforward. This syntax mirrors the modern JavaScript ecosystem and allows for clean, understandable test writing. What I mean by this is probably best described by a code snippet that I found on the cypress best practices page. It specifically warns users to not use familiar syntax of storing query results in variables. This won't work in cypress. Instead, we need to create what is called a cypress alias and then use that instead.

javascriptCopy
1
cy.visit("https://example.cypress.io");
2

3
// DONT DO THIS. IT DOES NOT WORK
4
// THE WAY YOU THINK IT DOES.
5
const a = cy.get("a");
6

7
// nope, fails
8
a.first().click();
9

10
// Instead, do this.
11
cy.get("a").as("links");
12
cy.get("@links").first().click();

Code Reusability

With Playwright, you can reuse bits of code simply by creating a function and importing it. We already know this pattern from writing application code. It's the bread and butter of any software engineer.

In Cypress, this kind of modularity is more complicated to achieve. We're supposed to use something called custom commands to create abstractions. Here is a quote from the cypress docs:

You already do this all the time as a JavaScript developer each time you create a custom function in your code. Typically you will create a custom JS function to abstract some functionality to re-use within your application, i.e., utility functions. Cypress commands are the same thing. They allow you to re-use functionality across multiple tests.

Enhanced TypeScript Support

Playwright stands out with its superior TypeScript support. The focus on TypeScript not only improves developer experience but also ensures better code reliability. Much of this is thanks to relying on simple primitives, such as typescript functions for code reuse. You guessed it, typescript functions already work with typescript. There is zero engineering effort required neither form the playwright team nor from us developers to make this work.

In Cypress, the concept of custom commands requires also the maintenance of custom type extensions to make typescript aware of our custom commands. While it is easy to just make it work, there is a maintenance cost associated with this - especially if teams grow larger and parallel work increases.

Cross-Browser Support

One area where Playwright really shines is its comprehensive cross-browser support. Playwright supports Chrome, Edge, Firefox, and Safari, providing a holistic testing environment. As of this writing, Cypress is yet to include Safari in its supported browsers.

UI Mode for Debugging

Playwright's recent addition of UI mode for debugging has brought it up to par with Cypress. Now, developers can step through tests in the browser, observe test execution, and debug effectively, creating a more interactive and user-friendly testing environment.

Concise API

Playwright offers a more concise API for writing assertions, resulting in cleaner, more maintainable test suites. It directly supports the familiar query methods from the React Testing Library such as getByText, getByRole, getByLabel and consorts. These methods mimic the way the users interact with the application, resulting in more robust tests that align with user behavior. To achieve this functionality with Cypress, we need to install a separate package called Cypress Testing Library.

Conclusion

In conclusion, both Playwright and Cypress are excellent end-to-end testing tools in their own right. They have proven to be incredibly useful in creating robust and reliable web applications. While I have used both and see the merits in each, my preference has leaned towards Playwright due to its superior TypeScript support, intuitive syntax, robust code reusability, and extensive cross-browser support, among other features.

The choice of a testing tool largely depends on the context, including the team's familiarity with the tool, project requirements, and long-term support. Despite my personal preference, it's crucial to evaluate both tools within the context of your own project needs and team skills.

My intention with this blog post was not to pit one tool against the other, but rather to illuminate the areas where I've found Playwright to offer a slight edge over Cypress. I encourage you to experiment with both tools, compare their functionalities, and decide for yourself what works best for your specific situation.

Remember, the goal of using such tools is not just to find bugs in your code, but to build a more robust and reliable web application that delivers the best user experience. In that regard, both Playwright and Cypress are winners. They encourage good practices and deliver value to both developers and users alike.