はじめてのE2Eテスト

はじめてのE2Eテスト

はじめまして、デザイン開発部の大嶽です。

つい最近、オールコネクトのデザイン部にシステム担当の部門ができたので、その界隈を担当してます。

いろいろやりますが、どちらかと言えばバックエンド側担当です-。

 

さて今日のお題ですが、タイトル通りE2Eテストについて少し書いてみました!

 

E2Eテストってなんぞや?

上司: ちょっとE2Eテストで検収チェックできないかやってみてよ。

部下: ああ、はいはい。

 

早速、グぐってみました。

selenium…

phantom….

自動化.....

なんだかシステムの人じゃないと頭が痛くなりますね。

簡単に書くと、「利用者目線で見える範囲をチェックするテスト」といったところでしょうか。

ただ、今どきはブラウザ操作を自動化して作業を簡略化したり繰返し行うテストを自動でやってみたりみたいですね-。

ブラウザ操作の自動化は、昔から良くある手法なので他の記事に任せておきましょ-。

今回はサイトのリリース前とリリース後のチェックするところをE2Eテストの対象にしてみました!

 

リリース前とリリース後のチェックって?

簡単な修正などになると、

  • 文言変えた
  • バナー画像差し替えた
  • 商品の金額変えた

等々、こまごました部分を手直しすることがあるかと思います。

サイトのチェックシートが完璧ならチェック作業は余裕ですね!

しかし!?、修正した後、人知れず変わってしまっている部分がおきたりとか心配ですよね?

そんな時には、リリース前(今の状態)とリリース後(修正した状態)キャプチャとって比較してみると楽になるかもしれませんね。

そんな訳で、早速そんな作業が楽になる方法を探してみましょう!

 

どうやってキャプチャする?

部下: キャプチャって、なんかいい方法ないっすかねー

上司: 自動キャプチャで調べてみてー

 

またまた、グぐってみました。

alt+print screen

ダルいですね、縦長~いモニタ買ってもらわないと無理ですね。

seleniumで自動キャプチャ

まま、何とか頑張れそうですね。

一通り操作スクリプト作るまでが、ダルいですね…。

色々調べること小一時間・・・・・・・

「E2E 自動キャプチャ」で、リクルートさんのこんな記事!?

Webページを監視して表示崩れが起きていないか検出できるE2Eテストを実装しました

rubyですか。capybaraですか・・・・。カピパラはなごむのですが、初めての人では敷居が高いですね。

さらっと見る限り、PhantomJSとCasperJSで可能なようです。

 

上司: お-、いいね。ちょっと環境つくってみてよ。

部下: まぢっすか。capybaraは知らんすよ。

上司: JSだけでいいんじゃない?

 

 

自動キャプチャする!?

一通り熟読してみると、PhantomJSとCasperJSで少し楽にキャプチャできるようなので、環境をつくってみました。

 

さて突然出てきたPhantomJSとCasperJSとは何でしょう。

急に敷居が高くなって来たよう思いますが、多分そうだと思います。

 

その前に前述のcapybaraなどで調べると自動テスト関係の情報が豊富なようで色々でてきます。

RSpec、Poltergeist…..

最近では、ヘッドレスブラウザってものがフロントエンドのテスト自動化に使われているようですね。

「ヘッドレスブラウザ=UIのないWebブラウザ」

PhantomJSはその類の一つで、SafariやChrome等と同じWebkitベースで作られているので、フロントエンドで動作するJavascriptも含むような通常のWebブラウザでしか見れなかったものと同じ動作をサーバ環境上で再現できるソフトウェアになっています。

CasperJSは、その自動化を簡素化するライブラリといった関係になります。

PhantomJSを直接操作(プログラミング)しようとすると大変なので、直感的に操作できるようCasperJS使うといった利用方法になります。

他の言語でも同様のライブラリは出回っているようですね。

固い話は、この辺にして早速環境を作ってみましょう。

 

実行するサーバーを用意する!?

弊社の作業環境がAWSになるので、AWS Linux上で作業する想定になります。

CentOS環境やMac環境の記事しか見つからなかったので、まとめてみました!

 

1.PhantomJSを動かす。

phantomjs.orgから最新版を取得しましょう。

この記事の時点では2.1。

AWS Linuxは64bit版になるので、以下を取得。

# wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2

# tar phantomjs-2.1.1-linux-x86_64.tar.bz2

パスが通る場所からphantomjsを呼び出せるようにします。

# sudo ln -s phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/bin/phantomjs

# phantomjs –version

2.1.1

2.CasperJSを動かす

casperjs.orgから最新版を取得しましょう。

http://docs.casperjs.org/en/latest/installation.html

 

# wget https://github.com/casperjs/casperjs/archive/1.1.4.zip

# unzip 1.1.4.zip -x casperjs

