CSS Visual Regession Testing with BackdropJS - could not run grunt:reference or grunt:test

Question

I tried following this tutorial link on setting up backstop.js

https://joe-watkins.io/css-visual-regression-testing-with-grunt-backstopjs/

I followed all the instructions as required.

But I'm running into this error onscreen.

andy.cmwong@ONLM4800GR8LN32 /c/backstop_test
$ grunt backstop:reference
Running "backstop:reference" (backstop) task
[12:16:30] Using gulpfile c:\backstop_test\bower_components\backstopjs\gulpfile.js
[12:16:30] Starting 'clean'...
bitmaps_reference was cleaned.
[12:16:30] Starting 'bless'...
[12:16:30] Finished 'clean' after 9.82 ms
[12:16:30] Finished 'bless' after 15 ms
[12:16:30] Starting 'reference'...
[12:16:30] Starting 'init'...
[12:16:30] Finished 'init' after 73 μs
[12:16:30] Starting 'test'...

Generating reference files.

[12:16:30] Finished 'test' after 4.03 ms
reference has run.
[12:16:30] Finished 'reference' after 5.24 ms

Testing script failed with code: 1

Looks like an error occured. You may want to try running `$ gulp echo`. This will echo the requested test URL output to the console. You can check this output to verify that the file requested is inde
ed being received in the expected format.



cp: cannot stat `./bitmaps_reference': No such file or directory

ERROR: Error: Command failed: C:\Windows\system32\cmd.exe /s /c "cp -rf ./bitmaps_reference c:\backstop_test\tests"
cp: cannot stat `./bitmaps_reference': No such file or directory

Earlier, there was an additional error which states the gulp.run() is deprecated thus it suggested I need to use another npm module to execute tasks in sequence, which led me to this.

https://www.npmjs.com/package/run-sequence

And I managed to resolved it like so

//under bower_components/gulp/tasks/reference.js
var gulp = require('gulp');
var runSequence = require('run-sequence').use(gulp);

//FIRST CLEAN REFERENCE DIR.  THEN TEST
gulp.task('reference', ['clean','bless'], function() {
    //gulp.run('test');
    runSequence('test');
    console.log('reference has run.');
});

It works.

However, I'm still not able to complete the grunt/gulp tasks execution thus I'm really stuck with this.

I'm wondering has anybody tried following the tutorial link above and managed to succeed in getting backstopjs to work?

Your input on this is greatly appreciated.

UPDATE

I forgot to show you what my grunt config setup looks like.

........................

grunt.initConfig({

    backstop: {
        setup: {
            options : {
                backstop_path: './bower_components/backstopjs',
                test_path: './tests',
                setup: false,
                configure: true
            }
        },
        test: {
            options : {
                backstop_path: './bower_components/backstopjs',
                test_path: './tests',
                create_references: false,
                run_tests: true
            }
        },
        reference: {
            options : {
                backstop_path: '/bower_components/backstopjs',
                test_path: './tests',
                create_references: true,
                run_tests: false
            }
        }
    }

});
......................etc

My backstop.json file

{
  "viewports": [
    {
      "name": "phone",
      "width": 320,
      "height": 480
    },
    {
      "name": "tablet_v",
      "width": 568,
      "height": 1024
    },
    {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "http://getbootstrap.com",
      "url": "http://getbootstrap.com",
      "hideSelectors": [],
      "removeSelectors": [
        "#carbonads-container"
      ],
      "selectors": [
        "header",
        "main",
        "body .bs-docs-featurette:nth-of-type(1)",
        "body .bs-docs-featurette:nth-of-type(2)",
        "footer",
        "body"
      ],
      "readyEvent": null,
      "delay": 500,
      "misMatchThreshold" : 0.1
    }
  ]
}

Answer 1

I managed to get it working last night when I got onto my Linux box(VMWare build), redo the backstopjs setup and successfully perform some test runs.

I did have my original suspicion that it was my Window OS environment that wasn't set up properly so I may have to reinstall npm/node/backstop etc, and have it resolved from there.

All good now.