はじめに
testcafe-blink-diffにて、画像のスクショを撮るまでの道のり。
比較を行うために、testcafe-blink-diffというものを使いました。
最終更新日
2022年01月04日
環境の情報
OS
Ubuntu20.04
注意
最新の状態を確認して下さい。
公式はこちら
https://testcafe.io/
https://www.npmjs.com/package/testcafe-blink-diff/v/0.3.1
参考さま
https://github.com/tacoss/testcafe-blink-diff
https://qiita.com/naka_kyon/items/c3acbf3954d3db555476
https://qiita.com/at-946/items/fa1c089c153d83f48a03
https://testcafe.io/documentation/402702/reference/test-api/testcontroller/expect
https://testcafe.io/documentation/402639/reference/command-line-interface#takeonfails
状況
とりあえずフォルダとか作って、そこへ移動します。
試しに、testフォルダに作ります。
cd test/
↓
インストールしよう。
（npmなかったら持ってきてね）
$ npm i testcafe-blink-diff --save-dev
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN eslint-loader@4.0.2 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN testcafe-blink-diff@0.4.11 requires a peer of testcafe@^1.9.4 but none is installed. You must install peer dependencies yourself.
+ testcafe-blink-diff@0.4.11
updated 1 package and audited 244 packages in 8.667s
22 packages are looking for funding
run `npm fund` for details
found 4 vulnerabilities (1 low, 1 moderate, 2 high)
run `npm audit fix` to fix them, or `npm audit` for details
↓
なにかjsファイルを作ります。
ここでは、test.jsとかにしておきます。
test$ ls
test.js
↓
こんな感じで書いてみます。
test.js
import { takeSnapshot } from "testcafe-blink-diff";
fixture("Snapshots").page("https://www.google.com/");
test("check something here", async (t) => {
await takeSnapshot(t);
});
↓
コマンドを立ち上げ、こんな感じで実行してみます。
npx testcafe chrome test.js --take-snapshot base
↓
こんな感じになれば大丈夫。
Running tests in:
- Chrome 96.0.4664.45 / Linux 0.0
Snapshots
✓ check something here (screenshots:
test/screenshots/Snapshots/check_something_here/base.png)
↓
ここに保存されています。
じゃーん！
撮れていれば問題ありません。
続く。