[Ruby]ハマりを最小限に抑えるseleniumの導入方法

# はじめに
seleniumは、Webアプリケーションのテストを自動化するためのツールであり、プログラムからWebブラウザの自動操作を行うことが出来ます。
自分が導入した際につまづいた点を振り返りながら、初心者なりに考え、仮にエラーが出たとしても調査しやすいような手順にまとめましたので、これから導入される方のお役に立てればと思います。(フォルダ構成が変わるだけで、WinもMacも作業は同じです)

# selenium導入手順 目次
[0_webスクレイピングで気をつけること](#0_webスクレイピングで気をつけること)
[1_確認作業用フォルダの作成](#1_確認作業用フォルダの作成)
[2_chromedriverのダウンロード](#2_chromedriverのダウンロード)
[3_seleniumのインストール](#3_seleniumのインストール)
[4_中間動作確認](#4_中間動作確認)
[5_chromedriverの移動](#5_chromedriverの移動)
[6_最終動作確認](#6_最終動作確認)

# 0_webスクレイピングで気をつけること
seleniumを使ってWebアプリケーションの自動テストの他に、webスクレイピングも出来ます。スクレイピングの際、やって良いこと/悪いことがありますので、これから始めるという方は下記の記事を読まれることをおすすめします。

[- Webスクレイピングの注意事項一覧](https://qiita.com/nezuq/items/c5e827e1827e7cb29011)
[- WEBスクレイピングの技術と懸念事項](https://qiita.com/tetsukick/items/6b4322199d4702047ced)
# 1_確認作業用フォルダの作成
確認作業のためにデスクトップにフォルダを作り、中にhtmlファイルとRubyファイルを作成します。
コンソールで下記を実行
`mkdir /Users/ユーザーネーム/Desktop/sele_work`
`cd /Users/ユーザーネーム/Desktop/sele_work`
`touch sample.html`
`touch selenium_test.rb`

ファイルを編集

```html:sample.html
<!DOCTYPE html>
<html>
	<head>
		<title>テスト用</title>
	</head>
	<body>
		<h1>ハンバーガーショップ</h1>
		<div>
			メニュー:
			<select name="menu">
			<option value="">メニューを選択してください</option>
			<option value="normal">ハンバーガー</option>
			<option value="cheese">チーズバーガー</option>
			<option value="double">ダブルバーガー</option>
			</select>
			<br>
			サブメニュー:
			<input type=checkbox name="submenu" value="drink">飲み物
			<input type=checkbox name="submenu" value="potato">ポテト
			<input type=checkbox name="submenu" value="nugget">ナゲット
			<br>
			お持ち帰り:
			<input type=radio name="takeout" value="yes">yes
			<input type=radio name="takeout" value="no">no
			<br>
			メモ:
			<input type=text name="memo">
		</div>
		<input type=submit value="OK">
		<input type=reset value="キャンセル">
	</body>
</html>
```
```ruby:selenium_test.rb
require "selenium-webdriver"

url = "file:///Users/ユーザーネーム/Desktop/sele_work/sample.html"

# chromeドライバは作業フォルダに仮置中なので作業フォルダを指定する
chromedriver_path = "/Users/ユーザーネーム/Desktop/sele_work/chromedriver"
Selenium::WebDriver::Chrome::Service.driver_path = chromedriver_path
driver = Selenium::WebDriver.for :chrome

# urlへアクセス
driver.get(url)

p driver.page_source

driver.quit
```

# 2_chromedriverのダウンロード
Google Chromeのバージョンを確認してから、自分のchromeのバージョンに合ったドライバを[こちら](https://chromedriver.chromium.org/downloads)からダウンロードし、解凍した`chromedriver`を`/Users/ユーザーネーム/Desktop/sele_work`に置きます。

【Google Chromeのバージョンチェック】
![01_chormeバージョンチェック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883849/cc6faf41-e7fe-6dae-366c-f291fce7c15a.png)


# 3_seleniumのインストール
コンソールで下記を実行
`gem install selenium-webdriver`

# 4_中間動作確認
ここで一旦、`ruby selenium_test.rb`を実行し、`sample.html`のsourceが取得できていることを確認します。セキュリティーのエラーが出たら、左上のりんごマーク > システム環境設定 > セキュリティーとプライバシーに進み許可を選択します。

セキュリティーブロックを解除してもエラーが発生する場合は、以下が考えられます。
- Google Chromeとchromedriverのバージョンが合っていない
- 誤字やファイル指定のミスが有る

【セキュリティーエラーの対処】
![02_セキュリティー解除.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883849/c4dc433d-590d-b8fe-b28a-b0f56d3ba9ec.png)
【ソース取得成功】
![03_実行結果1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883849/e123542a-2bb9-4753-eec1-efa7b892a43b.png)

# 5_chromedriverの移動
`chromedriver`の動作確認が出来たので、本来置くべき場所の`/usr/local/bin`へ移動します。
コンソールで下記を実行し、ちゃんと移動できたかも確認。
`sudo mv chromedriver /usr/local/bin/`
`which chromedriver`
PATHが通ってるか確認
`echo $PATH`
もし通っていないならPATHを追加
`export PATH=“/usr/local/bin:$PATH”`

【chromedriverの移動、PATHの確認】
![05_ドライバを移動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883849/ee5eec25-2c0d-32a8-2579-bfb7c9a7a8f6.png)

# 6_最終動作確認
最後に、`selenium_test.rb`を修正し、再度`ruby selenium_test.rb`を実行する。
中間動作確認と同じ結果が得られれば任務完了。
ここでエラーが出る場合は、PATHが通っていないことが考えられます。

```ruby:selenium_test.rb
require "selenium-webdriver"

url = "file:///Users/ユーザーネーム/Desktop/sele_work/sample.html"

# chromeドライバは作業フォルダに仮置中なので作業フォルダを指定する

# コメントアウト ここから
# chromedriver_path = "/Users/ユーザーネーム/Desktop/sele_work/chromedriver"
# Selenium::WebDriver::Chrome::Service.driver_path = chromedriver_path
# ここまで コメントアウト

driver = Selenium::WebDriver.for :chrome

# urlへアクセス
driver.get(url)

p driver.page_source

driver.quit
```

【最終動作確認結果】
![06_実行結果2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883849/a041b8e8-cc1d-bc92-d8c3-3b8ad4937e85.png)

【おまけ pythonからも動作確認】
![07_おまけ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883849/afae1bee-a7d8-6abb-7937-351953bf516d.png)