Rubyとseleniumでブラウザを操作してCVテストを自動化してみた

CVテストの半自動化を試みた

同じ入力項目のLPが何十個もあるサイトで大量のCVテストが辛いのでRubyとseleniumを使って半自動化してみました。正常系だけでも半自動で確認できたらだいぶ楽かと思います。スクショも自動で取るように設定できるので勝手にエビデンスも残してくれます。

seleniumのインストール

Rubyがインストール済だったらseleniumのインストールは下記コマンドでOKです

gem install selenium-webdriver

ChromeDriver のインストール

which rubyでルビーがインストールされている場所を確認します。

$ which ruby
/c/Ruby24-x64/bin/ruby

ChromeDriverを https://chromedriver.chromium.org/downloads よりダウンロードします。
ChromeDriverのバージョンがchromeと合ってないと正常に動作しないので注意が必要です。
ダウンロードしたファイル**(chromedriver.exe)**をwhich rubyで確認できたディレクトリに置きます。

サンプルコード

test.rb

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
driver.navigate.to "https://sample.com"

### 性別
unless driver.find_element(:name, 'gender').selected?
  query = driver.find_element(:name, 'gender').click
end

### 生年月日
# 年
query = Selenium::WebDriver::Support::Select.new(driver.find_element(:name, 'year'))
query.select_by(:value, '1990')
# 月
query = Selenium::WebDriver::Support::Select.new(driver.find_element(:name, 'month'))
query.select_by(:value, '01')
# 日
query = Selenium::WebDriver::Support::Select.new(driver.find_element(:name, 'day'))
query.select_by(:value, '01')

### 職業
query = Selenium::WebDriver::Support::Select.new(driver.find_element(:name, 'career'))
query.select_by(:value, 'その他')

# 途中経過をスクリーンショットで取得
driver.save_screenshot('step1.png')
sleep 1

### お名前
query = driver.find_element(:name, 'name_sei')
query.send_keys('山田太郎')

### フリガナ
query = driver.find_element(:name, 'ruby_sei')
query.send_keys('ヤマダタロウ')

### 電話番号
query = driver.find_element(:name, 'phone')
query.send_keys('09039858495')

### メールアドレス
query = driver.find_element(:name, 'email')
query.send_keys('[e-mail]')

### 郵便番号
query = driver.find_element(:name, 'zip')
query.send_keys('1410022')
driver.execute_script("console.log('住所取得')")
sleep 1

### 利用規約
unless driver.find_element(:name, 'agree').selected?
  query = driver.find_element(:name, 'agree').click
end

# 途中経過をスクリーンショットで取得
driver.save_screenshot('step2.png')

# 送信ボタンをクリック(送信)
driver.find_element(:id, "js-submit").click

# CV後のページをスクリーンショットで取得
driver.save_screenshot('step3.png')

サンプルコード説明

selenium-webdriverの読み込み

require 'selenium-webdriver'

chromeを起動

driver = Selenium::WebDriver.for :chrome
# chromeの部分をfirefox ie opera 等に設定することも可能です。

起動時のURLを指定

driver.navigate.to "https://sample.com"

チェックボックス・ラジオボタンを選択

unless driver.find_element(:name, 'gender').selected?
  query = driver.find_element(:name, 'gender').click
end

セレクトタグをoptionのvalueより選択

query = Selenium::WebDriver::Support::Select.new(driver.find_element(:name, 'year'))
query.select_by(:value, '1990')

スクリーンショットを取得

driver.save_screenshot('step1.png')

nameで取得したテキストエリアに値を入力

下記の場合nameは「name_sei」で入力する値は「山田太郎」となります。

query = driver.find_element(:name, 'name_sei')
query.send_keys('山田太郎')

JavaScriptを実行

driver.execute_script("console.log('住所取得')")

指定した要素をクリック

driver.find_element(:id, "js-submit").click

テスト実行

以下のコマンドでテストが実行されます。

cd /path to test.rb
ruby test.rb

使ってみた感想

実際使ってみて、自動でCVテストが出来るのはちょっとした感動を覚えました。
人がCVテストする前提で補助ツールとして導入したらかなり強力だと思います。

ただし、CVテストの自動化はどのサイトでもできるような万能なものではないと感じました。例えば、入力項目がある程度固定されているフォームだったら導入後の確認がすごく楽になりそうですが、頻繁に仕様が変わるフォームではテストプログラムのメンテナンスが大変になります。

また、PCとSPで実装方法が統一されていないと当然テスト用のプログラムも２つ書く必要があります。JSで動的に切り替わるフォームについても実装は（可能ですが）結構キツイように思います。