Testcafeという自動テストツールを使ってみる

Testcafeとは、オープンソースの自動テストツールです。
Selenium一択だと思っていたのですが、試してみたいと思います。

調べれば結構ブラウザテストの選択肢があるんですねー　　　
- https://www.kaitoy.xyz/2017/08/04/browser-test-framework/
- https://qiita.com/cognitom/items/6cce719b57341769c14d

Testcafeはこちらです
Webサイト： https://devexpress.github.io/testcafe/
Github： https://github.com/DevExpress/testcafe

# インストール

## クラウド上で実行してみる
GCPでインスタンスを作成、CentOS7を用意しました。

TestCafeまで一発でインストールするスクリプトを置いておきます。
（テスト用の画面を出すためTestCafe以外も入ってますが）

```shell-session:installscript.sh
sudo yum -y update
sudo yum install -y httpd httpd-devel wget git zip unzip
sudo yum install -y php php-devel
sudo yum install -y nodejs npm
cat << EOF | sudo tee /etc/yum.repos.d/google-chrome.repo
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/x86_64
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
EOF
sudo yum install -y google-chrome-stable
sudo npm install -g testcafe
```

```shell-session:installscript.shというファイルを作成し、上記を書き込み実行する
$ sudo sh installscript.sh
```

### Githubにあるとおり動かしてみる。
このページを叩くことになるらしい。
http://devexpress.github.io/testcafe/example/

<img width="512" alt="example.png" src="https://qiita-image-store.s3.amazonaws.com/0/147747/5acb626c-776a-b3b7-6d3e-913fb887f5f0.png">

サンプルコードを走らせてみる。

エラーが出た。  

```shell-session:errorMessage  

ERROR Was unable to open the browser "chrome:" due to error.
Error: Unable to run the browser. The browser path or command template is not specified.
    at checkBrowserPath$ (/usr/lib/node_modules/testcafe/node_modules/testcafe-browser-tools/lib/api/open.js:47:23)
    at tryCatch (/usr/lib/node_modules/testcafe/node_modules/testcafe-browser-tools/node_modules/babel-runtime/rege
nerator/runtime.js:72:40)
```

Firefoxを入れてみる。  そして実行

```shell-session:errorMessage2
$ testcafe firefox testcafe.ts 
ERROR Unable to establish one or more of the specified browser connections. This can be caused by network issues or
 remote device failure.
```

単に webブラウザがあるだけじゃ実行にならないみたいですね。
一発スクリプト内ではChromeを入れているのですが、ChromeではヘッドレスモードなるGUIデスクトップ環境がなくても動くモードがあります。
https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja

```
$ testcafe "chrome:headless" test.ts 

 Running tests in:
 - HeadlessChrome 0.0.0 / Linux 0.0.0

 Getting Started
 ✓ My first test


 1 passed (4s)
```

テストできたようです。ちょっとわかりにくいところもあるので、デスクトップ環境でもテストしてみます。

## VM上で実行してみる 
久しぶりにVirtual Machineをローカルで立ち上げてみます。

久しぶりのFedora。
ではでは、同じようにして実行！
<img width="512" alt="example.png" src="https://qiita-image-store.s3.amazonaws.com/0/147747/adb58436-b4ad-2d5d-f146-a9eb5ebad98b.png">
  
  
  
　　

え、・・・

*・　・　・ 早すぎてよくわからん。*


動画で撮影したものをキャプチャして貼り付けてみます。

・クルクルが出ます。
<img width="512" alt="testcafe.png" src="https://qiita-image-store.s3.amazonaws.com/0/147747/f9198675-ec8d-b95a-1293-c7827cba5cda.png">

・画面表示されたかと思ったら一瞬でことが運びます。
<img width="512" alt="dekai.png" src="https://qiita-image-store.s3.amazonaws.com/0/147747/2c58d688-4dc7-28df-d0d9-b9fee073ac06.png">

・入力完了てなもんでしょうか。
<img width="512" alt="nanasi.png" src="https://qiita-image-store.s3.amazonaws.com/0/147747/d845b822-e5cf-740f-2117-ae67f0b06dec.png">


テスト用のスクリプトと同じ文言になったということでプログラム終了。ですね。

```ts:test.ts
.expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
```


なかなか簡単にテストを実行できました。
これであれば、Robotic Process Automation など自動化もカバーできるかも？