While attempting to scale BackstopJS, meaning trying to split up the original backstop.json file into a directory of organized scenario json files, the function I have in my config file is reading each json file as a scenario, not a collection of scenarios as I intended.
From my config file (backstop.js):
var fs = require ('fs');
var allScenarios = [];
function loadScenarios (dirname, onError) {
var files = fs.readdirSync(dirname);
console.log(dirname);
files.forEach (function (file) {
content = fs.readFileSync(dirname + file, 'utf-8');
allScenarios.push(JSON.parse(content));
console.log("content");
})
}
loadScenarios ('scenarios/',
function (err) {
throw err
}
)
module.exports = {
"id": "Scaled_Backstop",
"viewports": [
{
"label": "desktop",
"width": 1600,
"height": 1024
}
],
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript": "puppet/onReady.js",
"scenarios": allScenarios,
"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": ["browser"],
"engine": "puppeteer",
"engineOptions": {
"args": ["--no-sandbox"]
},
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}
There are the separate json files that are stored within the scenarios directory, here is an example of one, sample-one.json
{
"scenarios": [
{
"label": "UltimateQA - Section of buttons-Title",
"url": "https://ultimateqa.com/complicated-page",
"delay": 1000,
"postInteractionWait": 1000,
"selectors": ["#Section_of_Buttons"],
"selectorExpansion": true,
"misMatchThreshold": 0.1,
"requireSameDimensions": true
},
{
"label": "UltimateQA - Section of buttons-ButtonSection",
"url": "https://ultimateqa.com/complicated-page",
"delay": 1000,
"postInteractionWait": 1000,
"selectors": [".et_pb_row.et_pb_row_2.et_pb_row_4col"],
"selectorExpansion": true,
"misMatchThreshold": 0.1,
"requireSameDimensions": true
},
{
"label": "UltimateQA - Section of buttons-LoginForm",
"url": "https://ultimateqa.com/complicated-page",
"delay": 1000,
"postInteractionWait": 1000,
"selectors": [".et_pb_module et_pb_login et_pb_login_0 et_pb_newsletter clearfix et_pb_text_align_left et_pb_bg_layout_dark"],
"selectorExpansion": true,
"misMatchThreshold": 0.1,
"requireSameDimensions": true
},
{
"label": "UltimateQA - Section of buttons-ToggleForm",
"url": "https://ultimateqa.com/complicated-page",
"delay": 1000,
"clickSelectors": [".et_pb_toggle_title"],
"postInteractionWait": 1000,
"selectors": [""],
"selectorExpansion": true,
"misMatchThreshold": 0.1,
"requireSameDimensions": true
},
{
"label": "UltimateQA - Section of buttons-TwitterButton",
"url": "https://ultimateqa.com/complicated-page",
"delay": 1000,
"clickSelectors": [""],
"postInteractionWait": 1000,
"selectors": [".icon et_pb_with_border"],
"selectorExpansion": true,
"misMatchThreshold": 0.1,
"requireSameDimensions": true
}
]
}
When I run backstop test --configPath=./backstop.js
, it runs BackstopJS but only shows it's selected 3 scenarios when I have 11 scenarios within 3 files, so it seems to me that the function I have is only reading the files themselves as scenarios, not collections of scenarios.
Am I missing a step in iterating the files themselves or is there something completely different that I am missing?
I thought fetch would be the best approach, but I couldn't get any fetch function to run BackstopJS.
Using 'fs' instead did run BackstopJS, but I must be missing a step in iterating the files themselves, as it's reading each file as a scenario, & not a collection of scenarios.
Or I just misunderstood the object orientation in JSON, maybe I can't have the same object declared in different files?
Also, in my attempt, I am not opposed to taking a different direction if anyone knows of a working example of a successfully scaled BackstopJS project, one with better scenario organization & possibly more advanced functionality such as turning the url into a variable & creating a test flag to call that variable. There's a lot I want BackstopJS to do, this is just my main focus right now.
Thanks in advance for reading & any insight!