Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Selenium Grid on Azure and LambdaTest

D0c8f1784de9fa285c01302fc25ce508?s=47 kazweda
November 19, 2019

Selenium Grid on Azure and LambdaTest

macOSからNode.js+webdriverでAzure上に立てたSelenium Grid(hub + node)を使ってブラウザテストの自動化を試してみました。あわせてLambdaTestというサービスも利用してみました。それと、各種ブラウザを動かすためのwebdriverの組み込みにいろいろ手間取ったので、参考になりそうなサイトをまとめました。

D0c8f1784de9fa285c01302fc25ce508?s=128

kazweda

November 19, 2019
Tweet

More Decks by kazweda

Other Decks in Programming

Transcript

  1. Selenium Grid on Azure and LambdaTest @kazweda netplan matsuyama ltd.

  2. 自己紹介 @kazweda(Kazuaki Ueda) 仕事 WordPress(PHP Plugin), Python, ... 趣味 ロードバイク,

    音楽, ...
  3. ちなみに 今日(11/19) California から 電話がありました。

  4. はじめに 内容に間違った言葉遣いや 説明があるかも知れません ので、気がついたらその都 度教えてください。

  5. 結果(Node.jsで試したこと) • Local環境で Node.js + webdriver Chrome, Firefox, Safari •

    Azure上のVM(Win10)でSelenium Grid Chrome, Firefox, Edge_HTML, Internet Explorer • LambdaTestアカウント登録 Chrome
  6. 結果(試したこと) macOS NodeJS Azure Win10 + Selenium Grid selenium-webdriver LambdaTest

    Windows10
  7. Mission statement: ブラウザテストの自動化

  8. 要件:これらのブラウザに対応すること Chrome Edge Firefox IE Safari ... ※アルファベット順

  9. ブラウザ利用状況(文教系、独自調査) made with Google Data Studio

  10. ブラウザ利用状況(学術系、独自調査) made with Google Data Studio

  11. OS利用状況(文教系、独自調査) made with Google Data Studio

  12. OS利用状況(学術系、独自調査) made with Google Data Studio

  13. さてどうする? そもそもモバイルユーザーが 半数以上 というのは ひとまず置いといて...

  14. 目的 普段 macOS を使っているので Edge とか IE を何とかしたい。 ※Edge(Chromium)もあるらしい

  15. テスト自動化環境をセットアップする developer.mozilla.orgサイト内の記事 “Setting up your own test automation environment” https://mzl.la/2QdzmW5

    ※日本語にはLambdaTestがなかったので英語ページ
  16. テスト自動化環境をセットアップする ローカル環境 • Selenium ローカル仮想環境 • Docker+Selenium リモート環境 • Selenium

    Grid(Azure) • LambdaTest • BrowserStack • SauceLabs このあたりを紹介
  17. その1 - Azure

  18. Selenium Grid on Azure AzureでVMを立てる - Windows 10 Pro 必要なものをインストール

    - JRE, Selenium Server, ... ネットワークの設定 - Port:4444 を受信可能に
  19. Selenium Grid on Azure - デモ ここで デモをやる予定 RDP接続がNGの場合は LambdaTest

    または local で。
  20. その2 - LambdaTest

  21. テスト自動化環境 - LambdaTest Cross Browser Testing Cloud Perform Automated and

    Live Interactive Cross Browser Testing on 2000+ Real Browsers and Operating Systems Online
  22. テスト自動化環境 - LambdaTest 2000+ Real Browsers!!!

  23. テスト自動化環境 - LambdaTest 対応OS

  24. テスト自動化環境 - LambdaTest 対応ブラウザ

  25. テスト自動化環境 - LambdaTest 対応ブラウザ

  26. テスト自動化環境 - LambdaTest LambdaTestでアカウント作成 - 無料プラン、有料プラン 手元のnodejs環境でサンプルコードを編集 - アカウント名、トークン nodeのサンプルコードを実行

    - % node lambdatest_google_test.js
  27. テスト自動化環境 - LambdaTest( code 1/3 ) // 基本設定 const webdriver

    = require('selenium-webdriver'); By = webdriver.By, until = webdriver.until; const USERNAME = '{username}'; const KEY = '{accessKey}'; const GRID_HOST = 'hub.lambdatest.com/wd/hub';
  28. テスト自動化環境 - LambdaTest( code 2/3 ) // テスト環境の設定 const capabilities

    = { platform: 'windows 10', browserName: 'chrome', version: '67.0', resolution: '1280x800', network: true, visual: true, console: true, video: true, name: 'Test 1', build: 'NodeJS build' }; // 接続先の設定 const gridUrl = 'https://' + USERNAME + ':' + KEY + '@' + GRID_HOST; // driverの設定 const driver = new webdriver .Builder() .usingServer(gridUrl) .withCapabilities(capabilities) .build();
  29. テスト自動化環境 - LambdaTest( code 3/3 ) // 実行部分 driver.get('https://www.google.com/ncr').then(function() {

    driver.findElement(webdriver.By.name('q')) .sendKeys('LambdaTest\n').then(function() { driver.getTitle().then(function(title) { setTimeout(function() { console.log(title); driver.quit(); }, 5000); }); }); }); } searchTextOnGoogle();
  30. テスト自動化環境 - LambdaTest

  31. WebDriverインストール時の 注意事項 • Firefox • Edge • Internet Explorer

  32. geckodriverを導入してfirefoxのリモートテスト https://github.com/mozilla/geckodriver/releases/tag/v0.26.0 Known problems ??? Windows: You must still have

    the Microsoft Visual Studio redistributable runtime installed on your system for the binary to run. This is a known bug which we weren't able fix for this release. x64: vc_redist.x64.exe をダウンロードしてVM(Windows 10)にインストール。
  33. 参考資料 - Microsoft WebDriver Install Microsoft WebDriver https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ Microsoft Edge

    (EdgeHTML) Microsoft WebDriver for Microsoft Edge version 18 is a Windows Feature on Demand. To install run the following in an elevated command prompt: DISM.exe /Online /Add-Capability /CapabilityName:Microsoft.WebDriver~~~~0.0.1.0
  34. リモートからEdgeを動かす場合の注意点 (主に自分用メモ) AzureのVMにRDPで接続 Administrator権限だとエラー 一般ユーザーを追加 RDP接続を許可

  35. 参考資料 - Selenium with Internet Explorer SeleniumのDownloadページから IEDriverServer(32)をダウンロードして 展開。ドライバーにPATHを通す。 ※64bit版だと遅い

    IE を起動して Internet Options -> Security を開く。 全てのゾーンの Protected Mode を外す。
  36. まとめ

  37. ブラウザテストの自動化 - まとめ(妄想) • SaaS(LambdaTestとか...)を活用 ◦ 環境構築のコストダウン • ブラウザや機種に依存しそうなコードを避ける ◦

    そのスクリプト本当に必要ですか? • Edge(Chromium)が普及すれば心配が減るかも ◦ OSの違いはブラウザで吸収されるべき • Edge(Chromium)でテストできるなら ◦ Azure(Win10)はなくても良かった?
  38. 参考資料, ToDo • NodeJSサンプル • WebDriver on macOS • Edge(Chromium)

    support • Free VM - Microsoft • IE Test on Mac • モバイル実機+自動テスト • Browser Engines
  39. 参考資料 - WebDriverやNodeJSサンプルなど Selenium - Web Browser Automation https://www.seleniumhq.org/ selenium-webdriver

    - npm https://www.npmjs.com/package/selenium-webdriver Quick Guide To Run Node.js Test - LambdaTest https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/ Selenium testing with NodeJS - BrowserStack https://www.browserstack.com/automate/node Microsoft WebDriver https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
  40. 参考資料 - Mozilla gecko driver for macOS https://firefox-source-docs.mozilla.org/testing/geckodriver/Notarization.html macOS notarization

    To bypass the notarization requirement on macOS if you have downloaded the geckodriver .tar.gz via a web browser, you can run the following command in a terminal: % xattr -r -d com.apple.quarantine geckodriver
  41. 参考資料 - Edge(Chromium) support Add new WebDriver support for Edge

    - JAVA https://github.com/SeleniumHQ/selenium/pull/7164 このスレッドの終わりの方に、 > What about JavaScript client for Selenium/Edge Chromium? Javascript is not our top priority for now, but there will definitely be more languages support in the future.
  42. 参考資料 - Free virtual machines - Microsoft Free virtual machines

    from IE8 to MS Edge - Microsoft Edge Development https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ • IE8 on Win7 • IE9 on Win7 • IE10 on Win7 • IE11 on Win81 • MSEdge on Win10 Windows Virtual Machine with Vagrant https://fishilico.github.io/generic-config/windows/vagrant.html
  43. 参考資料 - IE test on Mac Device 7 Ways to

    Test Your Website on Internet Explorer on a Mac Device https://dzone.com/articles/7-ways-you-can-test-your-website-on-internet-explo • Remote IE • Testing tools • Virtual Box • Hidden Safari Menu • WineBottler for Mac • VMWare • Boot Camp
  44. 参考資料 - モバイル実機+自動テスト モバイル実機 × ブラウザ × 自動テストの構成紹介 https://qiita.com/zprodev/items/3067a1e077d448827475 •

    Android • iOS • Node.js • Mocha • Appium • WebdriverIO
  45. 参考資料 - Comparison of browser engines Wikipedia https://en.wikipedia.org/wiki/Comparison_of_browser_engines • WebKit

    (Safari) • Blink (Chrome, Edge_Chromium, Opera) • Gecko (Firefox, Thunderbird) • Edge_HTML • ...