[Found a fix] Problems with usage of puppeteer screenshooting
- Dominant language
- JavaScript
- Stars
- 7.2k
- Forks
- 621
- PR merge metrics
- No merged PRs in 30d
Description
Hey guys,
I had several hard days of debugging when I found a solution to several randomly appearing problems that we encountered, whenever we switched to a Backstop (docker) version > 4.4.2.
And there are several other issues that (for me) look related to this...
**Our problems:**
- Screenshots were taken at the wrong location (having an offset left and top), sometimes with the wrong height
- Screenshots were different caused by transitions that should not have occured (i.e. hovered elements without any interaction or definition for it, elements moved b/c of an collapes/expand transition that normally should only happen on user interaction)
- This was happening **completely unpredictable** on any shot. But mostly happened on large viewport "lg" 1440x768 (we have 4 of them xs,sm,md,lg) and mostly on elements further down the page. Also more on the scenarios that were using `selectorExpansion=true`
**Findings from investigation:**
- It turned out that the height offset was somewhat related to the height of images on the page (offset sometimes was exactly a multiple of image sizes on the page)
- Any try with "waiting for the transitions/animations to end" did not help
- Also was it clear that we would have two types of problems:
- 1. Screenshots with wrong calculation of position/height
- 2. Screenshots taken while an animation/transition was ongoing
**The Fix/Workaround**, both within source of backstop:
- Do not call puppeteers screenshot function in parallel (currently happening via async call in core/util/runPuppet.js:391)
- Do pass in `captureBeyondViewport: false`
I will add a patch here.
Also did I have to change our viewport definition to height: 10000 (because `captureBeyondViewport: false` probably would keep us from getting screenshots further down on the page, I suppose. Haven't tested it without)
**THAT FIXED ALL THE PROBLEMS FOR US.**
For over a week now we are working with Backstop 5.3.4 in our CI pipeline (10 Devs, gitlab pipeline, ~10-20 MRs per day) using this patched version and it works just like a charm.
**Interpretation:**
I suppose there are two things happening here:
1. Puppeteer sometimes messes up screenshots when too many async calls come in in parallel (I could reproduce errors when I reverted my patch on line 391, with the patch they were gone)
2. Puppeteer triggers resize events (width 0, then target width) for the different viewports that in the following trigger several animations / transitions on all responsive elements (I could prove this by adding event listeners logging the events). This does not happen when passing `captureBeyondViewport: false`
Contributor guide
Assessment
This issue has not been assessed yet.