0

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
    }
  ]
}
awongCM
  • 917
  • 5
  • 22
  • 46
  • Try running the `grunt` command in the project directory. This is a one-time thing. No guarantee it will work but give it a shot, it worked for me. As a side note, what's happening is backstop is trying to generate fresh screenshots so it first deletes the reference screenshot directory, but fails to generate a new one. It then tries to copy the non-existent directory to the test folder to run the comparison. – Amru E. Jun 15 '15 at 04:33
  • I ran that before. It's the same problem prior to npm runsequence fix. However, I failed to mention the OS environment that I'm using for this. I'm using git Bash on a Windows machine (not linux or mac) – awongCM Jun 15 '15 at 04:39
  • This is most likely happening because backstop can't access your page (run gulp echo inside the gulp dir and post the output). Is it a hosted URL or localhost? Being on localhost opens up potential Node problems and port issues. If you're not testing against a hosted site, I'd give your backstop.js a webpage URL and test against that. – Amru E. Jun 15 '15 at 04:49
  • I did run gulp echo. Comes up saying Echo files failed with code:1. I'm testing against an actual hosted URL. You can see my backstop.json contents which I just posted again. – awongCM Jun 15 '15 at 04:57
  • An error running the gulp command? I would fix that, because if I'm not mistaken underneath it all backstop is running gulp reference and gulp test. Try reinstalling gulp if all else fails. – Amru E. Jun 15 '15 at 04:59
  • I'm confused. I ran npm uninstall -g gulp and then ran npm install -g gulp. the result is the same problem. It's my first time to use gulp in the window environment after first install. Why is it happening all of a sudden? – awongCM Jun 15 '15 at 05:15

1 Answers1

0

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.

awongCM
  • 917
  • 5
  • 22
  • 46