cadence’s website.

Some changes will be applied after reloading.
Some changes will be applied after reloading.

Screenshot tests

Previous post in this series.

Well, I did it. Partially. Getting this far was a lot easier than I expected.

Screenshot tests are here and everything works perfectly!

Screenshots are compared pixel for pixel with no margin for error, because every pixel matters. Annoyingly, Chrome and Firefox render fonts slightly differently, so I can't test them against each other. I've chosen to just use Firefox for tests, and there's a variable that one can change to use Chrome instead, if they want to for some reason. They'll have to regenerate all screenshots if they do that.

There's no web UI to show an image comparison gallery yet. This is important to add. I might render some Pug to a static HTML file which the person can then open in their browser without a webserver. Of course, this means I can't have buttons to OK the changes by replacing files on disk.

Selenium screenshots only screenshot the part of the page in the viewport, rather than an automatic stitched screenshot. I'm not sure what I could do about this in future, apart from simulating scrolling down a few times and capturing more screenshots. The web driver spec currently specifies that screenshots should just be the viewport, so I can't solve this in a sensible way.

There is also a fairly large problem: I can't test profiles because they're dynamic. Data is pulled from Instagram in real time, so if the person uploads another photo, changes their username, or deletes their account, then the tests won't work anymore. Somehow I need to include a system where responses from Instagram are saved to disk, and then I can choose to use those responses instead of live data when testing in the future, essentially testing against a static version of Instagram that won't break on me. This will probably be annoying to do.

I also opened a quick pull request to FreeTube.

This is blog post #100!

— Cadence

A seal on a cushion spinning a globe on its nose.
Another seal. They are friends!