0
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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 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)

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

Screenshot from 2022-01-04 21-09-17.png

じゃーん!
撮れていれば問題ありません。
base.png

続く。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?