Cypress and Playwright: A Comparison

In this video, I compare the two E2E testing frameworks Cypress and Playwright.
It should give you enough information to make the right decision for your project.
0:00 Welcome
1:33 Technological Approach
16:32 Developer Experience
24:22 CI
33:06 Coding
51:19 Architecture & Extensibility
58:49 Misc. Features
1:04:24 Summary & Farewell

[@fellogenfellogen8928]

This was the best framework comparison by far until this day. Although I wasn't as sold on the maturity of Cypress. Mainly because, as you mentioned, there are a lot of edge cases and almost 100+ plugins that in some cases are required to solve them. For me, the amount of quirks and shift away from the nature of JS/TS was too much. Focusing on community support, there is almost one guy that covers these things (ex Cypress Developer?), Gleb Bahmutov. He has covered like 500+ videos, mostly tips and tricks for those weird quirks, and just to name it, he has courses about 20+ plugins for Cypress. I will admit that for the early parts of creating tests and the first flow, yes, Cypress is still ahead of anything else. But when something more complex is going on, and we need to mix that asynchronous behavior or any other Cypress quirk, then it's almost over for a tester who started using this framework. Of course, then there are Gleb's videos and his plugins (they are great), but as you and also Gleb or any developer forget very so often, you are real, full-fledged developers with a vast amount of skills and a huge understanding of not only one framework but many programming languages. For guys like you, it's always like learning the differences and those quirks in the case of Cypress. But for let's say a manual tester who started learning JS and TS and now moves to the automation part and starts Cypress, the starting coding is, as you said, great and easy. But those people will potentially face a huge wall. And in most cases, as you also mentioned, locally Cypress will tell you (sometimes) that you messed up, like chainability with async and this order of execution etc.. But a solution for this comes only from tons of research and not pure understanding of the programming language. For me, if there are experienced people on the team or project familiar with Cypress who could potentially assist someone new to the framework, then yes, Cypress doesn't lag far behind what Playwright offers. However, for manual testers and/or frontend developers accustomed to only working with JS/TS, things will get harsh after a while. The basics are also easy (PW), tho the learning curve is a bit steeper early on. Later, if you encounter any challenging issues, you're still mostly dealing with standard JS/TS. I would also recommend to other viewers to check out your webinar with Manfred Steyer. Although I initially focused on your channel for Cypress/Playwright content, I must say you are a very smart and eloquent person and you put grea amount of substantive information in your videos.

[@RainerHahnekamp]

Hello, first of all, thanks a lot. Those kind of comments are very important to me. About those ptifalls you might fall in Cypress, when you start learning it: So I had to learn it the hard way as well. For a long time you're very happy with your Cypress tests until all of a sudden some start to behave strange. First thing you do, is to ignore them. But when the same kind of patterns come up more often, you have to do something about it. Some start adding cy.wait, some might have a colleague they can ask, others dig into the docs, and others, falsely, accuse Cypress and switch to another framework. But this is something, you have to do with every framework. Regardless if it is for testing, frontend, backend, etc. What I see all the time though, is that developers are writing tests "on the side". They do not have the amount of time to dig into thte details of Cypress because their main "battlefield" lies in the frontend/backend area. The webinar we did, is actually the same is this video. This video has the better video quality though. So you can see the code quite clearly (4K) :) About my channel: I still have to come up with a proper description. Thanks for bringing that on the table. I'd like to do videos about all those topics I encounter as full-stack developer. So don't be surprised, if in the near future a video about Java pops up. That doesn't mean that I don't do any testing-related videos anymore. All the best, Rainer

[@safecidafi]

@@RainerHahnekamp hello, thank you for your video, it is clear and interesting. I'm new in the Angular testing domain, not familiar with any testing framework and your video really helped me. I'm in charge of implementing Tests for a bunch of Angular applications and for now im focused on searching what options are available for E2E testing. I learned a bit about the features of Cypress, Playwright, Jest, Puppeteer, Protractor and I was wandering, if i wanted to add a E2E or E2E+Unit test Framework that is : -maintainable on big applications, -that is or will be popular, -with good technical support and documentation, -that won't be abandoned in few years, -that has easy to debug errors, -and is stable and easy to implement if possible From what i've learned, Playwright seems to be a good option, but cypress seems to have more support for now and can also do unit testing, Jest have fewer and fewer problems thanks to the help of Angular devs but they can stop helping with the implementation of Jest at any time. Have you got any recommendation ? i hope my english is correct, keep doing what you do, thank you 🙂

