Selenium Grid on Azure and LambdaTest

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

結果（Node.jsで試したこと） ● Local環境で Node.js + webdriver Chrome, Firefox, Safari ● Azure上のVM(Win10)でSelenium Grid Chrome, Firefox, Edge_HTML, Internet Explorer ● LambdaTestアカウント登録 Chrome

Slide 6

Slide 6 text

結果（試したこと） macOS NodeJS Azure Win10 + Selenium Grid selenium-webdriver LambdaTest Windows10

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ブラウザ利用状況（文教系、独自調査） made with Google Data Studio

Slide 10

Slide 10 text

ブラウザ利用状況（学術系、独自調査） made with Google Data Studio

Slide 11

Slide 11 text

OS利用状況（文教系、独自調査） made with Google Data Studio

Slide 12

Slide 12 text

OS利用状況（学術系、独自調査） made with Google Data Studio

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

テスト自動化環境をセットアップする developer.mozilla.orgサイト内の記事 “Setting up your own test automation environment” https://mzl.la/2QdzmW5 ※日本語にはLambdaTestがなかったので英語ページ

Slide 16

Slide 16 text

テスト自動化環境をセットアップするローカル環境 ● Selenium ローカル仮想環境 ● Docker+Selenium リモート環境 ● Selenium Grid(Azure) ● LambdaTest ● BrowserStack ● SauceLabs このあたりを紹介

Slide 17

Slide 17 text

その１ - Azure

Slide 18

Slide 18 text

Selenium Grid on Azure AzureでVMを立てる - Windows 10 Pro 必要なものをインストール - JRE, Selenium Server, ... ネットワークの設定 - Port:4444 を受信可能に

Slide 19

Slide 19 text

Selenium Grid on Azure - デモここでデモをやる予定 RDP接続がNGの場合は LambdaTest または local で。

Slide 20

Slide 20 text

その２ - LambdaTest

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

テスト自動化環境 - LambdaTest 2000+ Real Browsers!!!

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

テスト自動化環境 - 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';

Slide 28

Slide 28 text

テスト自動化環境 - 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();

Slide 29

Slide 29 text

テスト自動化環境 - 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();

Slide 30

Slide 30 text

テスト自動化環境 - LambdaTest

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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)にインストール。

Slide 33

Slide 33 text

参考資料 - 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

Slide 34

Slide 34 text

リモートからEdgeを動かす場合の注意点（主に自分用メモ） AzureのVMにRDPで接続 Administrator権限だとエラー一般ユーザーを追加 RDP接続を許可

Slide 35

Slide 35 text

参考資料 - Selenium with Internet Explorer SeleniumのDownloadページから IEDriverServer(32)をダウンロードして展開。ドライバーにPATHを通す。 ※64bit版だと遅い IE を起動して Internet Options -> Security を開く。全てのゾーンの Protected Mode を外す。

Slide 36

Slide 36 text

まとめ

Slide 37

Slide 37 text

ブラウザテストの自動化 - まとめ（妄想） ● SaaS(LambdaTestとか...)を活用 ○ 環境構築のコストダウン ● ブラウザや機種に依存しそうなコードを避ける ○ そのスクリプト本当に必要ですか？ ● Edge(Chromium)が普及すれば心配が減るかも ○ OSの違いはブラウザで吸収されるべき ● Edge(Chromium)でテストできるなら ○ Azure(Win10)はなくても良かった？

Slide 38

Slide 38 text

参考資料, ToDo ● NodeJSサンプル ● WebDriver on macOS ● Edge(Chromium) support ● Free VM - Microsoft ● IE Test on Mac ● モバイル実機+自動テスト ● Browser Engines

Slide 39

Slide 39 text

参考資料 - 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/

Slide 40

Slide 40 text

参考資料 - 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

Slide 41

Slide 41 text

参考資料 - 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.

Slide 42

Slide 42 text

参考資料 - 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

Slide 43

Slide 43 text

参考資料 - 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

Slide 44

Slide 44 text

参考資料 - モバイル実機+自動テストモバイル実機 × ブラウザ × 自動テストの構成紹介 https://qiita.com/zprodev/items/3067a1e077d448827475 ● Android ● iOS ● Node.js ● Mocha ● Appium ● WebdriverIO

Slide 45

Slide 45 text

参考資料 - 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 ● ...