bashでWebブラウザ(Selenium WebDriver)を動かした話

bashで
Webブラウザ
(Selenium WebDriver)を
動かした話
ひろくん

Seleniumとは?
• 原子番号34の元素
• 元素記号はSe
• 第16族元素
– 酸素と同族
– ハロゲンの隣
• 灰色セレン
– 金属セレン
– 六方晶系
– 融点は217.4℃
• 赤色セレン
– 単斜晶系

Seleniumとは?
http://docs.seleniumhq.org/
• Webベースアプリケーション用テスト
自動化ツール
• ライセンスはApache 2.0 License

Selenium WebDriver
http://docs.seleniumhq.org/projects/webdriver/
• プログラムからWebブラウザ制御
• 制御可能ブラウザ
– Mozilla Firefox, Google Chrome(Linux, Windows,
MacOS, Android), Internet Explorer, Safari, Edge
• 使用可能言語
– Java, Ruby, Python, C#, Javascript(Node.js)など
• OS
– Linux, MacOS, Windowsなど

Selenium
Client
Firefox
Driver
Chrome
Driver
IE
Driver
制御
応答
制御
応答
制御
応答
制御
応答
制御
応答
大まかな仕組み
Microsoft
Edge
Driver
制御
応答

Selenium
Server
大まかな仕組み
Chrome
Driver
HTTPリクエスト
応答
応答
応答(JSON)
HTTPリクエスト
応答(JSON)

その方法
Chrome
Driver
HTTPリクエスト
応答
応答
応答(JSON)
HTTPリクエスト
応答(JSON)
curlコマンドで
実装
予め起動
Selenium
Server
起動
起動
操作
操作
応答
応答

Selenium Server の起動
下記コマンドを一行で
$ DISPLAY=:0.0
java –jar selenium-server-standalone-2.53.1.jar
-Dwebdriver.chrome.driver=/path/to/chromedriver
-Dwebdriver.ie.driver=/path/to/IEdriver
-Dwebdriver.edge.driver=‘/path/to/MicrosoftWebDriver’
環境変数DISPLAYは表示端末に合わせて適宜指定。
/path/to/chromedriver や /path/to/Iedriver なども適宜指定。
jarファイル、chromedriverの置き場所
http://www.seleniumhq.org/download/
オプション

curlとは?
http://www.suruga-ya.jp/product/detail/980001420000 より

curlコマンド
• curl(1)より
curl は、サーバから, あるいはサーバへ，
データ伝送を行うツールです。対応するプロ
トコルは： DICT, FILE, FTP, FTPS, GOPHER, HTTP,
HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3,
POP3S, RTMP, RTSP, SCP, SFTP, SMB, SMBS,
SMTP, SMTPS, TELNET, TFTP です。コマンドは
ユーザとの対話的操作を経なくとも動作する
ように設計されています。

curlコマンドの使い方
curl [options] [URL...]
↓
RESPONSE=
$(curl --request “メソッド名"
--data ‘渡すデータ(JSON)'
"APIのURL")
APIの詳細は
https://w3c.github.io/webdriver/webdriver-spec.html
curlコマンドの
応答を格納

Selenium WebDriverのAPI (一部)
メソッド URIのテンプレートコマンド
POST /session 新しくセッション
を作る
POST /session/{session id}/url 指定したURLへ
飛ぶ
GET /session/{session id}/title タイトルを得る
POST /session/{session id}/element 要素を見つける
POST /session/{session id}
/element/{element id}/sendKeys
指定した要素に
キー入力を送る
POST /session/{session id}
/element/{element id}/click
指定した要素を
クリックする
https://w3c.github.io/webdriver/webdriver-spec.html より

実習内容
次のテストを行なうスクリプトの作成
1. Webブラウザ起動
2. Googleで「小江戸らぐ」を検索
3. 次のページを表示
OSS支える！コミュニティー訪問~…
4. 写真をクリックして拡大表示
© 日経BP社http://itpro.nikkeibp.co.jp/article/COLUMN/20131003/508665/

Webブラウザ(Mozilla Firefox)起動
RESPONSE=$(curl --request "POST"
--data
'{"desiredCapabilities":
{"browserName":"firefox”},
"requiredCapabilities":{}}'
"http://localhost:4444/wd/hub/session")
# セッションIDを格納
SESSION_ID=$(echo ${RESPONSE} |
sed -e 's/^.*"sessionId":"([^"]*)".*/1/g')

