はじめに

testcafeでスクショを撮ってみるまでの道のり。

最終更新日

2021年1月13日

環境の情報

OS
Ubuntu20.04

注意

最新の状態を確認して下さい。
testcafeの環境構築は完了済の前提です。

公式はこちら

https://testcafe.io/
https://testcafe.io/documentation/402635/getting-started
https://testcafe.io/documentation/402675/reference/test-api/testcontroller/takescreenshot

参考さま

基本的な使い方

testcafeの使い方は、ものすごくシンプルです。

①testcafeを導入する。
環境構築する。
↓
②テストするコードのjsファイルを書く。
↓
③保存する。
↓
④ファイルをコマンドで動かす。
↓
⑤問題無いか、確認する。

具体的な例

バージョンを確認します。

testcafeは入っていますね。

$ testcafe -v
1.17.1

↓

フォルダを作ります。

どこかにフォルダを作りましょう。
例として、デスクトップにでも、作ってみます。

~$ cd デスクトップ
~/デスクトップ$ ls
~/デスクトップ$ mkdir testcafetest
~/デスクトップ$ cd testcafetest/
~/デスクトップ/testcafetest$ ls

↓

ファイルを作ります。

名前はなんでもいいので、jsフォルダを作ります。
試しにtest.jsにでもしてみます。

$ vi test.js
$ ls
test.js

↓

ファイルの中身を作ります。

test.jsの中身をこのように書きます。

test.js

import { Selector } from "testcafe";

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`;

test("My first test", async (t) => {
    await t
        .typeText("#developer-name", "John Smith")
        .click("#submit-button")
        .takeScreenshot("スクショ.png");
});

↓

保存します。

↓

動かしてみます。

このように書きます。

$ testcafe chrome test.js

↓

このような画面が出ていれば大丈夫です。

↓

無事に撮れていると

このように出ます。

 Running tests in:
 - Chrome 96.0.4664.45 / Linux 0.0

 Getting Started
 ✓ My first test


 1 passed (4s)

↓

スクショ確認する

フォルダ内に、スクショがあることを確認して下さい。

こちらが撮れたスクショ

じゃーん