株式会社キャッチアップにて行っている勉強会での発表資料です。今回はエンジニアの坂口 昌巳が発表した資料を公開致します。

1. 社内勉強会（2016/01/27)
ローカル環境のテスト自動化

2. Seleniumとは
 WebのUIテストを自動化するツール
 クロスブラウザ、クロスプラット
フォームのUIテストツール
 http://www.seleniumhq.org/
 参考
 http://qiita.com/edo_m18/items/ba7d8a95818e9c0552d9
Copyright Catchup, Inc. All Rights Reserved.
2

3. Selenium IDE とは
 Selenium を Firefoxから簡単に使える
アドオン（機能拡張）
 http://www.seleniumhq.org/projects/ide/
 参考
http://qiita.com/showmurai/items/eb9d2a09c584b46727aa
Copyright Catchup, Inc. All Rights Reserved.
3

4. Selenium IDE で テストする
1. Firefox で Selenium IDEを起動
2. 特定のページ（フォームなど）を表示
3. 記録ボタンを押して動作を記録開始
4. いろいろな動作を行う
5. 再生ボタンで自動的に先ほどの動作を再現
実際にやってみる
Copyright Catchup, Inc. All Rights Reserved.
4

5. コードを書いて機能を拡張
 例）
 入力する値をランダムで設定
 入力値：
 javascript{eval( ("00000"+Math.floor(Math.random()*99999) ).slic
e(-5) )}
 表示値：
 yamau${ID}
 実はHTMLやjavascript以外のコードも使える
Copyright Catchup, Inc. All Rights Reserved.
5

6. テストケースを保存
 サイト（URL）毎にテストケースを保存
 テストケースを複数まとめたテストス
イートの機能がある
 サイト単位とか、ローカル、デモ、本番、
のような環境別など
 今のところテストスイートは活用できて
ない。
Copyright Catchup, Inc. All Rights Reserved.
6

7. MailCatcher
 シンプルなSMTPサーバ
 SMTPサーバーを経由したメールをブラウザ上から確認できる
 http://mailcatcher.me/
Copyright Catchup, Inc. All Rights Reserved.
7

8. MailCatcherの何が良いのか
 ローカルのメールを全て受信して表示する
 ローカル環境からは外部へメール送信させたくない
 存在しないメールアドレスも送信できるので、テスト時に送信テストが
簡単。
 外部に送信されないので、間違って本番環境への送信を防げる
Copyright Catchup, Inc. All Rights Reserved.
8

9. MailCatcher のインストール
 gem install mailcatcher (環境によってsudoいるかも）
 mailcatcher
 ブラウザで http://localhost:1080/ を表示
 MAMPなどの php.ini へ
 sendmail_path = /usr/bin/env catchmail
 を追加
Copyright Catchup, Inc. All Rights Reserved.
9

10. Mac OS X El Capitanの場合
 インストール時にコケるみたいなので、
 http://nob-log.info/2016/01/05/el-capitan-gem-install/ を参考にした
 brew link --force openssl
 sudo gem install -n /usr/local/bin mailcatcher
 MAMPなどの php.ini へ
 sendmail_path = /usr/bin/env /usr/local/bin/catchmail
Copyright Catchup, Inc. All Rights Reserved.
10

11. Mac起動時にMailCatcher自動起動
 Automaterでシェルスクリプトやコマンド実行できる
 「アプリケーション→Automator.app」からAutomatorを起動
 書類の種類を「アプリケーション」
 左側の一覧から「シェルスクリプトを実行」を選択
 右のエリアにドロップ
 アプリケーション形式で保存
 「システム環境設定→ユーザとグループ」「ログイン項目」
 詳しくは http://qiita.com/kagerou_ts/items/2606703e70c5eb18fb37
Copyright Catchup, Inc. All Rights Reserved.
11

12. おまけ：Firefox の 便利機能
 開発ツール：インスペクタでJavaScriptのDOMに割当られているイベン
トを確認できる（結構便利）
 Chromeでも出来るらしい（知ってる人教えて！）
Copyright Catchup, Inc. All Rights Reserved.
12