Help us understand the problem. What is going on with this article?

TestCafeについていろいろ

TestCafeを調べた経緯

「Selenium」以外にも使えそうなGUIツールがないかどうか、またWaitなどの待機処理が上手くできないため途中でエラー終了してしまう。

で、調査したところ「Testcafe」が見つかった。
でも、よくわからず、ツール名なのか、どこかのコーヒー店舗名なのか考えてしまう始末。
Seleniumでは「設定」が多かった分、楽になった気がします。環境構築に時間がかかっていた。
しかし、言語は、「Javascript」の一択ですが。

Windows版

「TestCafe Studio」を使って起動
なんと無料期間が30日で有料とは?いつの間にか。
FireShot Capture 007 - Buy Visual Studio Products - www.DevExpress.com - www.devexpress.com.png

https://testcafe-studio.devexpress.com/#get-ctp

FireShot Capture 123 - A cross-platform IDE for e_ - https___testcafe-studio.devexpress.com_#get-ctp.png

「DevExpressTestCafeStudio-win-0.2.0」を実行する。

「インストール中」

無題.png

「完了」ボタンをクリックする

無題 (1).png

スプラッシュ画面
環境によってはこの画面のままで進行しない。
設定ミス:環境変数(Path)設定の見直しも必要である。

PATH=$PATH:./node_modules/.bin

パスをきちんと設定したあと、もう一度起動する。

無題1.png

TestCafe Studioの画面

Record Configuration 名 Run Configuration 名
MozillaFirefox MozillaFirefox
Google Chrome Google Chrome
Internet Explorer Internet Explorer
Microsoft Edge Microsoft Edge

ここは、「Internet Explorer」を設定し動かしてみる。

無題4.png

SeleniumIDEにあった「Recording機能」も付いている。

R.png

「矢印」ボタンをクリックする。

テスト画像.png

「読み込み」がはじまります。

テスト.png

「スプラッシュ画面」のような、「起動ブラウザ名」「OS」が表示している。

TestCafe (1).png

「Recording機能」しながら動かしてみる。

「Yahoo!トップ」を起動

peinnto.png

peint.png

なかなかいい感じでWaitしてくれます。

OKの場合
テスト結果が「PASSED」となっている。

OK.png

NGの場合
テスト結果が「FAIL」となっている。

AWS Linux仮想マシン

AWS Linuxに「TestCafe」をインストールする

cmd
ペイント (1).png

vagrant up
ペイント (2).png

vagrant ssh
無題 (2).png

nodebrewのインストール

[vagrant@localhost ~]$curl -L git.io/nodebrew | perl - setup
[vagrant@localhost ~]$set -o noclobber
[vagrant@localhost ~]$echo export PATH='$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
[vagrant@localhost ~]$source ~/.bashrc

nodebrewのバージョンを確認する

[vagrant@localhost ~]$ nodebrew -v
nodebrew 1.0.0
nodebrewを使ってNode.jsをインストール

[vagrant@localhost ~]$ nodebrew install-binary latest
[vagrant@localhost ~]$ nodebrew use latest
[vagrant@localhost ~]$ node -v
v10.1.0
[vagrant@localhost ~]$ npm -v
6.1.0
[vagrant@localhost ~]$ npm install -g testcafe

実行test1.jsを用意

test1.js
import { Selector } from 'testcafe';

fixture `test`
    .page `https://XXXXXXXXXXXXXX/login`;

test('New Test', async t => {
    await t
        .click(Selector('.notice-wrapper'))
        .typeText(Selector('#login').find('[name="login_address"]'), 'd')
        .pressKey('backspace')
        .typeText(Selector('#login').find('[name="login_address"]'), 'XXXXXXX      .pressKey('tab')
        .typeText(Selector('#password'), 'XXXXXX')
        .click(Selector('.btn-blue-lg'))
        .click(Selector('.login'))
        .selectText(Selector('#login').find('[name="login_address"]'), 22, 0)
        .pressKey('delete');
});

ヘッドレスChromeを実行する。

[vagrant@localhost ~]$ testcafe "chrome:headless" test1.js

実行すると赤枠のような表示となる。

無題2.png

実行結果であるが、よくわからない。
でも「OK」であることは「passed」からわかる

実行結果
 Running tests in:
 - HeadlessChrome 67.0.3396 / Linux 0.0.0

 First fixture
 ✓ First test


 1 passed (10s)
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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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