BackstopJS
BackstopJS copied to clipboard
Issues generating screenshots of pages
Hi, I've been working with BackstopJS on an off for a few months now on a project for a client.
Recently however, I have noticed a few inconsistencies appearing around how the package (and possibly puppeteer) is capturing the screenshots.
Unfortunately I cannot share screenshots due to NDA restrictions but the issues I have been seeing are as follows:
-
BackstopJS is not always capturing the page in its entirety, in some cases it will only capture part of the page. However as I said before this is inconsistent behaviour and often where you might have a reference image of a full page it BackstopJS will compare a partial screen capture and mark this as the same. The same goes for when BackstopJS has only captured part of a page for the reference but a full page for the test image.
-
Sometimes BackstopJS will capture reference image perfectly fine but not capture the test time and then when it compares the two it will mark the lack of test image as being the same as the reference image when in actual fact it isn't (one has content, the other doesn't). Again this seems to happen when there is no screenshot for the reference image too.
In both of these cases the mismatchThreshold is only set to 4%
I've had the exact same problem with puppeteer alone. It seems like the snapshot promise does not always wait for a full render. I've added code to wait and retry if the difference is high. It helped significantly. But I still have the same problem. I immediately looked here when I read about this tool. But it doesn't seem like they have figured out a solution.
Cheers!!!
Currently having the same issue