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```で確認できたディレクトリに置きます。

# サンプルコード
```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('sample@example.com')

### 郵便番号
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の読み込み

```ruby
require 'selenium-webdriver'
```

###chromeを起動

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

###起動時のURLを指定

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

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

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

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

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

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

```ruby
driver.save_screenshot('step1.png')
```

###nameで取得したテキストエリアに値を入力
下記の場合nameは「name_sei」で入力する値は「山田太郎」となります。

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

###JavaScriptを実行

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

###指定した要素をクリック

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

#テスト実行

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

```
cd /path to test.rb
ruby test.rb
```

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

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

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