WebdriverIO を利用したテストのやり方

WebdriverIO とはなにか

WebdriverIO は、 Selenium をベースにしつつ、 いろいろなテストツールやフレームワーク、 SaaS などを使って、 ブラウザやスマホアプリをコントロールできるソフトウェアです。

一番の特徴としては、 JavaScript でテストが書けます。 テスト実行までのステップはそんなに難しくないので、 普段はフロント側しかやってない開発者の方がテストを始めてみるには良いツールではないでしょうか？

試してみるためのセットアップ

1. テスト用のディレクトリを用意します

   mkdir webdi && cd webdi
   



2. 実行時に使用する Selenium をダウンロードします

   curl -O http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.1.jar
   



3. Webdriverio をダウンロードします（要 node.js ）

   npm install webdriverio
   



4. ディレクトリに node_modules が作成されます

   npm list
    /webdi/
    └─┬ webdriverio@4.2.16
   　　・・・
   　　（以下続きますが、 webdriverio が確認できれば OK です）
   　　・・・
   

テストを書いてみる

今回はギャップロにアクセスして、サイトのタイトルを取得してみます。

1. セットアップしたディレクトリにテストプログラム（ gaprot_test.js ）を作成します。 使用するブラウザとして chrome を指定します（ 4 行目の browserName ）

   var webdriverio = require('webdriverio');
   var options = {
       desiredCapabilities: {
           browserName: 'chrome'
       }
   };
   webdriverio
       .remote(options)
       .init()
       .url('http://www.gaprot.jp')
       .getTitle().then(function(title) {
           console.log('Title was: ' + title);
       })
       .end();
   



2. プログラムを実行します

   node gaprot_test.js
   



3. 実行結果がコンソールに表示されて、実行完了です

   Title was: ギャップロ | アプリエンジニアのための技術情報サイト
   

おわりに

WebdriverIO では HTML タグや CSS の class 名を指定して、内容の抽出 Browserstack 、 TestingBot など外部の Web サービスと連携したテストの作成 などができます。
それぞれの環境に応じていろいろ試していただき、テストに取り組んでいただけたらと思います。

Tweet