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

Selenium Grid on Azure and LambdaTest

kazweda
November 19, 2019

Selenium Grid on Azure and LambdaTest

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

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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 結果(試したこと)
    macOS
    NodeJS
    Azure
    Win10 + Selenium Grid
    selenium-webdriver
    LambdaTest
    Windows10

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. さてどうする?
    そもそもモバイルユーザーが
    半数以上

    というのは
    ひとまず置いといて...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. その1 - Azure

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. その2 - LambdaTest

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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';

    View full-size slide

  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();

    View full-size slide

  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();

    View full-size slide

  30. テスト自動化環境 - LambdaTest

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide