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.

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

2,484 views

Published on

オープンソースカンファレンス 2017 Nagoya の LT で発表予定の資料です。Microsoft Excel の VBA で Selenium WebDriver を動かしてみました。

Published in: Technology

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

  1. 1. Microsoft Excelで 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 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など
  7. 7. Selenium Client Firefox Driver Chrome Driver IE Driver 制御 応答 制御 応答 制御 応答 制御 応答 制御 応答 大まかな仕組み Microsoft Edge Driver 制御 応答
  8. 8. 実は PowerShell からも 動かせる
  9. 9. C#用 Selenium Library Firefox Driver Chrome Driver IE Driver 制御 応答 制御 応答 制御 応答 制御 応答 制御 応答 大まかな方法 Microsoft Edge Driver 制御 応答 https://www.slideshare.net/hirofumitouhei/powershellwebselenium-webdriver より https://github.com/hirokundayon/edobarai.git
  10. 10. ふと 思った
  11. 11. PowerShell からも 動かせるなら
  12. 12. Microsoft Excel からも 動かせるのでは?
  13. 13. C#用 Selenium Library Firefox Driver Chrome Driver IE Driver 制御 応答 制御 応答 制御 応答 制御 応答 制御 応答 大まかな方法 Microsoft Edge Driver 制御 応答 https://www.slideshare.net/hirofumitouhei/powershellwebselenium-webdriver より
  14. 14. 構想した手順 1. Selenium Client & WebDriver Language Bindings から C#用ファイルをとってくる。 2. 任意のフォルダにC#用ファイルを置く。 3. Microsoft Excel VBAで呼び出し部分を宣言 4. Microsoft Excel VBAスクリプトを書く。
  15. 15. 命名 PAIPAI
  16. 16. 魔法少女ちゅうかなぱいぱい 東映制作 1989年1月15日から同年7月9日までフジテレビ系列で放送 ©石森プロ、東映
  17. 17. だが挫折 orz
  18. 18. 挫折の理由 1. Selenium Client & WebDriver Language Bindings から C#用ファイルをとってくる。 2. 任意のフォルダにC#用ファイルを置く。 3. Microsoft Excel VBAで呼び出し部分を宣言 4. Microsoft Excel VBAスクリプトを書く。 赤字の部分がよくわからなかった。 情弱なので。
  19. 19. だが 思いだした
  20. 20. 以前、 こういうのを 行なった
  21. 21. curlをつかって http://www.suruga-ya.jp/product/detail/980001420000 より
  22. 22. Selenium Server bashでWebブラウザを動かした Chrome Driver HTTPリクエスト 応答 応答 応答(JSON) HTTPリクエスト 応答(JSON) https://www.slideshare.net/hirofumitouhei/bashwebselenium-webdriver より https://github.com/hirokundayon/Emily.git
  23. 23. Visual Basic でも出来る事 • HTTPリクエストを投げて応答を処理する ServerXMLHTTP https://msdn.microsoft.com/ja-jp/library/ms766431(v=vs.85).aspx • プログラムを実行 Shell関数:PIDも取得できる https://msdn.microsoft.com/ja-jp/library/xe736fyk(v=vs.90).aspx • PIDを指定してプログラムを停止 (後述)
  24. 24. という事は
  25. 25. 次の手順で処理可能 1. Selenium Standalone Server を起動 2. Webブラウザを自動実行 i. Selenium Standalone Server に HTTPリクエストを投げる。 ii. 応答を受けて処理する。 3. Selenium Standalone Server を停止
  26. 26. 命名 IPANEMA
  27. 27. 魔法少女ちゅうかないぱねま 東映制作 1989年7月23日から同年12月24日までフジテレビ系列で放送 ©石森プロ、東映 ぱいぱいよりも 技能が未熟
  28. 28. 魔法の呪文 リンパラ、 イパネマ、 シャオシャオパイ
  29. 29. Selenium Server の起動 Dim pid As Integer pid = Shell( "java -Dwebdriver.chrome.driver=/path/to/chromedriver -jar selenium-server-standalone-X.X.X.jar") • 赤字部分は一行で書く。 • /path/to/chromedriver は適宜指定。 – 他のWebブラウザ用ドライバーも適宜指定 • pid(プロセスID)は後で停止する時に使用。 • jarファイル、chromedriver などの置き場所 http://www.seleniumhq.org/download/
  30. 30. HTTP リクエストを処理する ServerXMLHTTPを使用 https://msdn.microsoft.com/ja-jp/library/ms766431(v=vs.85).aspx Function useAPI(_ ByVal url As Variant, _ ByVal method As String, _ ByVal json As String) As String Dim objHTTP As Object Set objHTTP = CreateObject("MSXML2.ServerXMLHTTP") objHTTP.Open method, url, False objHTTP.setRequestHeader "Content-type", "application/json" objHTTP.send json useAPI = objHTTP.responseText Set objHTTP = Nothing End Function
  31. 31. 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 より
  32. 32. Webブラウザ(Google Chrome)起動 • メソッド POST • JSON {"desiredCapabilities": {"browserName":“chrome”}, "requiredCapabilities":{}} • URL http://localhost:4444/wd/hub/session
  33. 33. Webブラウザ(Internet Explorer)起動 • メソッド POST • JSON {“desiredCapabilities”: {"browserName":“internet explorer”}, "requiredCapabilities":{}} • URL http://localhost:4444/wd/hub/session
  34. 34. Webブラウザ(Mozilla Firefox)起動 • メソッド POST • JSON {"desiredCapabilities": {"browserName":"firefox”}, "requiredCapabilities":{}} • URL http://localhost:4444/wd/hub/session
  35. 35. Webブラウザ(Microsoft Edge)起動 • メソッド POST • JSON {"desiredCapabilities": {"browserName":“MicrosoftEdge”}, "requiredCapabilities":{}} • URL http://localhost:4444/wd/hub/session
  36. 36. Webブラウザ(Google Chrome on Android)起動 • メソッド POST • JSON {"desiredCapabilities": {"browserName":"chrome“, “chromeOptions": {"androidPackage": "com.android.chrome"}}, "requiredCapabilities":{}} • URL http://localhost:4444/wd/hub/session
  37. 37. Selenium WebDriverのAPIの応答例 { "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 }
  38. 38. Googleのページへ飛ぶ • メソッド POST • JSON {"url": ”http://www.google.co.jp”} • URL “http://localhost:4444/wd/hub/session/“ _ & SESSION_ID & "/url”
  39. 39. Googleの検索窓を探す • メソッド POST • JSON {“using”:”‘name’”,”value”:“q”} • URL http://localhost:4444/wd/hub/session/ _ & SESSION_ID & "/element”
  40. 40. 応答例 { "state": "success", “sessionId”: "da990f64-671f-4b4e-b4f9-af3363fb54e8", "hCode": 1209818291, "value": { "ELEMENT": "0" }, "class": "org.openqa.selenium.remote.Response", "status": 0 } 部品が見つかった場合は success 部品のID
  41. 41. 検索 • メソッド POST • JSON {“value”:[“OSC 名古屋 2012 レポートn"]} • URL http://localhost:4444/wd/hub/session/ _ & SESSION_ID & _ “/element/” & ELEMENT_ID & “/value”
  42. 42. 検索結果からリンクを探す • メソッド POST • JSON {"using":"partial link text”, ”value”:“OSS支える!”} • URL ”http://localhost:4444/wd/hub/session/” _ & SESSION_ID & ”/element”
  43. 43. リンクをクリック • メソッド POST • JSON なし • URL ”http://localhost:4444/wd/hub/session/” _ & SESSION_ID & ”/element/” _ & ELEMENT_ID & “/click”
  44. 44. Selenium Server の停止 Dim strComputer As String Dim objWMIService Dim colProcessList Dim objProcess strComputer = "." Set objWMIService = _ getObject(“winmgmts:” & strComputer & “rootcimv2”) Set colProcessList = objWMIService.ExecQuery _ ("Select * from Win32_Process Where ProcessID = " _ & CStr(pid)) For Each objProcess In colProcessList objProcess.Terminate Next
  45. 45. こんな 感じで 作ります
  46. 46. 必要なもの • Microsoft Office Microsoft Excel 2013(32bit版) で動作検証 • Java Runtime Environment Java Runtime Environment 1.8.0 u131 で動作 検証 • Selenium Standalone Server Selenium Standalone Server V3.4.0 で動作検 証
  47. 47. ここで 実演
  48. 48. 実演内容 次の処理を自動実行 1. Webブラウザ起動 2. Googleで「OSC 名古屋 2012 レポート」を検索 3. OSC2012 Nagoya のレポートを表示させる https://www.ospn.jp/press/20120601osc2012-nagoya-report.html 4. メモリーカードエラー写真をクリック 5. さらにクリックして拡大表示
  49. 49. Excel でGoogle Chromeを操作
  50. 50. まとめ Microsoft Excelで Webブラウザ(Selenium WebDriver)を操作可能 • Selenium Serverを起動する。 • ServerXMLHTTPでHTTPリクエストをSelenium Serverへ投げる。 • JSON形式の応答を加工して処理を続ける。
  51. 51. おしまい (^.^)/~~~

×