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

posted at

updated at

Organization

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

はじめに

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

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?