Selenium Grid on Azure and LambdaTest

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

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. その１ - 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. その２ - 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 • ...