# sudo ln -s casperjs/bin/casperjs /usr/bin/casperjs

# casperjs –version

1.1.4

うまくいきましたか?これでキャプチャできる準備は整ったので次に進む。

 

PhantomJS・CasperJSを動かしてみる!?

 

PhantomJSも理解しておく必要はありますが、長くなるので今回は省略。

早速CasperJSでキャプチャしてみることに。

下記の記事が参考になったのでSampleを利用させてもらいました。

PhantomJS と CasperJS で複数ページを一括キャプチャする

casperjsのソースに含まれているサンプル

https://github.com/casperjs/casperjs/tree/master/samples

CasperJSで出来そうな事

・フォーム操作(POST)

・ページ遷移(GET)

・スクロール

・マウスオーバー?(mouse.move?)

 

さて記事を参考にcasperjsを動かしてみること数十分。

# casperjs capture.js pc

キャプチャできたのはいいのですが、文字化けしてる・・・・。

調べること数十分・・・・。

フォントを導入しろと。

# sudo yum install ipa-gothic-fonts.noarch
# sudo yum install ipa-mincho-fonts.noarch

http://qiita.com/uti/items/d2cf98840783cf0de37c

qiita 様様ですね。

ようやく公開しているサイトはうまくキャプチャできました!

そして次はリリース前環境のキャプチャ。

ポチポチっとURLを変更、basic認証がかかっているので以下。

# casperjs capture.js pc –id=hoge –pass=fuga

なぜか真っ白に・・・・・、なぜだ!?

さらに調べること数十分。

オレオレSSLの場合(ブラウザで警告が出るやつですね)、エラーを無視するパラメータが必要らしいですね。

# casperjs –ignore-ssl-errors=yes capture.js pc –id=hoge –pass=fuga

ふう、なんとかキャプチャ成功!

ひとまずコーヒーで一服。

 

さて自動キャプチャできたのは結果オーライなのですが、どうやって違いを確認しましょうか・・・。

1,2ページのサイトなら目視で十分ですが、3-40ぐらいのリンクがあるとダルいですね。

 

自動で画像の違いを比較する!?

上司: お、できた?キャプチャした画像、比較してCSVにしてよ。

部下: 画像比較ですか。Photoショでいいんじゃ?

上司: いや、100画像とかあると大変でしょ。

 

という訳で、画像ファイルをプログラムで操作するImageMagickを使ってみることに。

AWS Linux上ではyumでinstallできるので以下。

# sudo yum install ImageMagick

 

で、画像比較はどうやって?

今回はPHPでかいてみましょ-。

ライブラリが必要なのでpecl版入れる。

yumのpecl版は少し古いので、最新がほしい人はソースコードから入れてみましょう。

# sudo yum install php-pecl-imagick

 

画像を比較してみる。

compareImagesが画像サイズを同じにしておかないとエラーになるので、リサイズしてから比較。

これを出力した画像分繰り返すと一覧に取れて楽になりますね-。

参考:

http://qiita.com/yaoki_dokidoki/items/fe546b5491ec806639e4

 

$i1 = new imagick($img1);
$i2 = new imagick($img2);

$resize_width = $i1->getImageWidth();
$resize_height = $i1->getImageHeight();

$i2->resizeImage($resize_width, $resize_height, Imagick::FILTER_LANCZOS, 1);

try{
list($result,$rate) = $i1->compareImages($i2, Imagick::METRIC_MEANSQUAREERROR);
echo $file->getFilename().’,’.$rate.”\r\n”;

}catch(Exception $e){
echo $e->getMessage().”\r\n”;

}

 

 

まとめ!?

部下: とりあえず例の物、できましたけど。

上司: ほぉ、いいんじゃない!?

部下: 画像比較してみて気づいたのですが、変更が多いと差分の範囲が多すぎて余りメリットがでないですね。ちょっとした変更とか他ページに影響が出ていないか等の検証には使えそうです。

上司: ああ、そうかい。利用ケースを実際の案件で回してみるといいかもね。検証していみてよ。

部下: はいはい、わかりましたよ。

 

 

さて、途中かなり端折った部分がありましたが画像生成まで出来たでしょうか?

まとめ版のサンプルコードはこちら。

https://acdev-ohtake@bitbucket.org/acdev-ohtake/samples.git

 

次回は、ヘッドレスブラウザのイベント操作かdockerネタに迫ってみたいと思います。それではまた-。

 

ヘッドレスブラウザ、Chromeもサポートしてるようですね。

http://qiita.com/devneko/items/51f2e114a7e0b3389435


Previous: 「技術共有会」デザイン部の技術向上のために。 Next: 「締切やコストを明確にする」という話 | パーキンソンの法則

© 2017 ALL CONNECT Inc. All Rights Reserved.