title: CSS Visual Regession Testing with BackdropJS - could not run grunt:reference or grunt:test
body: <p>I tried following this tutorial link on setting up backstop.js  </p>
  
  <p><a href="https://joe-watkins.io/css-visual-regression-testing-with-grunt-backstopjs/" rel="nofollow">https://joe-watkins.io/css-visual-regression-testing-with-grunt-backstopjs/</a></p>
  
  <p>I followed all the instructions as required.</p>
  
  <p>But I'm running into this error onscreen.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Earlier, there was an additional error which states the <code>gulp.run()</code> is deprecated thus it suggested I need to use another npm module to execute tasks in sequence, which led me to this.</p>
  
  <p><a href="https://www.npmjs.com/package/run-sequence" rel="nofollow">https://www.npmjs.com/package/run-sequence</a></p>
  
  <p>And I managed to resolved it like so</p>
  
  <pre><code>//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.');
  });
  </code></pre>
  
  <p>It works.</p>
  
  <p>However, I'm still not able to complete the grunt/gulp tasks execution thus I'm really stuck with this.</p>
  
  <p>I'm wondering has anybody tried following the tutorial link above and managed to succeed in getting backstopjs to work?</p>
  
  <p>Your input on this is greatly appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I forgot to show you what my grunt config setup looks like.</p>
  
  <pre><code>........................
  
  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
  </code></pre>
  
  <p>My <strong>backstop.json</strong> file</p>
  
  <pre><code>{
    "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
      }
    ]
  }
  </code></pre>