curlコマンドの応答例
{
"state": null,
"sessionId":
"45314279-a985-4a7e-aee1-
30582a4f9c2a",
"hCode": 682306787,
"value": {
"applicationCacheEnabled": true,
"rotatable": false,
"handlesAlerts": true,
"databaseEnabled": true,
"version": "46.0.1",
"platform": "WINDOWS",
"nativeEvents": false,
"acceptSslCerts": true,
"webdriver.remote.sessionid":
"45314279-a985-4a7e-aee1-
30582a4f9c2a",
"webStorageEnabled": true,
"locationContextEnabled": true,
"browserName": "firefox",
"takesScreenshot": true,
"javascriptEnabled": true,
"cssSelectorsEnabled": true
},
"class":
"org.openqa.selenium.remote.
Response",
"status": 0
}

Webブラウザ(Google Chrome)起動
--data
{"browserName":“chrome”},

Webブラウザ(Internet Explorer)起動
--data
{"browserName":“internet explorer”},

Webブラウザ(Microsoft Edge)起動
--data
{"browserName":“MicrosoftEdge”},

Webブラウザ(Google Chrome on Android)起動
--data
{"browserName":"chrome“,
"chromeOptions": {"androidPackage":
"com.android.chrome"}},

Googleのページへ飛ぶ
curl --request "POST"
--data '{"url":“http://www.google.co.jp"}'
“http://localhost:4444/wd/hub
/session/"${SESSION_ID}"/url"
#(注) URIは一行で記述

Googleの検索窓を探す
--data '{"using":"‘name’”,”value”:“q”}’
/session/"${SESSION_ID}"/element")
# (注)URIは一行で記述
# ELEMENT_IDに検索窓のIDを格納
ELEMENT_ID=$(echo ${RESPONSE} |
sed -e 's/^.*"ELEMENT":"([^"]*)".*$/1/g')

curlコマンドの応答例
{
"state": "success",
“sessionId”:
"da990f64-671f-4b4e-b4f9-af3363fb54e8",
"hCode": 1209818291,
"value": {
"ELEMENT": "0"
},
"class": "org.openqa.selenium.remote.Response",
"status": 0
}
部品が見つかった場合は success
部品のID

部品の表示待ちをする場合
STATE=""
while [ "${STATE}" != "success" ]
do
--data '{"using":"'${SELECTOR}'","value":"'${LOCATOR}'"}'
“http://localhost:4444/wd/hub/session/"${SESSION_ID}"/element")
STATE=$(echo ${RESPONSE} |
sed -e 's/^.*"state":"([^"]*)".*$/1/g')
done
sed -e 's/^.*"ELEMENT":"([^"]*)".*$/1/g')

「小江戸らぐ」と打って検索
--data ‘{“value”:[“小江戸らぐn"]}'
"http://localhost:4444/wd/hub
/session/"${SESSION_ID}"
/element/"${ELEMENT_ID}"/value"

「小江戸らぐ」と打って検索(Edgeの場合)
• 日本語入力未対応→Javascriptで代用
– 「小江戸らぐ」と入力
--data ‘{“script”:“elements =
document.getElementsByName("q");
elements[0].value="小江戸らぐ";",
"args":[]}'
“http://localhost:4444/wd
/hub/session/”${SESSION_ID}"/execute/sync"
#(注) URI、Javascriptは一行で記述

「小江戸らぐ」と打って検索(Edgeの場合)
• 日本語入力未対応→Javascriptで代用
– Submitする
--data ‘{“script”:“elements =
document.getElementsByName(”f“);
elements[0].submit();”,
“args”:[]}’
/session/”${SESSION_ID}“/execute/sync“
#(注) URI、Javascriptは一行で記述

検索結果表示待ち
TITLE=""
while [ "${TITLE}" != "小江戸らぐ - Google 検索" ]
do
RESPONSE=$(curl --request "GET"
/session/”${SESSION_ID}“/title”)
TITLE=$(echo ${RESPONSE} |
sed -e 's/^.*"value":"([^"]*)".*$/1/g')
done

検索結果からリンクを探す
--data '{"using":"partial link text”,
”value”:“OSS支える！”}’
/session/"${SESSION_ID}"/element")
# (注) URIは一行で記述
# ELEMENT_IDに検索窓のIDを格納
sed -e 's/^.*"ELEMENT":"([^"]*)".*$/1/g')

リンクをクリック
/session/”${SESSION_ID}“
/element/”${ELEMENT_ID}“/click”
# (注) URIは一行で記述

こんな
感じで
作ります

まとめ
bashスクリプトでWebブラウザ(Selenium
WebDriver)を操作可能
• Selenium Serverを起動する。
• curlコマンドでHTTPリクエストをSelenium
Serverへ投げる。
• JSON形式の応答を加工して処理を続ける。

bashでWebブラウザ(Selenium WebDriver)を動かした話

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to bashでWebブラウザ(Selenium WebDriver)を動かした話

Similar to bashでWebブラウザ(Selenium WebDriver)を動かした話 (20)

More from 洋史東平

More from 洋史東平 (20)

Recently uploaded

Recently uploaded (9)