How to automatically check layout?

Question

css

Hi all!
Interested in how to organize testing projects.
It often happens that in the process of editing bugs, a dozen more bugs appear in other places.
This mainly applies to medium and large projects, and when there is a team from different levels of developers, for example, there is a bug, right, but on other pages in blocks with modifiers it breaks because they forgot / did not know that it was necessary to reset the property there.
As I see this action, the person corrected it, the assembler checked it and reported that it had broken in such a place.
Is there something like that?

Answer 1

there are a couple of links on this topic in the bookmarks - they are waiting in the wings) - link and link2

Answer 2

I use two tools:
1. jest-dom . This is if you need to point-check the elements on the page. It is convenient if there is no need to test everything, everything, everything. You knock on the element you need and check it.
2. jest-image-snapshot . Screenshot testing is a great help when testing user behavior. There are all sorts of scrolls, hovers, tricks and so on. In fact, you just take a reference screenshot of the page, drive in the behavior of the page. After that, when testing, it is checked if the behavior is broken

Answer 3

Jest can take snapshots
https://jestjs.io/docs/en/snapshot-testing