End to end testing comparison -- Cypress vs Playwright

[EvidentlyCube]

I've actually wanted to also give Playwright a try so let's try again.

I wrote a tiny comparison of Cypress and Playwright using three test cases. You can check the code here: https://github.com/EvidentlyCube/tiddlywiki-e2e-comparison

My personal favorite is Playwright for the following reasons:

• Cypress's main paradigm is that it wants you to work with apps' internals - I don't like this idea for various reasons.
• Cypress is ill suited for Page Object pattern which I am fond of. Playwright is made for it.
• I have experience with Selenium and Playwright feels mostly like Selenium except it feels faster and less bulky.
• Has better TypeScript definitions which is a bug plus for me.

I have two main critiques for it tho:

• You need to use a lot of awaits
• Because of that chaining code is a bit more of an issue, which causes the same code to be bulkier than in Cypress.

Neither is a deal breaker for me though, a lot of complexity in Playwright can be hidden inside operations and for the rest you have a test which very clearly interacts with the page as a user would.

---

Old first post:

Just wanted to throw it out there -- I've started working on an end-to-end test suite for TW in Cypress mainly as a learning experience.

The repo is here: https://github.com/EvidentlyCube/tiddlywiki-cypress-tests https://github.com/EvidentlyCube/tiddlywiki-e2e-comparison

It currently has two test cases - one for testing #6987 which I implemented the other day, and another one just doing something.

I don't have big plans for it - I'am sure to add a few more tests but I primarily wanted to get something done in Cypress.

[pmario]

I just had a look at the repo. Why do you need TypeScript. Is modern JS not good enough?

[EvidentlyCube]

I like type safety and improved code completion that TypeScript provides. I find modern JS to be good enough for smaller projects, but as soon as it to something that I can't hold completely in my head I have to do jump between files constantly just to remind myself the identifiers.

It's not something that modern JS solves, while to some extent you can use JSDoc for decent code completion I've always found it working not so great in any IDE I tried before and I much more prefer the syntax of Typescript than using comments anyway.

[pmario]

I personally would like to implement a system that gives us 99% with: standard JS + type-checking + linting + autocomplete + TestDrivenDev + Code Review as described at: https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b

The main reason is this part of the conclusion from the above mentioned blog post:

TypeScript is definitely cool. I really like it. But it comes with a substantial cost, and it wouldn’t be wise to ignore it. Before you decide to use TypeScript, take a good hard look at your team and ask yourself very carefully and honestly:

• Is your team ready for the learning curve?
• Will you have the discipline to invest in training and mentorship to bring your developers up to speed on TypeScript?
• Will you always be able to maintain that same training discipline while you onboard future hires?
• Most importantly from an ROI perspective: Are the modest improvements offered by TypeScript really worth all that extra effort?

[EvidentlyCube]

That's fine, though keep in mind this article was written in 2016. Six years later TypeScript is a very popular language that keeps growing in popularity, onboarding is not bigger an issue than teaching new developers your project's business knowledge, methodology, conventions and such. I disagree with most of the article but I also am not particularly interested in discussing this - I think some of the comments do it better than I could :).

Anyway, like I said I wrote it as a learning experience, to gain some actual experience and be able to evaluate them realistically. If Playwright (or Cypress) were to be integrated into TiddlyWiki I agree it would make more sense to keep it JS-only, I wouldn't even mind getting flaky autocomplete, right now I get none in VSCode for TW (something I'd love to fix but I have no clue how).

[Jermolene]

Hi @EvidentlyCube thanks for the information. I hadn't come across Cypress until you mentioned it. Looking at the package.json it appears to use Electron as the test runner. It doesn't appear to have support for multiple different browser engines as Playwright does.

I also find that I much prefer Playwright, probably because I've used Puppeteer for a number of years. I understand Playwright was founded by somebody who had done a lot of work on Puppeteer.

[EvidentlyCube]

I was writing a comparison for my client and another thing I noticed with Cypress is that it might be problematic for developers to use, because you need to completely switch how you approach the code between writing the tests and writing the app code. That is, because Cypress only starts executing its steps at the end, you need to keep this in mind when writing the tests - especially when it comes to variables. So if in the app you can use variables normally and in the tests you need to be very vary, you're likely to make mistakes, especially that there seems to be no linter to warn you.

It might be because of that, or it might be simply because it's different but I'd rather not use Cypress anywhere myself.