5分でできる！Seleniumでブラウザテスト自動化入門

こんにちは。サーバサイドエンジニア兼QAエンジニアの斉藤（@saik1010）です。

弊社QAチームでも取り組みを始めた、Seleniumを使用したブラウザテスト自動化について、
環境構築〜簡単なプログラムを実行するまでをご紹介しようと思います！

動作環境

もくじ

1. 概要
2. 構築手順
3. プログラム作成〜実行
4. まとめ

概要

今回は、手元のMacにSelenium+Ruby+Capybaraをインストールして、
手軽でシンプルなブラウザテストの環境を構築していきます。

弊社のメイン言語はPHP/Goを採用しておりますが、両言語ともSeleniumで公式サポートされていないため、将来的な運用保守を考慮して、Rubyを採用しました。

また、RubyにはCapybaraという強力なサードパーティ製のラッパーがあり、かなりシンプル（※1）にSeleniumのコードを書くことができることも１つの大きな選定要因になっています。
※1 個人的な感覚ですが、ピュアなJavaScriptがjQueryで書けるようになるぐらいの関係性に近い

構築手順

では早速、環境構築をしていきましょう！

HomeBrewのインストール

インストールにはHomeBrewを使用すると簡単に環境構築を行うことができます。
※既にインストール済みの場合はスキップしてください

$ /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からインストールをしていきましょう！

# 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

続けてrbenvを利用して、Rubyをインストールします！

# インストール可能な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をインストールすることで、動作させることが可能です。
※対象のブラウザは、こちらをご確認ください！

$ gem install selenium-webdriver
$ brew install chromedriver

関連ライブラリのインストール

続けてCapybaraとRSpecをインストールします！
こちらもRubygemsで簡単に入れることができます。

$ gem install capybara
$ gem install rspec

プログラム作成〜実行

それではインストールしたSelenium+Ruby+Capybaraを利用して、簡単なサンプルプログラムを実装してみましょう！Seleniumの公式サイトで、サンプルサイトが提供されているので、そちらをアクセスして入力フォームの自動テストを実装していきます！

# 使用するライブラリを指定
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です！

$ rspec 作成したファイル名.rb
.

Finished in 4.76 seconds (files took 0.25653 seconds to load)
1 example, 0 failures

まとめ

いかがでしたでしょうか？「5分で」はちょっと盛りすぎましたが・・・（笑）
シンプルかつ、少ないコード量でブラウザテストの自動化が実現できました！他にもスクリーンショットを撮るなど、Seleniumには多くの機能が提供されているので、弊社では回帰テストなどに利用していこうと考えています。

本番運用に向けては、テストサーバへの環境構築やヘッドレスブラウザの利用など、まだまだ課題はありますが、ひとまず運用に乗せてから検証を進めてみようと思います。
また後日、こちらのブログで検証結果を報告させて頂きますので、続編に乞うご期待ください！

Wedding Parkでは一緒に技術のウエディングパークを創っていくエンジニアを募集しています。
興味のある方はぜひ一度気軽にオフィスに遊びにきてください。

ブライダル業界のデジタルシフトを加速させるリードエンジニア候補募集！