backstopjsをgulpで実行する

はじめに

タイトルの通りです。
readmeで真っ先に出てくるのがbackstop init、backstop test、backstop approveあたりで、そっちに目がいってしまいgulpで実行する方法を見失ってしまいがちなので、備忘録までに。
https://github.com/garris/backstopjs#the-backstopjs-workflow

backstopjsを一回でも動かしたことがある人、backstopjsで何が出来るか知っている人向けの内容です

backstopjs

https://github.com/garris/backstopjs
ヘッドレスブラウザを用いて変更前と変更後のURLからスクリーンショットを取得し、視覚的に差分を抽出してくれるビジュアルリグレッションテストツール

結論

gulpfile.jsに下記の内容を書いてgulpで実行できます

const gulp = require('gulp');
const backstop = require('backstopjs');

gulp.task('backstop_reference', () => backstop('reference'));
gulp.task('backstop_test', () => backstop('test'));

もうちょっと詳しく

バージョン

• macOS mojave
• node v11.4.0
• npm version 6.9.0
• backstopjsとgulpは202001時点で最新をいれます

前提

• プロジェクトフォルダでnpm initまでしている

手順

backstopjsをインストールする

$ npm install --save-dev backstopjs

backstopjsの初期設定

$ npx backstop init

backstop.jsonが出来るはず。
差分抽出のURLにデフォルトでhttps://garris.github.io/BackstopJS/がはいっています。が、この記事ではそのあたりに触れないのでそのままいきます。

gulpをインストールする

$ npm install --save-dev gulp

gulpfile.jsを作成する

$ touch gulpfile.js

もしくは右クリック→新規作成で中身空のgulpfile.jsを作成する

gulpfile.jsに書いて保存する

作成したgulpfile.jsに下記の内容を入れる

const gulp = require('gulp');
const backstop = require('backstopjs');

gulp.task('backstop_reference', () => backstop('reference'));
gulp.task('backstop_test', () => backstop('test'));

gulpタスクのbackstop_referenceを実行する

$ npx gulp backstop_reference

修正前のURLのスクリーンショットを取得しています（$backstop referenceと同じことをやってる）
backstop_data/bitmaps_referenceに画像が追加されていればOKです

gulpタスクのbackstop_testを実行する

$ npx gulp backstop_test

修正後のURLのスクリーンショットを取得しています（$backstop testと同じことをやってる）
今度はbackstop_data/bitmaps_test/yyyymmdd-hhmmssに画像が追加されていればOKです
同時にbackstop_data/bitmaps_referenceの画像と比較され、html_report配下にレポートが出力されます。

まとめ

gulpで走らせられたら運用が楽なのかなと思って調べてみたらちゃんとreadmeに書いてあったのでありがたかった