Looking for NPM library or service for pixel (perfect) testing [closed]

I am looking for advice about a library or a service that will help with the following test case:

I'd like to test UI components from apps/websites, not as code components, but like images, which are placed exactly, by x/y coordinates where they should be.

I understand that it sounds like I am looking for a PixelMatch, but my whole point is not comparing two different images between each other, but the following:

Imagine that I have a button in the main UI window (doesn't matter is that electron app or browser) So I initiate it in code, something like:

const button = new Frame({from_x: 50, from_y: 150, width: 200, height: 65})

As you may understand, from most of these arguments-coordinates can be easily evaluated center point, borders, and so on. Technically, I am searching for a library, which will help me to create squares, circles, other simple geometrical objects (instead of drawing them) and compare them from (current version) of the screenshotted interface.

Why comparing with images, instead of the CSS/styled markdown/element components? Because in some cases there is no access to the source code. Or we need to test various variants for different screen resolutions.

What have I done for now? I am using ES6 classes with getters/setters to create Frames (UI elements) and evaluate their coordinates and points and then taking a screenshot of the current UI after build via Jimp/Sharp and compare keypoint pixels by color. But I am guessing, that I am not the only one in the world having this problem and asking about such a library.