0

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!

  • This attempt within my repo can be found [here](https://github.com/jmzager0110/BackstopJS_Demo/tree/master/scaled_backstop) I couldn't include the link, code from the other scenario files, or image of the file structure in the post. – CaptainButtface May 07 '23 at 16:41

0 Answers0