search
LoginSignup
35

More than 5 years have passed since last update.

posted at

updated at

Organization

Node.jsでBrowserStack Automateを使ってテスト

BrowserStack とは

BrowserStack とは、クロスブラウザ(OS含む)による動作確認を手軽に行える環境を提供しているサービスです。
例えば、BrowserStack 側のサーバで起動している各種ブラウザ環境を、こちらのブラウザから利用したりすることができます。

その中に Automate という、コードからその環境を利用できる仕組みがあり、今回はそれを Node.js から使ってみたいと思います。

当記事のゴール

  • Travis CI 上で、
  • express アプリケーションを起動し、
  • mocha で書いたテストコードを使い、
  • BrowserStack Automate 環境で、

テストが出来ること。

BrowserStack アカウントを作成する

まずはアカウントの作成が必要になるので、トップページ から道なりに登録してください。
メールアドレスとパスワードだけで登録でき、ある程度の時間は無料で使えます。当記事をお読みになって、ちょっと検証してみたいなーという程度なら充分な時間です。

一応、自分が行った登録手順を軽く書いておきます:

  1. http://www.browserstack.com/
  2. 左上 FREE TRIAL から Sign up
  3. AUTOMATE タブ → Start(?だっけ、忘れた)道なりにボタン押す

登録すると、左上らへんに "Username and Access Keys" というのがあると思うので、発見しておいて下さい。

解説用リポジトリを clone する

https://github.com/kjirou/browserstack-with-express へ解説と検証用のリポジトリを作成したので、手元で動かしたい方は clone して貰うと楽です。
すげー基本的なことしかやってないので、clone しないで、説明の際にリンクする先のソースコードを読むだけでも充分だと思います。

clone した方は、以下の初期設定を行って下さい:

npm install
cp browserstack-conf.example.json browserstack-conf.json
# 自分の Username と Access Keys に書き換える
vi browserstack-conf.json

ちなみに、こちらの Node.js 用マニュアルはとても良く出来ています。
https://www.browserstack.com/automate/node

とても良く出来てるので、わざわざ自分が説明する必要あんのか感もあったりします..

グローバルなサイトをテストする

ということで、早速テストしてみましょう。

こちらのコマンドを打つと:

node bin/run-simple-global-site-test.js

このような出力になり:

BrowserStack - Google Search

(実際の結果は、Google サイト側の仕様で変わったりするので、違う出力になっても気にしないでください。)

https://www.browserstack.com/automate へ、以下のようなテスト結果が生成されていると思います。

run-simple-global-site-test.js が何をしているかと言うと、以下の一連の動作です。

  1. http://www.google.com/ を Windows の Firefox で開く
  2. 検索フォームに "BrowserStack" を入力する
  3. 検索ボタンを押して検索結果画面へ遷移する
  4. 遷移後のページタイトルを取得して console.log で出力する
  5. その結果を、BrowserStack 側がテスト結果として保存する

こんな感じにテストが出来ます、ということです。

ローカルなサイトをテストする

先ほどは、グローバル環境で動いている Google トップページを検証しましたが、アプリケーションの開発中であれば通常はローカル環境をテストしたいと思います。

BrowserStack はその点もサポートしており、ローカル環境に仲介をするプロキシみたいなプロセス(?表現は適当でないかも)を起動しておくことで、外部の BrowserStack サーバへ接続してテストを実行することが可能になっています。

https://www.browserstack.com/automate/node#setting-local-tunnel に各環境用のコマンドが配置してあるので、bin 直下においてください。

もし Mac なら、以下を実行してもいいです:

cd bin
wget https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip
unzip BrowserStackLocal-darwin-x64.zip
rm BrowserStackLocal-darwin-x64.zip

では、テストをはじめます。

まずは、ローカル環境の express アプリケーションサーバを起動します。

npm start

http://localhost:3000/ で "Express" と表示されていれば OK です。
表示されていなかったら.. 各自頑張ってください!

次に、先ほど配置した BrowserStackLocal プロセスを起動します:

bin/BrowserStackLocal あなたのAccessKey localhost,3000,0

