tldr; I like Cypress more
At my work experience at the BBC, I got introduced to Puppeteer as an alternative to Cypress for writing automated browser tests. It looked quite interesting and I spent some of my days there writing basic smoke tests for the BBC homepage.
Afterwards, I decided to go through an exercise to write the same test suite in both Cypres and Puppeteer, to be able to compare the two frameworks.
I decided to run the test against ToDo MVC project. ToDo MVC is a project that implements a ToDo list in different JavaScript frameworks (React, Vue, Angular etc…) in order to help with learning them and compare them.
I thought it would be fun to do the same for end to end testing. To write the same test suite using different frameworks and tools.
My first impressions:
- Documentation: The hardest part of Puppeteer for me was to navigate its documentation. Cypress has great documentation, including videos and tutorials, and good search. It’s a struggle to find info in the Puppeteer documentation.
- Getting started: It took me a bit of time to get started with Puppeteer (again, bad documentation). It took me for example almost half day to find out how to run the tests in a browser (instead of headless). Comparing this is to my experience in Cypress, where I got up and running in minutes.
- Waiting for elements in Puppeteer is annoying: I have to always wait for elements in a page before performing any action. Cypress does that for me out of the box and it is rare that I have to tell it to wait for elements in the page.
Cypress has a good default for waiting till you find the selector you are looking for, however puppeteer you need to explicitly say that you need to wait .
- The assertions: I got used to the way assertions are done in Cypress. Although Puppeteer is using Jest (which I have used before with React), it always feel hard to assert what I am looking for with Puppeteer. This is probably just a matter of getting used to it.
- A lot of callbacks and promises: The code in general seems more complicated in Puppeteer, with a lot of nested callbacks. I tried to use async/await more, but still felt like Cypress API is easier to use.
- Cypress doesn’t do some things: The main reason BBC wasn’t going with Cypress, is that it had some limitations especially with testing iframes. Puppeteer does not have such limitations.
- Puppeteer is harder.
I will contniue with this exercise, and create new blog posts as I learn more about the two frameworks (and other frameworks). But for now, I am not a fan of Puppeteer.
Please feel free to correct me if I am doing anything wrong or approaching one of the frameworks in the wrong way.