As I strive to scale BackstopJS by breaking down the original backstop.json file into a directory of structured scenario JSON files, I'm encountering an issue where the function in my config file interprets each JSON file as a single scenario instead of a collection of scenarios as intended.
In 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
}
Within the scenarios directory, there are distinct JSON files storing scenarios. Here's an example from 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
}
]
}
Upon running
backstop test --configPath=./backstop.jsAm I overlooking a step in iterating through the files, or is there a different aspect that I'm missing entirely?
I initially considered using fetch, but implementing any fetch function to run BackstopJS proved unsuccessful.
While opting for 'fs' did run BackstopJS, I seem to be missing a crucial step in iterating through the files, as each file is being read as an isolated scenario, rather than part of a collection of scenarios.
Could it be an issue with the object orientation in JSON, where the same object cannot be declared in different files?
If anyone has a successful example of scaling a BackstopJS project with improved scenario organization and advanced functionality such as dynamic URLs and test flags, I am open to exploring alternative approaches. Enhancing BackstopJS functionality is my primary goal at the moment.
Thank you for your time and any insights!