これで準備が整いましたので、以下のコマンドを実行してください:

node bin/run-simple-local-site-test.js

"Express" と出力され、https://www.browserstack.com/automate で以下のテスト結果が確認できると思います:

run-simple-local-site-test.js については、賢明なる諸氏に対してもう細かい説明は不要だと思うので、ポイントだけ列挙します。

  • Visual Logs で画像を出すには 'browserstack.debug' : 'true'
  • ローカル環境をテストする場合は 'browserstack.local' : 'true'

テストコードを mocha で書く

今までは素の node スクリプトでテストを書いていましたが、mocha 形式で書いてみます。
そして、外側で起動していた express アプリケーションのプロセスを、テスト内で管理できるようにしてみます。

まず、https://www.browserstack.com/automate/node#mocha に記載のあるように selenium-server-standalone.jar へのパスを $SELENIUM 環境変数へ設定する必要があります。

本家 からDLして適当な場所に置くのが最も簡単だと思いますが、一応自分がやった Homebrew の例を記載しておきます。
バージョンはドキュメントと厳密に合わせなくても良いようです:

brew install selenium-server-standalone
export SELENIUM='/usr/local/Cellar/selenium-server-standalone/2.43.1/bin/selenium-server'

次に、先のテストで実行した express と BrowserStackLocal プロセスは落とし、後者のみポート番号を変えて再度起動します(ポート番号を変えたのは、アプリの3000番と競合しないためという一般的な理由です):

bin/BrowserStackLocal あなたのAccessKey localhost,3001,0

ローカルインストールされている mocha コマンドで実行します:

./node_modules/.bin/mocha test/minimum-e2e.js

以下の様な結果になり、BrowserStack 側にもテスト結果が生成されていれば成功です:

  minimum e2e
Express server listening on port 3001
GET / 200 256.862 ms - 170
GET /stylesheets/style.css 200 6.326 ms - 110
    ✓ should title be "Express" (187ms)
Close express server listening


  1 passing (13s)

console.log や Webサーバのログが出ているが邪魔ですが、通常の mocha のテスト結果です。

test/minimum-e2e.js のポイントです:

  • 非同期実行は done コールバックによる管理ではなく、WebDriverJS によって管理される 、done を仮引数に取っても常に undefined
    • 自分も使い方が良くわかっていませんが、書いてある defer の処理がわかれば当面はどうにかなりそう
    • driver.* 関数群が同期的に書けるのは、中で WebDriverJS の promise の管理をしているから
  • driver.quit() は常にテストコードの最後に実行されるようにすること
  • test.* はインストールしている mocha をラップした関数群
    • 元の mocha 仕様をどの程度再現出来ているかは不明

なお、https://www.browserstack.com/automate/node#testing-frameworks にあるように、他テスティングフレームワークを選択することも可能なようです。
自分は、手馴れているので mocha にしましたが、WebDriverJS と親和性の高いものにした方がいいような気もしています。

Travis CI 上で mocha テストを動かす

先の mocha テストケースを Travis CI 上で動かしてみます。

テスト結果については、上記と同じなので特に補足することはありません。
設定上の注意はありますが、.travis.yml にコメントで書いた程度の一般的なものです。

.. 落とし穴はあると思いますが、残念ながらまだ落ちていません。

以上です

BrowserStack の中身について検証する前に記事が長くなりすぎたので、ここまでにしました。

自分は、以下の様な点が気になっています。
速攻調べられるようなこともメモ替わりに書き殴ります:

  • BrowserStack 側のプロジェクトの作り方
    • それをこちらのプロジェクトへ関連付けする方法
  • ひとつのブラウザのみエラーになった場合、テストケース側は失敗になるのか?
    • テストケース側の出力はどうなるんだろう?
  • クライアント側のJSエラーの拾い方は
  • driver.quit() の後に別の describedriver インスタンスを生成しても大丈夫?
    • WebDriverJSのPromiseの仕組みが良くわかってないから不安

次は..

Node.js Advent Calendar、明日は @gologo13 さんです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
35