CODEWITHSUNDEEP
javascriptjsonbackstop.js
CaptainButtface
CaptainButtface

Reputation: 1

Scaling BackstopJS - Config file reads each scenario file as a scenario instead of a collection of scenarios

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!

Upvotes: 0

Views: 404

Answers (1)

Horizon
Horizon

Reputation: 85

I developed a project that serves the same scaling purpose, opting for YAML instead of JSON for the test cases. This project has been adopted as a standard tool across all projects within my department, including four enterprise-grade projects to date. Feel free to check it out to see if it meets your requirements:

Documentation:
https://www.tuyen.xyz/optimizely-cms/testing/get-started/

Repository (MIT license):
https://github.com/precise-alloy/regression-test

If you opt not to use the structure provided by the repository mentioned above, you can refer to the code behind to understand how to organize the logic for separating test suites into individual files.

Upvotes: 0

Related Questions