WebdriverいらずのE2EテストランナーTestcafe

まだSeleniumで消耗してるの？

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

---

------------------- ↓ 余談はここから ↓-------------------
Selemiumは自ら開発したWebdriverによりすっかりオワコン化。
Webdriverサポートをブラウザ側がするようになり、
ツールの自由度が格段に上昇している。

一方でテストランナーのほうの進化は止まっている印象がある。
先行していたRuby界隈だがturnip以降なにも出ていない。
私もよく使っていたbehatだがだいぶ進化を止めている感じだ。
メインストリームはJavaScript界隈に遷った感じがする。

さて、またE2Eテストが必要な場面にあたり、
ツールを再検討していたところ、
Webdriver不要のツールがあるとのことで、
早速試してみたがいい感じだったので、
深堀していこうと思う。

testcafe
A Node.js tool to automate end-to-end web testing.

node.jsベースのテストツール。
Webdriver不要でブラウザテストができ、
かつElectronでお茶を濁したものではない。

特徴は

1. WebDriver不要
2. コマンドオプションだけで実行するブラウザを切り替えられる
3. JavaScript対応
4. テストケースはTypeScript

---

------------------- ↓ 本題はここから ↓-------------------

testcafeのインストール

例によってインストールから記述する。
適当に読み飛ばしてほしい。

Node.jsで動作するので、
Node.jsのインストールから行うが、
コンパイルが以上に時間がかかるうえ、
バージョンアップが頻繁に起こるので、
nodeマネージャであるnodebrew(Linuxなど), Nodist(Windows)からインストールをする。

Node.jsのインストール

nodebrewのインストール

Linuxではaptやyumよりもこちらを使うことを薦める。
Mac？なにそれ。

$ curl -L git.io/nodebrew | perl - setup
$ set -o noclobber # 念のため
$ echo export PATH='$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc

動作確認

$ nodebrew -v
nodebrew 1.0.0

nodebrewを使ってNode.jsをインストール

$ nodebrew install-binary latest
$ nodebrew use latest
$ node -v
v10.1.0
$ npm -v
5.6.0

Nodistのインストール

Windows上ではnodebrewが動かない(WSL環境を除く)のでこちらを使う。
以下より最新のexeファイルをダウンロード、実行してインストール
https://github.com/marcelklehr/nodist/releases

動作確認

コマンドプロンプト上で以下を実行

> nodist -v
0.8.8

Nodistを使ってnodeをインストール

> nodist + latest
10.1.0
> node -v
10.1.0
>npm -v
4.0.5

testcafeのインストール

Node.jsの用意ができらので、
npmよりtestcafeをインストールする。

$ npm install -g testcafe
+ testcafe@0.20.0
added 285 packages in 9.544s
$ testcafe -v
0.20.0

テストケースの作成

testcafeには以下のサンプル実行用ページがある
http://devexpress.github.io/testcafe/example/

それを使ってのテストサンプル。

1. 左上のテキストボックスに「John Smith」と入力
2. 最下部の「Submit」ボタンをクリック
3. ページ遷移後「Thank you, John Smith!」と表示されているの

というテスト内容

test1.js

import { Selector } from 'testcafe'; // first import testcafe selectors

fixture `Getting Started`// declare the fixture
    .page `https://devexpress.github.io/testcafe/example`;  // specify the start page


//then create a test and place your code there
test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

テスト実行

$ testcafe chrome test1.js  # chromeで実行
$ testcafe firefox test1.js # firefoxで実行
$ testcafe ie test1.js      # IEで実行

---

------------------- ↓ 後書はここから ↓-------------------

同様のツールにCypressがあるが、
chromeしか対応してないので除外した。