Tech Corner - 31. January 2022
header_image

The Best End-to-End Testing in JavaScript: Playwright or Cypress?

End-to-End (E2E) testing is a software-testing methodology to test an application flow from start to finish. It works by simulating the real user scenarios and validating the components for integration and data validity.

When we are talking about End-to-End testing in a JavaScript environment, the most common scenario is to test web applications or websites. And who knows these methodologies best? Well, web developers who work with JavaScript or Typescript. If there isn’t a full-scale team of QA engineers employed on a project, or they’re focused on manual testing, the web developers are always at hand.

This brings us to the question: What’s the best modern E2E testing framework for the web in JavaScript? And in fact, we’ve already narrowed this question down into a simpler one for you – Which framework is better: Playwright or Cypress?

Cypress

Looking for a modern testing framework that runs in your browser with a simple setup? Then Cypress is here for you. Its other great features are simple debugging and easy network stubbing in order to modify the network responses and connection. And screenshots and videos are provided out of the box for failed tests.

Writing test cases with Cypress is also simplified by automated waiting, so developers don’t have to wait for renders or updates to the DOM nor use hardcoded timeouts, and framework capabilities can be extended using the plugin system.

Are there any pitfalls?

Well… yes, there are. For many projects, the show stopper comes with the missing Webkit support – which means you can’t include Safari in the testing matrix.

Another is the inability to run multiple browser tabs in parallel, meaning scenarios such as changing settings in the admin and checking for app updates get more complicated. 

Logging in with 3rd-party providers gets even more complicated. Sure, one can stub or mock the authentication, but that doesn’t really fit with the point of the end-to-end testing, does it.

And the last drawback can be problematic interaction with Iframes. 

Playwright

Playwright started as an evolution of the Puppeteer tool, but quickly superseded it. It was first introduced in order to test Visual Studio Code, but was soon recognized as a valuable tool, and opened up to be used for any use case. Now it is a universal test-execution environment that supports all major modern browsers, and even allows you to author tests in multiple languages such as Typescript, JavaScript, Python, .NET or Java. 

Playwright’s top feature is an emulation of the mobile browser’s viewports with their most-used features, such as geolocation, locale, timezone, permissions and more.

Tests can be written by hand with an auto waiting feature to support developers, or recorded from the user's actions, and providing screenshots for the failed tests is a standard.

Particularly powerful is the fact that you can create end-to-end tests, and reuse the authentication tokens or use opened tabs to continue with the flow using 3rd-party providers.

It’s perfect, isn’t it?

Nothing is perfect, not even Playwright – even though it’s pretty close. 

For one thing, there’s no Internet Explorer 11 support, and that will never happen. Not necessarily an issue, until you meet some corporate or government clients. 

Safari support means there is Webkit support which is used inside Safari, but it doesn’t mean a 100% match, due to specific Safari features.

And finally, mobile devices are emulated in a desktop environment which sometimes leads to different behavior than on the real devices. As an example, it can serve mobile Safari which has its own bugs compared to the desktop version.

Which one to choose?

For many projects, Cypress might be a great tool to use despite its limitations and uncovered edge cases. You benefit from pleasant tools to work with and a big community – which you’ll need, as there are so many restrictions you’re likely to encounter.

Playwright on the other hand avoids most of the limitations you’ll find with Cypress, and while it’s not perfect – it’s the closest to it from all the recent tools and frameworks. We believe it’s the future. It’s versatile, feature-rich, backed by a growing community and a powerful partner.

Right now we see it as the best end-to-end testing tool for web applications. And it can even be used with languages other than JavaScript, just don’t tell your Java guys ;)

Oh... and see also previous blog post. Worth reading too 🙂

about the author

Jozef Radonak

blog author
At the forefront of Hotovo's web technology stream, Jozef strives to stay up to date with the latest web technologies and trends, and is always willing to help others master this ever-evolving industry. Outside of the world of web technology, he is an avid hiker and devoted coffee lover. He takes great pleasure in seeking out new coffee shops and trying different coffee blends. Jozef is all about innovation, whether in technology or in his cup of coffee!
blog author

READ MORE