10 ms·
For anyone new to Cypress, there are two things that I consider killer features: 1. It saves a snapshot of the DOM state before/after each test step. If you ha
by mikehearn 6y ago
For anyone new to Cypress, there are two things that I consider killer features:
1. It saves a snapshot of the DOM state before/after each test step. If you have a long acceptance test where it's deeply navigating through your app (i.e. visit "/admin", click on "Login", type "username", click "Submit"), using the GUI test runner will show each individual step in a side-panel. From there, you can hover over a step to see a snapshot of what the page looked like before that step was executed, and a snapshot of what it looked like after.
I had previously only used test runners where, when it would run the acceptance test, you would see a series of really quick flashes of the runner executing a bunch of steps faster than my eye could track, and then a big FAILED message. What failed? How did it fail? Cypress solves this problem by saving the DOM state and allowing me to traverse backwards through the state of the app until I find where things started to go wrong.
2. The cli test runner records a video of its test runs. Super useful in CI where you don't have access to the frontend. Cypress will record its run to an MP4 and you can investigate failures after-the-fact. This has solved a lot of "it works on my machine but not in CI" problems that seem to come up pretty often.
The other positive thing I have to say about Cypress is that I've actually found it more helpful as a development sidekick tool than as a test runner. Particularly when developing features on the front-end that require a lot of user interaction, many times it's easier for me to whip up a quick Cypress test that automates the user interaction (with assertions along the way to make sure the app is working) and then use the GUI Test Runner to do all my debugging.
It's not perfect and I definitely have some frustrations with it, but on the whole it's helped my productivity quite a bit.
- byteofmydream 6y agothis 2 'killer features' could be implemented in your tests in a day or two. Also, you can use video recording features implemented in docker images like Zalenium
- mikehearn 6y agoIn all seriousness, if that's true you should do it and productize it. Based on the comments here it seems like many people prefer other browser scripting tools, so if you can replicate the novel features of Cypress in a better package, you could make money. Cypress raised almost $10M in their Series A.
- azemetre 6y agoPeople have done this (even so far as completely replicating the Cypress Dashboard features): https://github.com/sorry-cypress/sorry-cypress https://github.com/sorry-cypress/sorry-cypress
- inglor 6y agoHey I wrote an open source tool that does #1 for Puppeteer and Playwright. I didn't bother doing videos since qawolf already wrote a plugin for that https://github.com/testimio/root-cause https://github.com/testimio/root-cause So both those things are quite possible with open source tools.
- deepstack 6y agoThanks you for bringing up Puppeteer and Playwright!!!! when I saw this, I was thinking why use this unintuitive tool and coding style? when there is open source projects out there?
- wdb 6y agoWow nice, that looks great. Documentation is confusing, and keeps complaining that localhost:6789 is not running. Wondering which step I missed after using the jest plugin and doing npx root-cause show and select the test via terminal
- mikehearn 6y agoOne minor point of differentiation, it looks like while this uses screenshots to capture each step (correct me if I'm wrong), Cypress captures the DOM structure. You can go back to any step an inspect the raw code on the page, which offers a bit more context when debugging.
- inglor 6y agoThat is supported in Testim Root Cause - actually a PR we got a bit back from an unrelated user :]
- Vinnl 6y agoThey're still in restricted beta and only work on MacOS so far, but Replay [1] is really interesting in that regard, and would be fantastic to use for e2e tests: it not only saves a snapshot of the DOM, but of the entire execution environment. You can then replay it, add breakpoints, log statements and what not after the fact to investigate what broke. [1] https://replay.io/ https://replay.io/