Seleniumの基礎にして基礎

<h2>概要</h2>
今回は見るからに近未来的技術っぽいツール<b>Selenium</b>を紹介します。

<h2>そもそもSeleniumとは</h2>
Selenium（セレニウム）とはブラウザのオートメーションツールです。
自動でブラウザを操作することでWebサイトの動作のテストなどが行うことができます。

<h2>本題</h2>
というわけで実際にSeleniumで動かしてみましょう！

<h3>1.自動化するものを決める</h3>
繰り返し同じ処理をするものを自動化させましょう。
今回は会社などで使われている交通費申請の入力を自動化してみます。

<h3>2.使う言語を決める</h3>
Seleniumで使うことのできる言語はJava、Ruby、Pythonに対応しています。
今回はMacを使っているのでPythonを使用しますが、JavaだろうがRubyだろうがほとんど変わらないです。ご安心ください。

<h3>3.使うブラウザを決める</h3>
SeleniumはWebdriverというものを指定する必要があるのですが、使うブラウザによってWebdriverを変える必要があります。
今回はChromeで動作するようにします。

<h3>4.実際のソースコードを元に説明します</h3>
試しに書いてみたソースコードがこちらです。
ログインIDやPass、URLなどは適当にしています。

```python

# coding: UTF-8

import Tkinter
import tkMessageBox  
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()    #(1)使うブラウザの指定
driver.get("https://rsclef.rakurakuseisan.jp/URL/")  #(2)URLに遷移する

driver.find_element_by_name("loginId").send_keys("ログインID")  #(3)文字の入力
driver.find_element_by_name("password").send_keys("パスワード")
driver.find_element_by_id("submitBtn").click()

driver.set_page_load_timeout(5)  #(4)ページのローディングを待つ
driver.get("https://rsclef.rakurakuseisan.jp/URL/sapKotsuhiDenpyo/initializeView")
Select(driver.find_element_by_name("meisaiContents1")).select_by_visible_text("なし")
Select(driver.find_element_by_xpath('//*[@id="inputArea"]/table/tbody/tr[3]/td[2]/table/tbody/tr/td[7]/select')).select_by_value("1")
Select(driver.find_element_by_name("meisaiContents2")).select_by_visible_text("技術部帰社日")
driver.find_element_by_xpath('//*[@id="inputArea"]/div/button[1]').click()

driver.set_page_load_timeout(5)
driver.switch_to.window(driver.window_handles[-1])
driver.set_page_load_timeout(5)
driver.find_element_by_id('eki1').send_keys(u"西小山")
driver.find_element_by_id('eki2').send_keys(u"有楽町")
driver.find_element_by_id('inputFormSubmit').click()
```

<h4>(1)使うブラウザの指定</h4>
こちらは先ほど記述した通りブラウザを指定しています。

<h4>(2)URLに遷移する</h4>
ここから実際の動作処理を記述しているのですが、
基本的にdriver.〜で処理を書いて動かしています。

「こういう処理がしたい！」と思った時は「selenium したい処理」で検索すると
大概の処理は出てきます。
よく使う処理は以下のページにまとまっているのでぜひご活用を。
https://qiita.com/mochio/items/dc9935ee607895420186

<h4>(3)文字の入力</h4>
seleniumで文字の自動入力を行うことができるのですが、
その際にしなければ処理は2つに分けて考える必要があります。
<b>「文字を入力する要素(Element)を探す処理」</b>と<b>「文字を入力する処理」</b>です。

まずは文字を入力する要素(Element)を探す処理から説明します。
文字列を入力するテキストボックスの要素をChromeの機能を使って特定していきます。
<b>ここが一番重要です！</b>

文字を入れたい画面に遷移し、右上のボタン→その他ツール→デベロッパツール

![スクリーンショット 2019-04-29 14.48.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/dbbaf8ec-a4dc-8922-0081-adc0aa7a2f93.png)

すると画面右にソースコードが表示されますので、
①のボタンを押して、テキストを入力したいテキストボックス②をクリックします。
するとテキストボックスのソースコードが右画面で強調されるのでソースの特定を行うことができます。

![スクリーンショット 2019-04-29 14.51.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402218/49c7ff64-1923-f55f-37cd-e5f5767319f5.png)

該当のソースコードがこちらです。

```
<input name="p" id="srchtxt" type="text" value="" autocomplete="off">
```

seleniumで要素(Element)を取得する上で必要なものとして
idやnameなどとといったその<b>Elementを特定するものが必要</b>です。
今回はidの要素があるのでこちらを使用することによって特定できます。

しかし、ソースコードによってはidもnameなどElementを特定できるものがない場合があります。
そんな時に便利なのが<b>XPath</b>です。
XPathとは必ず一意になるようになっておりElementを特定することができます。
デベロッパツールから該当のコードで右クリック→Copy→CopyXPathを行い、ペーストすることによってXPathを取得することができます。
しかし、XPathは以下のように非常に冗長であることと、可読性があることから極力idやnameを使うようにしましょう。

```
'//*[@id="inputArea"]/table/tbody/tr[3]/td[2]/table/tbody/tr/td[7]/select'
```

Elementの取得方法の参考
http://www.seleniumqref.com/api/webdriver_gyaku.html

Elementの特定ができれば、あとは楽勝です。
「selenium 文字入力」で検索しましょう。
Pythonの場合、send_keys("入力したい文字")でいけるようですね。
メソッドによってはimport文を追加する必要があるので注意が必要です。

<h4>(4)ページのローディングを待つ</h4>
自動操作のため、ページの読み込みの前にElementの取得を行おうとして、
「そんなElementないよ」と怒られることがあるため、ページのローディングを最大5秒まつ処理を入れています。


<h2>まとめ</h2>
以上がseleniumの基礎になります。
seleniumはこの他にも処理を一時中断したり、いろんな機能があるので時間を見つけて便利機能についてまとめれればと思っています。
その他の処理については機能にあったメソッドを呼び出すだけなので敢えて説明しませんが、
不明点や分かりにくい点などあればコメントお願いします！