CSS Visual测试与BackdropJS -无法运行咕噜:引用或咕噜:测试

Question

我试着遵循关于设置backstop.js的这个教程链接

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

我按照要求遵守了所有的指示。

但我在屏幕上遇到了这个错误。

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

早些时候，有一个额外的错误，说明gulp.run()被废弃了，因此它建议我需要使用另一个npm模块来按顺序执行任务，这就导致了这一点。

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

我设法解决了这个问题

//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.');
});

它起作用了。

然而，我仍然无法完成咕噜/吞咽任务的执行，因此我真的被困在了这个问题上。

我想知道是否有人试过遵循上面的教程链接，并成功地让后台程序开始工作？

非常感谢您对此的投入。

更新

我忘记向您展示我的grunt配置设置是什么样子的。

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

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

我的backstop.json文件

{
  "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

昨晚，当我进入我的Linux (VMWare构建)时，我成功地让它正常工作，重新执行backstopjs设置，并成功地执行了一些测试运行。

我有我最初的怀疑，这是我的窗口操作系统环境没有正确设置，所以我可能不得不重新安装npm/节点/后台等，并使它从那里解决。

现在一切都好了。