huxleyを試してみた
スクリーンショットをとって、UIのregressionがないかどうかをテストするツール
インストール
pipで
$ pip install huxley
リポジトリにexamplesがあるのでそれで試してみる
リポジトリをチェックアウト
$ git clone https://github.com/facebook/huxley.git $ cd huxley/examples
examplesにあるhtmlをホストする
$ cd webroot $ python -m SimpleHTTPServer
http://127.0.0.1:8000/toggle.html
「Click me to toggle!」を押すとボタンの色が変わるだけのページ
設定ファイル
Huxleyfileというのが設定ファイル
huxley/examples/Huxleyfile
[toggle] url=http://127.0.0.1:8000/toggle.html
toggleというのがテストにつけられた名前で、指定されたurlをテストする
selenium server
Selenium Serverが必要なのでDLする
http://docs.seleniumhq.org/download/
Selenium Server を起動
$ java -jar selenium-server-standalone-2.33.0.jar
huxleyの起動
HuxleyfileがあるディレクトリでRecordModeでhuxleyを起動する
$ huxley --record ------------------------------- Running Huxley file: Huxleyfile ------------------------------- Running test: toggle Begin record Press enter to take a screenshot, or type Q+enter if you're done
firefoxが立ち上がる
huxleyを起動したコンソールに書いてあるように、コンソールでenterを叩くとスクリーンショットを取る
firefoxでボタンをクリックして、スクリーンショットを撮る、を3回繰り返した
1 screenshots taken Press enter to take a screenshot, or type Q+enter if you're done 2 screenshots taken Press enter to take a screenshot, or type Q+enter if you're done 3 screenshots taken Press enter to take a screenshot, or type Q+enter if you're done
q -> enterで終了。この時点でスクリーンショットを利用したテストが実行される
Up next, we'll re-run your actions to generate screenshots to ensure they are pixel-perfect when running automated. Press enter to start. Begin rerecord Sleeping for 2840.0 ms Taking screenshot 0 Sleeping for 2225.0 ms Clicking [156, 80] Sleeping for 463.0 ms Typing 〓 Sleeping for 561.0 ms Taking screenshot 1 Sleeping for 1530.0 ms Clicking [160, 63] Sleeping for 419.0 ms Typing 〓 Sleeping for 491.0 ms Taking screenshot 2 Playing back to ensure the test is correct Begin playback Sleeping for 2840.0 ms Taking screenshot 0 Sleeping for 2225.0 ms Clicking [156, 80] Sleeping for 463.0 ms Typing 〓 Sleeping for 561.0 ms Taking screenshot 1 Sleeping for 1530.0 ms Clicking [160, 63] Sleeping for 419.0 ms Typing 〓 Sleeping for 491.0 ms Taking screenshot 2 Test recorded successfully
recordしたテストを再度実行する。今度は--recordを指定せず、PlayBackModeで実行する。
ブラウザが立ち上がり、先ほどと同じ動作をして、スクリーンショットと差異が無いかチェックしてくれる
$ huxley ------------------------------- Running Huxley file: Huxleyfile ------------------------------- Running test: toggle Running test to determine if we need to rerecord Begin playback Sleeping for 2840.0 ms Taking screenshot 0 Sleeping for 2225.0 ms Clicking [156, 80] Sleeping for 463.0 ms Typing 〓 Sleeping for 561.0 ms Taking screenshot 1 Sleeping for 1530.0 ms Clicking [160, 63] Sleeping for 419.0 ms Typing 〓 Sleeping for 491.0 ms Taking screenshot 2 Test played back successfully
成功したので、今度はわざとテストを失敗させてみる
クリックしたときのボタンの色を変えてみた
$ huxley ------------------------------- Running Huxley file: Huxleyfile ------------------------------- Running test: toggle Running test to determine if we need to rerecord Begin playback Sleeping for 2840.0 ms Taking screenshot 0 Sleeping for 2225.0 ms Clicking [156, 80] Sleeping for 463.0 ms Typing 〓 Sleeping for 561.0 ms Taking screenshot 1 Test failed, rerecording... Begin rerecord Sleeping for 2840.0 ms Taking screenshot 0 Sleeping for 2225.0 ms Clicking [156, 80] Sleeping for 463.0 ms Typing 〓 Sleeping for 561.0 ms Taking screenshot 1 Sleeping for 1530.0 ms Clicking [160, 63] Sleeping for 419.0 ms Typing 〓 Sleeping for 491.0 ms Taking screenshot 2 Playing back to ensure the test is correct Begin playback Sleeping for 2840.0 ms Taking screenshot 0 Sleeping for 2225.0 ms Clicking [156, 80] Sleeping for 463.0 ms Typing 〓 Sleeping for 561.0 ms Taking screenshot 1 Sleeping for 1530.0 ms Clicking [160, 63] Sleeping for 419.0 ms Typing 〓 Sleeping for 491.0 ms Taking screenshot 2 Test rerecorded successfully ** New screenshots were written; please verify that they are correct. **
テストに失敗すると、変更されたUIのスクリーンショットを取り直した上で警告が表示される
警告が表示されたら、UIを確認し、変更が意図しないものであれば、html、css、js、画像などを修正し、UIを直してから、スクリーンショットをrevertして再度テストすればいいと思う。
変更が意図したものであれば、スクリーンショットを正しいものとして次回のテストで使うためにcommitしておく。
目視だと気づかないミスもこれなら防げそう
