0

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
    }
  ]
}
4

1 に答える 1

0

昨夜、Linuxボックス（VMWareビルド）に乗り込み、backstopjsのセットアップをやり直して、いくつかのテストを正常に実行したときに、なんとか機能させることができました。

Windows OS 環境が適切にセットアップされていないという最初の疑いがあったため、npm/node/backstop などを再インストールし、そこから解決する必要があるかもしれません。

今は大丈夫です。

于 2015-06-15T23:07:35.130 に答える