こんにちは。CAT推進グループのムラカミです。

ウェブアプリケーションのテスト自動化は、年々整備されつつありますが、まだ、いち開発者（つまり私）が手を出すには、少々敷居が高い印象です。そんな折、taikoというテスト自動化ツールを見つけました。

taiko っておもしろい名前だなと思い、ページに行ってみたところ、いきなり出てきたデモページが秀逸だったので、すこし触ってみましたが、とにかくお気軽なツールで、少なくとも開発者がちょっとしたテストを行うような用途には向いてそうです。Googleで「taiko web test」などと入れてみても、日英双方ともあまりヒットしないようですので、この場にて簡単にご紹介させてください。

1. taiko とは

taikoはウェブアプリケーションのテスト自動化ツール、なのですが、いろいろと語るよりも、 https://taiko.dev/ のページにあるデモを見ていただくのが早いと思います。

2. taiko のインストールと起動

まずは npm を導入してください。npm が導入されていれば、taikoのインストールは、お使いのコンソール（コマンドプロンプト、PowerShell、bash、etcetc）から下記のコマンド一発です。当方は Windows 10 64bit 環境で試しましたが、macOS や Linux でも、おそらく問題なく動くと思います。以下、「~$」はお使いのコンソールとします。

~$ npm install -g taiko

taikoの起動は、お使いのコンソールから

~$ npx taiko

としてください。プロンプトが「>」に変わり、taikoのInteractive recorderが起動します。以下、こちらに色々と入力することになります。

3. つかいかた

taiko の使用は、下記の３ステップに分かれます。

・ Interactive recorder の使用：テストの内容を、試行錯誤しながら入力
・ 自動テストのコード出力：コンソールから .code と入力することで、JavaScript による自動テストのコードが出力される
・ テストコードの実行

以下、ひとつずつ見ていきます。

3-1. Interactive recorder の使用

テストしたい内容を、試行錯誤しながら入力していきます。まずは、デモにある内容を一行ずつ入れてみるのが良いと思います。

最初にopenBrowser() と入力すると、Interactive recorder に制御されたChromiumブラウザが起動します。

下記、やってみた結果を張り付けておきます。白文字が入力内容です。screenshot() コマンドにて画面のスクリーンショットが取れるので、デモから追加してあります。

> openBrowser()
[PASS] Browser opened
> goto("google.com")
[PASS] Navigated to URL http://google.com
> write("getgauge taiko")
[PASS] Wrote getgauge taiko into the focused element.
> screenshot()
[PASS] Screenshot is created at Screenshot-1606696864276.png
> press("Enter")
[PASS] Pressed the Enter key
> click("getgauge/taiko")
[PASS] Clicked element matching text "getgauge/taiko"  1 times
> screenshot()
[PASS] Screenshot is created at Screenshot-1606696931787.png
> .code taikodemo.js
(demo.js に、自動テストのコードが保存される)
> .code
（自動テストのコードが出力される。内容は省略）

注目するべきは

> click("getgauge/taiko")

かと思います。こちら、「getgauge/taiko と書いてあるところをクリックせよ」という意味でして、要素のidやclassをjqueryで探して、、、といった煩雑さが必要なく、さくさくと進めることができます。

3-2. 自動テストのコードの出力

> .code taikodemo.js

と入力すると、Interactive recorderにいままで入力した内容を自動テストとする場合のコードが、ファイルに出力されます。単に内容を確認したい場合は、ファイル名を指定せず、「.code」とのみ入力してください。

3-3. テストコードの実行

保存した JavaScript のコードを指定すると、自動テストが実行されます。

~$ npx taiko taikodemo.js

3-1 で示した実行結果の緑色の箇所のみが出力され、自動テストの結果をテキストで読み取ることができます。また、screenshot() コマンドの箇所でスクリーンショットが出力されます。

4. 実戦的なテスト

上記demoのテストは、あくまで簡単なテスト例でした。実戦では、複雑な構造のウェブページで、縦横無尽に要素を選択して操作できて、初めて使いものになります。いま、CAT本体にtaiko使えないかなと思いまして、試しておりますが、感触は良さそうです。

たとえば下記のスクリーンショットに示すように、歯車アイコンにマウスを合わせ、そのあと「ユーザ管理」をクリック、といった操作を、idやclassの指定なしに行うことができました。（もちろん、必要な場合はidやclassなどを指定できます。）

そのコマンドは、

> hover(image(toRightOf(image(toRightOf(text("Murakami"))))))

のように、「Murakami というテキストの右にあるイメージのさらに右にあるイメージをホバーして！」といった、直感的な内容です。また別の例では、

> click(textBox(toRightOf(text("Eメール")), toLeftOf(text(/200文字/))))

のように、「テキスト「Eメール」の右にあって、テキスト「200文字(正規表現)」の左に配置されたテキストボックスをクリックして！」のように、複数の条件を投入することで、クリックしたい要素を限定できました。

そもそも、「ページ要素が読み込まれるまで待つ」といった、自動テストにありがちな面倒を気にしなくてよい、というだけでもメリットは大きそうです。

5. さいごに

やはり、実戦的なテストを実行したければ、taikoの技術内容や勘所を理解していく必要があります。とはいえ、直感的な記述でかなりのテストが実行できてしまいそうです。ドキュメントは、https://docs.taiko.dev/　にあり、特に「API Reference」のところをみながらtaikoを紐解いております。複雑な構造を持つウェブページをどこまでテストできるか、というのは気になるところです。近日中にまたご報告できたらよいなと考えております。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/