はじめに
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)
↓
スクショ確認する
フォルダ内に、スクショがあることを確認して下さい。
こちらが撮れたスクショ
じゃーん
