How to check that a React (or really any) website looks the way you expect it to without looking.
Below are links to repo’s relevant to the talk you may or may not have just taken part in 😀. If you were there then thanks for joining me, if not or you fancy a refresher then read on.
- Jest Snapshot Branch: Using Snapshots to test React components look like they did before
- NightwatchJS Visual regression testing branch using S3: Using NightwatchJS visual regression testing to check if your component or page looks the way it did before.
- Cypress and Percy branch: Using Cypress and the Percy to do the same but maybe better (at a cost).
Terms 📖
Before I go on I’ll just define some terms.
- Snapshot, in this case I’m referring to a string that represents your rendered React component.
- Visual diff or Visual Regression, in this case I’m referring to programatically comparing two screenshots and highlighting the differences.
The talk 🎙
In September 2023 I had the pleasure of doing a talk on Snapshot testing and visual regression testing at MancJS, a Javascript developer meet up in Manchester UK.
The talk was focused on automated methods of checking, through static comparison, whether or not your website still looks the way you want it to after making change.
Why did I want to talk? 🤔
I’ve been in QA now for 10+ years and was keen to share my experiences working with different automation technologies in the hopes of making that learning journey just a bit shorter or richer for other people who’ve not yet had that experience.
What did I talk about? 🤓
I talked about 3 methods of checking that your website looks like you expect;
Using Jest snapshots to compare the current view of your react components to their previous state. Giving you the opportunity to notice issues you may have introduced without knowing.
Then using NightwatchJS and NightwatchJS VRT to do static comparisons of screenshots instead of code snapshots. This could be done on a component or full page level to compare the rendered version of the application to a previous state. I talk a little about how to handle the storage of your screenshots using S3 as well.
Finally I showed how you could achieve the same as the above and more using Percy. A paid for testing as a service platform. Using Cypress to drive the tests and render the application I demonstrated features that Percy had to offer.
Takeaways 🍟
I tried to keep the talk simple by talking only about the cost of implementation versus the amount of information you get back.
- I concluded that Jest offered the cheapest starting point but provided the smallest amount of information.
- That NightwatchJS VRT provided a good amount of information and despite its comparatively high initial set up cost was cheap over the long term.
- Finally that using Percy provided you lots of options and was easy to set up at the start but as you scale costs could start outweighing the benefits.
There are lots of ways to measure whether tests are valuable, flakiness, time to complete and complexity of maintenance to name a few. All these things need to be taken into account but if you want to assure that your site looks right then these tools are a great ones to have in your toolbox.
Anything you want to add? Anywhere I’m wrong? Got any tips or tricks of your own? let me know. Otherwise thanks for reading, I hope this helped you.
Leave a Reply