[@AmanyZohair-mu3dx]

​@@safecidafi I'm the same as you, new in the Angular testing domain and I'm in charge of implementing Tests for 3 Angular applications I really hope @RainerHahnekamp recommends the better framework for that

[@unhandledexception1948]

What a helpful comparison, and what deep knowledge of these frameworks the presenter has... very impressive

[@RainerHahnekamp]

Hey, thanks a lot for that big compliment

[@i.j.5513]

Very thorough explanation of the major differences, with illustrative examples and background information. Thank you!

[@RainerHahnekamp]

You are welcome. Always happy if somebody finds one of my videos useful.

[@michaeljuliano8839]

Vielen Dank! Sehr hilfreich.

[@RainerHahnekamp]

Bitte schön. Gerne geschehen der Herr 😉

[@ManyakSVK]

Hi! Amazing video with really good informations about topic. After few years with angular without any useful knowledge about testing (e2e, automated,...) its hard to choose which framework is best for start in 2024. Now as tech lead i can say i will choose playwright because of easy to use, concurent jobs, no deps, performance and strong base via Microsoft (as you said). I think our experience with testing will grow more and more with possibilities of playwright. (Or maybe im wrong 😃 ). Well done Rainer and thank you for really good work here

[@RainerHahnekamp]

Hi Michal, wonderful. That was actually the goal of this video. To give viewers the possibility to come up with an educated decision. Wish you all the best with Playwright!

[@mykhailo7134]

great video, thank you

[@RainerHahnekamp]

Hey, thanks as well!

[@Oleks-wn9rt]

thank you, really great comparison. my take is that Cypress is easier to start with for some engineers who are not familiar with automation/coding yet.

[@RainerHahnekamp]

Thanks, yeah so in terms of DX, Cypress is just great.

[@Tonaldo90]

Cypress recorder is amazing extension :D so easy to make tests

[@RainerHahnekamp]

Yes, I mean I have to be honest. The whole discussion between Cypress & Playwright and finding theirs strengths feels a little bit like nitpicking. They are both extremely good.

[@markodzelajlija8094]

First of all you for this great video ! I'm someone who was working with Selenium Web Driver for 3 years, then Pw for 2 years. On our new project client want to have e2e tests in Cypress. Our main debate is should we proceed with Page-Object-Model or to use Cypress custom commands and App action. From my point of view, i see only benefits of using POM. We made some demo and it's working great. For every QA team, it's really important to have reusability, maintainability, and readability of test code and that can only be done with POM. Do you think that it's bad approach to proceed with POM, are we doing anti-pattern ?

[@RainerHahnekamp]

One of the main reaons why Cypress discourages commands is that they have seen a lot of overengineering. So devs start to write POMs before the tests and end up spending a majority of their time on maintaining these POMs. As you can overdo almost everything, I do not see this as a valid reason to abandon POMs. I use them also in Cypress. One use case where Cypress commands are better, are queries. Cypress needs to know if a command is a query or something else (action, assertion). Only queries fall into retryability. So if - and maybe you don't have that at all - you have customized queries, use Cypress.addQuery and embed them in your POMs. Short answer: Proceed with POMs. That's fine.

[@dr0n63]

Great video. But "recommended approach" for Cy PO are nuts. Who df using commands for add PO? You can easly create PO file (with selectors amd methods) with export class and import it to your test file

[@RainerHahnekamp]

Thanks as for the PO: There is this "relative" famous blog from 2019 about Page Objects in Cypress: www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions. This is what I mean with "recommended approach". Page Objects & Cypress is heavily debated topic.

[@anasouardini]

I've tried both selenium and playwright, my opinion is: Selenium is garbage; Playwright is only for unit-testing it sucks at scraping. I'm currently learning Cypress, I hope I don't get disappointed again.

[@RainerHahnekamp]

Oh, that's surprising. I'm all ears. Why for unit-testing?

[@AndreAngelantoni]

You'll switch back to Playwright soon.