testcafe-blink-diffにて、画像のスクショを撮るまでの道のり。

5310 ワード
testcafe testcafe-blink-diff テスト自動化 テスト自動化 テキストリンク

はじめに

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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of testcafe@^1.9.4 but none is installed. You must install peer dependencies yourself.

+ [email protected]
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)

↓

ここに保存されています。

じゃーん！
撮れていれば問題ありません。

続く。