garris
Backstop does not correctly render web pages
Hi, we want to use BackstopJS to monitor design "crashes" on our WordPress site. For some reason Backstop differently render web page for reference and test cases ( different font size, also I noticed that sometimes images does not load at all). I set 1920x1080 screen size but looks like that reference and test rendering in different screen size. I tried also docker way to run Backstop but it has the same problem. I thought this problem related only to our site but when I tried to use google.com the same problem appeared. Do you have any idea what I'm doing wrong?
Please give it first a try with asyncCaptureLimit: 1 and let us know how that goes.
I am also experiencing inconsistent results over web-pages and still not sure where that comes from. (maybe related to #1343 ?)
Hey Folks, im experimenting with this, too. There's one workaround i found: Using 'html' as the selector in the scenario options, helps me to get more consistant results. Interesting about this: Some IMGs (we're loading them as base64 strings) are displayed correct only when i select the html. If i leave that blank (document) sometimes they are printed in the screenshot, sometimes not.
Another thing i did to improve performance and stability: I wrote a script, triggered by a URL Parameter that uses jQuery to delete anything below 16000px and also sets overflow-x: hidden to the body element.
Let me know if you got a tip how to render these images properly without using the html-tag as a selector.
Greetings!
Some suggestions:
- make sure that the fonts are "pre-loaded", this is an issue that I've experienced over and over. By fixing this on the website, fixed also the backstop font issue capturing.
- use
--dockerfor consistent capturing, if you use capturing on different machines, then this is a must-do otherwise you really get different results, slight changes
With image loading I still have issues "sometimes" but this is mainly on localhost environments.