That's right, this again!
After 38 total commits, I finally got my pull request merged! Today's work built on the previous days' and consisted of a bunch of tiny changes to make everything just work better.
Next up, the recommended videos list...
Despite CSS being per-component on this, it's still really easy to mess things up in certain layouts, thanks to Responsive Design™. I've been thinking about while you can unit test code functions pretty easily, you can't really unit test web pages.
Or can you? About a week ago I saw a satirical comic strip (can't find it now, I did try looking) about testing the web by automatically loading pages and screenshotting them and comparing them with the previous good screenshot so you can see if you broke anything. I actually think this is a really good idea. It's probably been done before, but I tried looking up stuff about it and I couldn't find anything that matches what I want to do (not including companies that want you to pay a lot of money for them to do it for you). Here's the plan of what I want to do:
First, you change some code. You want to make sure it doesn't mess up other parts of the design.
Before you commit, you run some command like npm test. Selenium, or a similar browser, starts up.
Selenium goes through the list of actions you prepared, captures screenshots of various stages at various window sizes, and saves each screenshot to a file.
Some software then compares the screenshots with the previous time the screenshots were taken, and checks if every pixel is identical. If it is, then this view is fine, and you don't need to review this screenshot later. If the screenshots are different, then it generates a visual diff of the two images, and adds that image to a list.
Once the browser simulator is done, some software then goes through the list of images that are different and presents the before-after-diff for each shot in a gallery. The person can then decide whether the change is fine, in which case the old screenshot is replaced by the new one, or whether the change is bad, in which case the old screenshot is not replaced and the person has to go back and try to fix what they broke. Once they're done, they can run it again.
I don't think this exists yet, so I'm really interested to try to create it, since I imagine it'll be so helpful for anyone making complex web apps. I definitely want to use it for FreeTube if I can make something work.
If there is software that already does this that I've overlooked (can Selenium just do this out of the box?) then please let me know so I don't waste hours making my own dumb thing.
— Cadence
