3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

testcafeでスクショを撮ってみる

Last updated at Posted at 2022-01-13

はじめに

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

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

Screenshot from 2022-01-13 22-25-44.png

Screenshot from 2022-01-13 22-23-47.png

無事に撮れていると

このように出ます。

 Running tests in:
 - Chrome 96.0.4664.45 / Linux 0.0

 Getting Started
 ✓ My first test


 1 passed (4s)

スクショ確認する

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

Screenshot from 2022-01-13 22-31-22.png

Screenshot from 2022-01-13 22-31-31.png

こちらが撮れたスクショ

じゃーん
スクショ.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?