使用 Backdrop JS 进行 CSS 视觉回归测试 - 无法运行 grunt :reference or grunt:test

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/gulp 任务执行，因此我真的被这个问题困住了。

我想知道是否有人尝试按照上面的教程链接成功地让 backstopjs 工作？

非常感谢您对此的意见。

更新

我忘了向您展示我的 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 设置并成功执行一些测试运行。

我最初怀疑是我的 Window OS 环境设置不正确，所以我可能不得不重新安装 npm/node/backstop 等，并从那里解决它。

现在一切都好。