Tests for visual appearance / how things look

[fabianwohlfart]

I'm pretty new to testing. On most of the websites I build, the bugs aren’t usually about business logic, but more about how things look.

Here are a few examples of things I'd like to figure out how to test:

• We have two banner sections with a parallax effect (using preserve-3d and translateZ), and there's an introduction text in between. It all works great unless the intro text is too short or missing entirely. In that case, the parallax elements from the first banner overlap the second one. We didn't notice this for two years because we always had intro texts in place!
• In some parts of the text, we have footnotes. These footnotes can be auto-generated excerpts from articles. The same excerpts are also used between blocks of text, but when they’re in footnotes, they don’t have images. We accidentally removed a prop that controlled whether an image showed up, and because of that, the footnote excerpts were too big because they showed the image. This excerpt was used so rare that we missed it in our normal checks, simply scrolling past the one instance where it appeared.
• After refactoring a core function, a click event on a specific element stopped working properly. This led to elements being hidden when they should’ve been visible. Technically, the function wasn’t wrong, but there was a logic issue with how CSS classes and the function's output interacted.

I was thinking about using real data for testing—maybe scraping my live site first, then testing it against some rules I set up for each component. But I’m worried I’ll only catch bugs that I’ve already found.

How do you handle bugs like these?

Any advice would be great!