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('[email protected]')
### 郵便番号
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で取得したテキストエリアに値を入力
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('[email protected]')
### 郵便番号
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')
require 'selenium-webdriver'
driver = Selenium::WebDriver.for :chrome
#chromeの部分をfirefox ie opera 等に設定することも可能です。
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')
driver.save_screenshot('step1.png')
下記の場合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で実装方法が統一されていないと当然テスト用のプログラムも2つ書く必要があります。JSで動的に切り替わるフォームについても実装は(可能ですが)結構キツイように思います。
Author And Source
この問題について(Rubyとseleniumでブラウザを操作してCVテストを自動化してみた), 我々は、より多くの情報をここで見つけました https://qiita.com/ikdysk/items/48955d93a7f940b218ed著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .