TestCafeについていろいろ

# TestCafeを調べた経緯

https://testcafe.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55160/23b174e5-9421-d6b4-2aa0-8ba49f4cec09.png)

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

で、調査したところ　**「Testcafe」** が見つかった。

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

しかし、言語は、**「Javascript」** および **「TypeScript」** ですが。

# Windows版

**「TestCafe Studio」** を使って起動
なんと無料期間が30日で有料とは？いつの間にか変わっていました。
![FireShot Capture 007 - Buy Visual Studio Products - www.DevExpress.com - www.devexpress.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55160/371ca5be-5049-3f38-f47d-8a1993dd8d89.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](https://qiita-image-store.s3.amazonaws.com/0/55160/f0049e00-32d9-c68f-ca09-63422d4baee8.png)

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

**「インストール中」**

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/55160/865e02be-1d6f-7057-9737-b0c53244cc4e.png)


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

![無題 (1).png](https://qiita-image-store.s3.amazonaws.com/0/55160/555d0edd-24b6-55e8-40c0-43439b356325.png)


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

```
PATH=$PATH:./node_modules/.bin
```

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

![無題1.png](https://qiita-image-store.s3.amazonaws.com/0/55160/f00ab121-e9ab-cf26-d834-281ae0a93329.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](https://qiita-image-store.s3.amazonaws.com/0/55160/625a8afb-fb9a-80cd-9116-058ce2c243e8.png)


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

![R.png](https://qiita-image-store.s3.amazonaws.com/0/55160/79791728-fd4e-b000-0f93-36e7197e5561.png)


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

![テスト画像.png](https://qiita-image-store.s3.amazonaws.com/0/55160/846215b9-9dec-ff4b-055a-7c10863b2cf1.png)

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

![テスト.png](https://qiita-image-store.s3.amazonaws.com/0/55160/fccee61f-1af7-3068-a036-1a24edc2cf9f.png)


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

![TestCafe (1).png](https://qiita-image-store.s3.amazonaws.com/0/55160/47e7b3bb-2951-ac57-d00e-9e199db2cae9.png)


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

***「Yahoo!トップ」*** を起動

![peinnto.png](https://qiita-image-store.s3.amazonaws.com/0/55160/f85e387e-ccd0-c346-94c5-6f141963246f.png)

![peint.png](https://qiita-image-store.s3.amazonaws.com/0/55160/377dd6ba-6ead-d3a5-985e-19f71393b050.png)


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



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

![OK.png](https://qiita-image-store.s3.amazonaws.com/0/55160/274b90b8-7672-1791-658d-a3603bc4cc8a.png)

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


# AWS Linux仮想マシン
AWS Linuxに　　**「TestCafe」** をインストールする

**cmd**
![ペイント (1).png](https://qiita-image-store.s3.amazonaws.com/0/55160/6a35085a-d6cd-ff4a-79c1-5517842a6504.png)


**vagrant up**
![ペイント (2).png](https://qiita-image-store.s3.amazonaws.com/0/55160/dfb5a885-d41a-419c-ce68-99fedb9d2750.png)


**vagrant ssh**
![無題 (2).png](https://qiita-image-store.s3.amazonaws.com/0/55160/01afb2f6-49c4-5d6e-7323-60b439cc4a87.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](https://qiita-image-store.s3.amazonaws.com/0/55160/298f881c-d756-4eab-62bd-4fb114a3f740.png)


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

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

 First fixture
 ✓ First test


 1 passed (10s)
```