こんにちは。サーバサイドエンジニア兼QAエンジニアの斉藤（@saik1010）です。
弊社QAチームでも取り組みを始めた、Seleniumを使用したブラウザテスト自動化について、
環境構築〜簡単なプログラムを実行するまでをご紹介しようと思います！
動作環境
| 環境 | バージョン |
|---|---|
| macOS Sierra | 10.12.6 |
| Ruby | 2.4.2 |
| rbenv | 1.1.1 |
| RSpec | 3.7.0 |
| Capybara | 2.16.0 |
| Selenium Webdriver | 3.60 |
| ChromeDriver | 2.35 |
もくじ
- 概要
- 構築手順
- プログラム作成〜実行
- まとめ
概要
今回は、手元のMacにSelenium+Ruby+Capybaraをインストールして、
手軽でシンプルなブラウザテストの環境を構築していきます。
弊社のメイン言語はPHP/Goを採用しておりますが、両言語ともSeleniumで公式サポートされていないため、将来的な運用保守を考慮して、Rubyを採用しました。
また、RubyにはCapybaraという強力なサードパーティ製のラッパーがあり、かなりシンプル（※1）にSeleniumのコードを書くことができることも１つの大きな選定要因になっています。
※1 個人的な感覚ですが、ピュアなJavaScriptがjQueryで書けるようになるぐらいの関係性に近い
構築手順
では早速、環境構築をしていきましょう！
HomeBrewのインストール
インストールにはHomeBrewを使用すると簡単に環境構築を行うことができます。
※既にインストール済みの場合はスキップしてください
|
1 2 3 4 |
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" $ brew -v Homebrew 1.5.11 Homebrew/homebrew-core (git revision 847b9; last commit 2018-03-20) |
Rubyのインストール
そのまま、最新版のRubyを入れてしまっても良いのですが、
複数バージョンを管理することも想定して、rbenvを利用し、Rubyをインストールします。
まずはrbenvからインストールをしていきましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# rbenvのインストール $ brew install rbenv $ rbenv --version rbenv 1.1.1 # 初期設定のスクリプトを設定する $ vi ~/.bash_profile eval "$(rbenv init -)" #追記 $ source ~/.bash_profile # 正しくインストールできているか確認 $ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash Checking for `rbenv' in PATH: /usr/local/bin/rbenv Checking for rbenv shims in PATH: OK Checking `rbenv install' support: /usr/local/bin/rbenv-install (ruby-build 20180224) Counting installed Ruby versions: 2 versions Checking RubyGems settings: OK Auditing installed plugins: OK |
|
1 2 3 4 5 6 7 8 9 |
# インストール可能なrubyのバージョン確認 $ rbenv install -l # Rubyのインストール $ rbenv install 2.4.2 $ rbenv global 2.4.2 $ rbenv rehash $ ruby -v ruby 2.4.2p198 (2017-09-14 revision 59899) [x86_64-darwin16] |
Seleniumのインストール
Rubygemsを使用して、Seleniumをインストールします！
今回は、自動テスト対象としてChromeを利用するため、WebDriverはChromeDriverのみをインストールしていますが、IEやFirefoxなどでも専用のWebDriverをインストールすることで、動作させることが可能です。
※対象のブラウザは、こちらをご確認ください！
|
1 2 |
$ gem install selenium-webdriver $ brew install chromedriver |
関連ライブラリのインストール
続けてCapybaraとRSpecをインストールします！
こちらもRubygemsで簡単に入れることができます。
|
1 2 |
$ gem install capybara $ gem install rspec |
プログラム作成〜実行
それではインストールしたSelenium+Ruby+Capybaraを利用して、簡単なサンプルプログラムを実装してみましょう！Seleniumの公式サイトで、サンプルサイトが提供されているので、そちらをアクセスして入力フォームの自動テストを実装していきます！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
# 使用するライブラリを指定 require 'capybara/rspec' # seleniumでchoromeを使用する Capybara.default_driver = :selenium Capybara.register_driver :selenium do |app| Capybara::Selenium::Driver.new(app, :browser => :chrome) end # テストケース feature 'Seleniumでテストサンプル' do scenario '入力フォームの確認' do # サンプルサイトへアクセス visit 'http://example.selenium.jp/reserveApp/' # フォームへ入力（htmlタグのid指定） fill_in('reserve_year', with: '2018') fill_in('reserve_month', with: '4') fill_in('reserve_day', with: '1') fill_in('reserve_term', with: '3') fill_in('headcount', with: '5') fill_in('guestname', with: 'Selenium テスト') # ラジオボタンを選択（htmlタグのid指定） choose('breakfast_off') # チェックボックスを選択（htmlタグのid指定） check('plan_a') # ボタン押下 click_on '次へ' end end |
実際に実装したプログラムを実行してみます！Chromeが自動で立ち上がり、テストが実行されればOKです！
|
1 2 3 4 5 |
$ rspec 作成したファイル名.rb . Finished in 4.76 seconds (files took 0.25653 seconds to load) 1 example, 0 failures |
まとめ
いかがでしたでしょうか？「5分で」はちょっと盛りすぎましたが・・・（笑）
シンプルかつ、少ないコード量でブラウザテストの自動化が実現できました！他にもスクリーンショットを撮るなど、Seleniumには多くの機能が提供されているので、弊社では回帰テストなどに利用していこうと考えています。
本番運用に向けては、テストサーバへの環境構築やヘッドレスブラウザの利用など、まだまだ課題はありますが、ひとまず運用に乗せてから検証を進めてみようと思います。
また後日、こちらのブログで検証結果を報告させて頂きますので、続編に乞うご期待ください！
Wedding Parkでは一緒に技術のウエディングパークを創っていくエンジニアを募集しています。
興味のある方はぜひ一度気軽にオフィスに遊びにきてください。
ブライダル業界のデジタルシフトを加速させるリードエンジニア候補募集！
