Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Backstop is running but not creating enough screenshots
See original GitHub issueSo have have this basic backstop.json:
{
"id": "project",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
},
{
"label": "tablet",
"width": 1024,
"height": 768
}
],
"onBeforeScript": "chromy/onBefore.js",
"onReadyScript": "chromy/onReady.js",
"scenarios": [],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"engine_scripts": "backstop_data/engine_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": [],
"engine": "chrome",
"engineFlags": [],
"asyncCaptureLimit": 1,
"asyncCompareLimit": 50,
"debug": true,
"debugWindow": true
}
scenarios is empty. I’m requiring my configuration inside my gulpfile, and dynamically creating my scenarios:
const fs = require('fs');
const backstopJs = require('backstopjs');
const backstopJsConfig = require('./backstop.json');
gulp.task('backstop_reference', function () {
return backstop('reference');
});
gulp.task('backstop_test', function () {
return backstop('test');
});
function backstop(action) {
const dir = 'build/library/components/preview';
var files = fs.readdirSync(dir)
.filter(function (file) {
return fs.statSync(path.join(dir, file)).isFile();
});
console.log(`Files: ${files.join('\n')}`);
return backstopJs(action, Object.assign(backstopJsConfig, {
scenarios: files.map(f => ({ label: f, url: path.join(dir, f) }))
}))
.slice(0, 10);
}
This works like a charm. The debug console.log is confirming that I have files to be scanned. During my troubleshooting I’m only using the first 10 files. BackstopJS is only generating 3 files:
- project_badgehtml_0_document_0_phone.png
- project_button-grouphtml_0_document_1_tablet
- project_buttonhtml_0_document_0_phone
Console output:
D:\git\project [backstopjs +3 ~4 -251 !]> gulp backstop_reference
[15:07:56] Using gulpfile D:\git\project\gulpfile.js
[15:07:56] Starting 'backstop_reference'...
[15:07:56] Files: aanvragen.html
accordion.html
alert.html
anchor.html
badge.html
breadcrumbs.html
button-group.html
button.html
carousel.html
checken.html
Loading config: D:\git\project\backstop.json
COMMAND | Executing core for `reference`
clean | backstop_data/bitmaps_reference was cleaned.
createBitmaps | Selected 10 of 10 scenarios.
Starting Chromy: port:9222 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > aanvragen.html
Starting Chromy: port:9223 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > aanvragen.html
Starting Chromy: port:9224 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > accordion.html
Starting Chromy: port:9225 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > accordion.html
Starting Chromy: port:9226 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > alert.html
Starting Chromy: port:9227 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > alert.html
Starting Chromy: port:9228 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > anchor.html
Starting Chromy: port:9229 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > anchor.html
Starting Chromy: port:9230 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > badge.html
9230 Chrome v64 detected.
9230 INFO > BackstopTools have been installed.
9230HEAD > <head>
<meta charset="utf-8">
<title>Default | project Component Library - Component preview</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
<link rel="stylesheet" href="../../styles/project.css">
</head>
9230BODY > <body>
<div class="container">
<span class="badge">3</span>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="../../scripts/project.js"></script>
</body>
Starting Chromy: port:9231 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > badge.html
Starting Chromy: port:9232 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > breadcrumbs.html
Starting Chromy: port:9233 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > breadcrumbs.html
Starting Chromy: port:9234 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > button-group.html
(node:9020) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
Starting Chromy: port:9235 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > button-group.html
9235 Chrome v64 detected.
9235 INFO > BackstopTools have been installed.
9235HEAD > <head>
<meta charset="utf-8">
<title>Button Group | project Component Library - Component preview</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
<link rel="stylesheet" href="../../styles/project.css">
</head>
9235BODY > <body>
<div class="container">
<!-- Start: @button-group--m -->
<div class="btn-group " role="group" aria-label="Medium button group">
<button type="button" class="btn btn-primary">Links</button>
<button type="button" class="btn btn-primary">Midden</button>
<button type="button" class="btn btn-primary">Rechts</button>
</div>
<!-- End: @button-group--m --><hr>
<!-- Start: @button-group--xs -->
<div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
<button type="button" class="btn btn-primary">Links</button>
<button type="button" class="btn btn-primary">Midden</button>
<button type="button" class="btn btn-primary">Rechts</button>
</div>
<!-- End: @button-group--xs --><hr>
<!-- Start: @button-group--s -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-primary">Links</button>
<button type="button" class="btn btn-primary">Midden</button>
<button type="button" class="btn btn-primary">Rechts</button>
</div>
<!-- End: @button-group--s --><hr>
<!-- Start: @button-group--l -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-primary">Links</button>
<button type="button" class="btn btn-primary">Midden</button>
<button type="button" class="btn btn-primary">Rechts</button>
</div>
<!-- End: @button-group--l --><hr>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="../../scripts/project.js"></script>
</body>
Starting Chromy: port:9236 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > button.html
9236 Chrome v64 detected.
9236 INFO > BackstopTools have been installed.
9236HEAD > <head>
<meta charset="utf-8">
<title>Button | project Component Library - Component preview</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
<link rel="stylesheet" href="../../styles/project.css">
</head>
9236BODY > <body>
<div class="container">
<!-- Start: @button--default -->
<button type="button" class="btn btn-default">
Versturen
</button>
<!-- End: @button--default --><hr>
<!-- Start: @button--primary -->
<button type="submit" class="btn btn-primary">
Versturen
</button>
<!-- End: @button--primary --><hr>
<!-- Start: @button--disabled -->
<button type="submit" class="btn btn-default" disabled="">
Versturen
</button>
<!-- End: @button--disabled --><hr>
<!-- Start: @button--with-icon -->
<button type="button" class="btn btn-default">
<span class="fa fa-lock" aria-hidden="true"></span>
<span class="sr-only">Vergrendelen</span>
</button>
<!-- End: @button--with-icon --><hr>
<!-- Start: @button--with-badge -->
<button type="button" class="btn btn-default">
Versturen
<span class="badge">3</span>
</button>
<!-- End: @button--with-badge --><hr>
<!-- Start: @button--with-icon-badge -->
<button type="button" class="btn btn-default">
<span class="fa fa-envelope-o" aria-hidden="true"></span>
Berichten
<span class="badge">3</span>
</button>
<!-- End: @button--with-icon-badge --><hr>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="../../scripts/project.js"></script>
</body>
Starting Chromy: port:9237 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > button.html
Starting Chromy: port:9238 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > carousel.html
Starting Chromy: port:9239 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > carousel.html
Starting Chromy: port:9240 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=320,480
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > checken.html
Starting Chromy: port:9241 --disable-gpu,--force-device-scale-factor=1,--disable-infobars=true,--window-size=1024,768
CREATING NEW REFERENCE FILES
Cookie state restored with: []
SCENARIO > checken.html
Run `$ backstop test` to generate diff report.
COMMAND | Command `reference` sucessfully executed in [13.939s]
[15:08:10] Finished 'backstop_reference' after 14 s
D:\git\project [backstopjs +3 ~4 -251 !]>
I haven’t got the faintest what to do.
I’m running Windows 10, Node 8.8.1, npm 5.5.1, backstopjs 3.0.31 and Chrome 62
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:9 (3 by maintainers)
Top Results From Across the Web
Using BackstopJS to Spot the Difference - Pantheon.io
The backstop reference command sets the baseline that you're testing against and makes sure that you're not comparing against a moving target.
Read more >How to fix Mac screenshots not working - Setapp
1. Check your Mac's shortcut settings · Click on the Apple in the top left corner of your screen and choose System Preferences....
Read more >Image and screenshot comparison tools for UI testing
There is a simple case for why end-to-end UI testing is impossible without automated image comparison. Absence of a screenshot comparison ...
Read more >It says: "There are still screenshot uploads in progress." when ...
Sorry to hear this is happening. This message means there are screenshot uploads that were started but never finished. Normally if an upload...
Read more >Insert a screenshot or screen clipping - Microsoft Support
Without leaving the app that you are working in, you can add a snapshot of the screen to your Office file to enhance...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@lancetharper Glad you were able to get it working! Yes, it’s totally possible a zombie chrome process can be the issue. Most unhandled error states that could lead to this issue were fixed in 3.0.27… https://github.com/garris/BackstopJS/commit/8e0074f8fd6366f87d4743099735e79ddcc40b1f#diff-9e67e5c53c6a24f5b7f26f857fff03eaR174
After that fix I haven’t seen the issue again – even when killing the process manually. That said, you could probably still get a zombie if a bad enough error occurs (like if chrome itself freezes). To double make sure this doesn’t happen at work, I’ve added a chrome-headless forced kill command in front of the npm script which calls various backstop tests e.g.
pkill -f '(chrome)?(--headless)'; backstop testThanks for posting!
It appears the new version resolved my problems as well, thanks @garris !