[Feature Request] Add slider and side to side comparison to attachments (screenshots)

[edumserrano]

Currently when there are differences in screenshots, monocart-reporter offers 3 tabs to visualize the difference, diff, actual and expected, with a clever way to swap between the tabs by holding the left mouse on the picture of an active tab. For instance, holding the left mouse on the image of the diff tab will swap the image to the actual tab. Example:

Although this is great. I've found that having the side by side and slider tabs as the built-in html reporter provides is more helpful. The built-in html reporter provides the 3 tabs that monocart reporter provides and adds the two extra side by side and slider tabs.

Side by side tab example:

Slider tab example:

@cenfun, would you consider adding these tabs to monocart-reporter? This is definitely not a very important feature but it's a nice quality of life improvement.

[cenfun]

I thought we can consider adding Side by side, which looks simple but can be used to preview and compare the overall of screenshots.

For Slider, I personally think it's a good design which is telling users that this is a comparator, but it provides a bad interaction experience and comparison results. Dragging operations are very time-consuming and more expensive compared to one button single click. BTW, I test the Slider is not working on my mobile Phone or Pad, the most possible reason is that the Slider dragging haven't support with mobile touch events, while clicks are always supported.

[edumserrano]

I would argue that there would be very little amount of users trying to debug playwright screenshot differences on a mobile but worth noting yes.

In my experience the slider tab on the built-in html reporter has been really useful when debugging small differences in pixels, for instance when something is just a couple of pixels up or down, shadow differences are also easy to debug with the slider. Both of these examples haven't been that easy going back and forth on an image, even with the monocart-reporter excellent click and hold option.

That's just my two cents though. Feel free to close this issue without implementing any of the suggested tabs. I just like the monocart-reporter so much that when I see something in another reporter I find useful I suggest you add it here as well =)

[cenfun]

Please try monocart-reporter@2.7.0

After consideration, I have decided to add these two comparators. Compared to the official built-in html report, the difference is that it supports zooming in and out.

[edumserrano]

It's working like a charm. Awesome work as usual. Thank you @cenfun 🥇