garris / garris/BackstopJS

Docker BackstopJS sometimes produces white or cut-off screenshots

Open
#1,156 27 comments 3 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

**Update**: This now occurred with both 4.4.2 Docker image and 4.5.0 Docker image as indicated in [my comment below](https://github.com/garris/BackstopJS/issues/1156#issuecomment-596457533)

Our builds currently break with the newest Docker BackstopJS image, 4.5.0. It breaks with both npm version `4.4.2` and `4.5.0`.

Out of our ~1100 tests, 395 fail. Judging from how the tests fail, it seems like BackstopJS doesn't wait long enough until the content is rendered. Most screenshots are completely white and a few show content which is not completely rendered. Most of the tests that are failing are simple HTML/CSS pages. They load some JavaScript but it does not change the appearance. We also have parts of our pages built with React. With the React components, the "white screenshot" issue happens with a much smaller percentage but it is still there.

The original of the screenshot I'm showing here can be seen here: https://www.static-immobilienscout24.de/fro/core/4.2.3/documentation/html/campaign-box.html#usage

If need be, I could also provide a zip file with the HTML pages and our `backstop.json`.

![Screen Shot 2020-03-02 at 12 31 04](https://user-images.githubusercontent.com/6302908/75672752-b1b22480-5c81-11ea-9536-b671a348cd50.png)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the white and cut-off screenshots with the affected Docker images (4.4.2 and 4.5.0), the reported HTML/CSS pages, and the project's backstop.json. Compare rendering and wait behavior across the versions; done means the provided pages produce complete, non-white screenshots reliably.

Written by the indexing model from the issue text.

Assessment

Tech stack
docker, javascript
Domain
testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.