Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,758 views

Published on

curlコマンドを駆使してWebブラウザを自動実行した話をとりあげます。Mozilla Firefoxのほか、Google Chromeも自動実行可能です。また、Cygwinのbashを使えば、Internet Explorer、Microsoft Edge や Google Chrome on Android も自動実行可能です。

Published in: Technology
  • Be the first to comment

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

  1. 1. bashで Webブラウザ (Selenium WebDriver)を 動かした話 ひろくん
  2. 2. Seleniumとは? • 原子番号34の元素 • 元素記号はSe • 第16族元素 – 酸素と同族 – ハロゲンの隣 • 灰色セレン – 金属セレン – 六方晶系 – 融点は217.4℃ • 赤色セレン – 単斜晶系
  3. 3. では なくて
  4. 4. Seleniumとは? http://docs.seleniumhq.org/ • Webベースアプリケーション用テスト 自動化ツール • ライセンスはApache 2.0 License
  5. 5. 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など
  6. 6. Selenium Client Firefox Driver Chrome Driver IE Driver 制御 応答 制御 応答 制御 応答 制御 応答 制御 応答 大まかな仕組み Microsoft Edge Driver 制御 応答
  7. 7. Selenium Server 大まかな仕組み Chrome Driver HTTPリクエスト 応答 応答 応答(JSON) HTTPリクエスト 応答(JSON)
  8. 8. これを bashで
  9. 9. その方法 Chrome Driver HTTPリクエスト 応答 応答 応答(JSON) HTTPリクエスト 応答(JSON) curlコマンドで 実装 予め起動 Selenium Server 起動 起動 操作 操作 応答 応答
  10. 10. 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/ オプション
  11. 11. curlとは? http://www.suruga-ya.jp/product/detail/980001420000 より
  12. 12. では なくて
  13. 13. 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 です。 コマンドは ユーザとの対話的操作を経なくとも動作する ように設計されています。
  14. 14. curlコマンドの使い方 curl [options] [URL...] ↓ RESPONSE= $(curl --request “メソッド名" --data ‘渡すデータ(JSON)' "APIのURL") APIの詳細は https://w3c.github.io/webdriver/webdriver-spec.html curlコマンドの 応答を格納
  15. 15. 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 より
  16. 16. ここで 実習
  17. 17. 実習内容 次のテストを行なうスクリプトの作成 1. Webブラウザ起動 2. Googleで「小江戸らぐ」を検索 3. 次のページを表示 OSS支える!コミュニティー訪問~… 4. 写真をクリックして拡大表示 © 日経BP社http://itpro.nikkeibp.co.jp/article/COLUMN/20131003/508665/
  18. 18. 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')
  19. 19. 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 }
  20. 20. Webブラウザ(Google Chrome)起動 RESPONSE=$(curl --request "POST" --data '{"desiredCapabilities": {"browserName":“chrome”}, "requiredCapabilities":{}}' "http://localhost:4444/wd/hub/session") # セッションIDを格納 SESSION_ID=$(echo ${RESPONSE} | sed -e 's/^.*"sessionId":"([^"]*)".*/1/g')
  21. 21. Webブラウザ(Internet Explorer)起動 RESPONSE=$(curl --request "POST" --data '{"desiredCapabilities": {"browserName":“internet explorer”}, "requiredCapabilities":{}}' "http://localhost:4444/wd/hub/session") # セッションIDを格納 SESSION_ID=$(echo ${RESPONSE} | sed -e 's/^.*"sessionId":"([^"]*)".*/1/g')
  22. 22. Webブラウザ(Microsoft Edge)起動 RESPONSE=$(curl --request "POST" --data '{"desiredCapabilities": {"browserName":“MicrosoftEdge”}, "requiredCapabilities":{}}' "http://localhost:4444/wd/hub/session") # セッションIDを格納 SESSION_ID=$(echo ${RESPONSE} | sed -e 's/^.*"sessionId":"([^"]*)".*/1/g')
  23. 23. Webブラウザ(Google Chrome on Android)起動 RESPONSE=$(curl --request "POST" --data '{"desiredCapabilities": {"browserName":"chrome“, "chromeOptions": {"androidPackage": "com.android.chrome"}}, "requiredCapabilities":{}}' "http://localhost:4444/wd/hub/session") # セッションIDを格納 SESSION_ID=$(echo ${RESPONSE} | sed -e 's/^.*"sessionId":"([^"]*)".*/1/g')
  24. 24. Googleのページへ飛ぶ curl --request "POST" --data '{"url":“http://www.google.co.jp"}' “http://localhost:4444/wd/hub /session/"${SESSION_ID}"/url" #(注) URIは一行で記述
  25. 25. Googleの検索窓を探す RESPONSE=$(curl --request "POST" --data '{"using":"‘name’”,”value”:“q”}’ “http://localhost:4444/wd/hub /session/"${SESSION_ID}"/element") # (注)URIは一行で記述 # ELEMENT_IDに検索窓のIDを格納 ELEMENT_ID=$(echo ${RESPONSE} | sed -e 's/^.*"ELEMENT":"([^"]*)".*$/1/g')
  26. 26. curlコマンドの応答例 { "state": "success", “sessionId”: "da990f64-671f-4b4e-b4f9-af3363fb54e8", "hCode": 1209818291, "value": { "ELEMENT": "0" }, "class": "org.openqa.selenium.remote.Response", "status": 0 } 部品が見つかった場合は success 部品のID
  27. 27. 部品の表示待ちをする場合 STATE="" while [ "${STATE}" != "success" ] do RESPONSE=$(curl --request "POST" --data '{"using":"'${SELECTOR}'","value":"'${LOCATOR}'"}' “http://localhost:4444/wd/hub/session/"${SESSION_ID}"/element") STATE=$(echo ${RESPONSE} | sed -e 's/^.*"state":"([^"]*)".*$/1/g') done ELEMENT_ID=$(echo ${RESPONSE} | sed -e 's/^.*"ELEMENT":"([^"]*)".*$/1/g')
  28. 28. 「小江戸らぐ」と打って検索 curl --request "POST" --data ‘{“value”:[“小江戸らぐn"]}' "http://localhost:4444/wd/hub /session/"${SESSION_ID}" /element/"${ELEMENT_ID}"/value" #(注) URIは一行で記述
  29. 29. 「小江戸らぐ」と打って検索(Edgeの場合) • 日本語入力未対応→Javascriptで代用 – 「小江戸らぐ」と入力 curl --request "POST" --data ‘{“script”:“elements = document.getElementsByName("q"); elements[0].value="小江戸らぐ";", "args":[]}' “http://localhost:4444/wd /hub/session/”${SESSION_ID}"/execute/sync" #(注) URI、Javascriptは一行で記述
  30. 30. 「小江戸らぐ」と打って検索(Edgeの場合) • 日本語入力未対応→Javascriptで代用 – Submitする curl --request "POST" --data ‘{“script”:“elements = document.getElementsByName(”f“); elements[0].submit();”, “args”:[]}’ “http://localhost:4444/wd/hub /session/”${SESSION_ID}“/execute/sync“ #(注) URI、Javascriptは一行で記述
  31. 31. 検索結果表示待ち TITLE="" while [ "${TITLE}" != "小江戸らぐ - Google 検索" ] do RESPONSE=$(curl --request "GET" “http://localhost:4444/wd/hub /session/”${SESSION_ID}“/title”) #(注) URIは一行で記述 TITLE=$(echo ${RESPONSE} | sed -e 's/^.*"value":"([^"]*)".*$/1/g') done
  32. 32. 検索結果からリンクを探す RESPONSE=$(curl --request "POST" --data '{"using":"partial link text”, ”value”:“OSS支える!”}’ “http://localhost:4444/wd/hub /session/"${SESSION_ID}"/element") # (注) URIは一行で記述 # ELEMENT_IDに検索窓のIDを格納 ELEMENT_ID=$(echo ${RESPONSE} | sed -e 's/^.*"ELEMENT":"([^"]*)".*$/1/g')
  33. 33. リンクをクリック curl --request "POST" “http://localhost:4444/wd/hub /session/”${SESSION_ID}“ /element/”${ELEMENT_ID}“/click” # (注) URIは一行で記述
  34. 34. こんな 感じで 作ります
  35. 35. ここで デモ
  36. 36. 実習内容 次のテストを行なうスクリプトの作成 1. Webブラウザ起動 2. Googleで「小江戸らぐ」を検索 3. 次のページを表示 OSS支える!コミュニティー訪問~… 4. 写真をクリックして拡大表示 © 日経BP社http://itpro.nikkeibp.co.jp/article/COLUMN/20131003/508665/
  37. 37. bashでGoogle Chromeを操作
  38. 38. まとめ bashスクリプトでWebブラウザ(Selenium WebDriver)を操作可能 • Selenium Serverを起動する。 • curlコマンドでHTTPリクエストをSelenium Serverへ投げる。 • JSON形式の応答を加工して処理を続ける。
  39. 39. おしまい (^.^)/~~~

×