garris / garris/BackstopJS

Resize before screenshot causing flaky tests

Open
#968 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

When I run the debug window, I've noticed that there is some kind of resize happening before screenshots are taken. This is okay for most tests, but I also have certain scenarios with components which animate when resize is triggered. For these specific scenarios the screenshots are inconsistent and therefore the tests are flaky.

Is there any way to stop the resize? I'm currently looking through the source code for backstop but I don't see a specific resize happening. I think the resize event should happen before everything everything else is run so that the page has time to settle.

I'm running this in docker.
My config:
```
var config = {
id: 'myId',
viewports: [
{
label: 'desktop',
width: env_config.viewport.width,
height: env_config.viewport.height
}
],
onBeforeScript: 'puppet/onBefore.js',
onReadyScript: 'puppet/onReady.js',
scenarios: [...myScenarios],
paths: {
bitmaps_reference: 'src/bitmaps_reference',
bitmaps_test: 'report/bitmaps_test',
engine_scripts: 'src/engine_scripts',
html_report: 'report/html_report',
ci_report: 'report/ci_report'
},
report: ['browser', 'CI'],
engine: 'puppeteer',
engineOptions: {
waitTimeout: 90000,
gotoTimeout: 300000,
headless: true,
args: ['--no-check-certificate', '--disable-dev-shm-usage', '--no-sandbox']
},
resembleOutputOptions: {
ignoreAntialiasing: true
},
asyncCaptureLimit: env_config.baseURL.includes('http:') ? 1 : 3,
asyncCompareLimit: 50
};
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.