NHN Cloud NHN Cloud Meetup!

   

Front-Endテスト環境（2） – マルチブラウザテスト環境を構築する

2017.10.30

1,688

マルチブラウザテスト環境を構築する

ローカルテスト環境の限界

前回、単一PCにテスト環境を構築してテストを実行する過程を説明しました。
ローカルPC内でブラウザの自動テストを実行する場合、karma-chrome-launcherが、現在のkarmaの実行環境にインストールされたChromeブラウザを実行します。ローカルPC内で他のブラウザを同時にテストしたい場合、Firefox、Safari、Internet ExplorerやEdgeのkarma launcherを追加登録すれば、テストを実行できます。しかしこのような場合、OSXではInternet Explorerのテストが、WindowsではSafariのテストができません。

そこで今回は、ローカルPC上でテストを実行するのではなく、さまざまなOS・ブラウザ環境において、ブラウザの自動テストを行う方法を調べます。

マルチブラウザテスト環境

この記事では、サンプルのテスト環境であるInternet Explorer 9〜11、Microsoft Edge、Chrome、Firefox、Safariを含むブラウザの自動テスト環境を説明します。
まず、テスト環境の構築に使うkarma-webdriver-launcher、Selenium-WebDriverとSelenium Standalone Serverを簡単に紹介します。

karma-webdriver-launcher

karmaがWebDriverを通じて各ブラウザに自動テストを実行できるようにするモジュールです。
以降で説明するSelenium Standalone Server（Hub）（以下Hub）にテストを実行するように情報を伝達します。

ここでは、開発者のPCにHubを置くのではなく、別PCに分離して管理していると仮定します。
既存のkarma-webdriver-launcherは、Hubのローカルにあるkarmaと接続のみサポートし、forkして展開したgithub.com/nhnent/karma-webdriver-launcherを使用します。

Selenium-WebDriver

W3C WebDriver標準に準拠したブラウザの遠隔テストを行うため、ブラウザを起動するbinaryです。
Internet Explorer用のWebDriverはseleniumで開発・提供し、Firefox、Chrome、Safariなどはベンダーが実装したWebDriver binaryや、リモートテストの方法を提供します。
ダウンロードリンク

Selenium Standalone Server

Javaで実装されたブラウザの自動テスト用サーバーです。
このサーバーにHub、Nodeいずれかの役割を付与して使用できます。
たとえば、ブラウザの自動テストを実行するPCにはNodeの役割を、各Nodeにテストを実行するコマンドを出すPCにはHubとしての役割を与えます。

リモートブラウザ自動テストの実行手順

テストは、次のような手順で行われます。

  1. 開発者のローカルPCでkarmaコマンドを使ってブラウザの自動テストを実行する
  2. karma-webdriver-launcherがSelenium Standalone Server（Hub）（以下Hub）で自動テストを開始する
  3. Hubはテスト要求のブラウザ要件にマッチするSelenium Standalone Server（Node）（以下Node）を探して、各Nodeにテストを実行する
  4. テストが実行されるNodeはWebDriverを使ってブラウザを起動し、テストが開始された開発者のkarmaサーバーに接続してテストを実行した後、終了する
  5. テスト結果を報告する

マルチブラウザテスト環境の構築

これから本格的にテスト環境の構築を行います。

1. Hub準備

Selenium Standalone Serverをダウンロードして、目的のパスに位置させます。ダウンロードリンク
ServerのHubとNodeの役割を付与するには、Javaコマンドで実行時-roleオプションに各役割の名前を渡します。

ex）サーバーの役割をHubに設定する

java -jar selenium-server-standalone-3.6.0.jar -role hub -hubConfig hubConfig.json
  • hubConfig.json
{
  "port": 4444,
  "newSessionWaitTimeout": -1,
  "servlets" : [],
  "withoutServlets": [],
  "custom": {},
  "capabilityMatcher": "org.openqa.grid.internal.utils.DefaultCapabilityMatcher",
  "throwOnCapabilityNotPresent": true,
  "cleanUpCycle": 36000,
  "debug": false,
  "browserTimeout": 0,
  "timeout": 1800
}

Hubサーバーが実行されるポートを変更するなどの設定は、コマンドラインオプション、またはJSONファイルで定義します。参考

上記の設定を使用すると、4444ポートを使用してHubを実行します。

2.テストを実行するPCにブラウザをインストール

テスト環境に必要なPCのOSは、Internet Explorer、Edge用としてWindows、Safari用としてOSXが必要です。
FirefoxとChromeは、両方のOSに対応しており、便宜上Windowsにインストールして進行します。

Internet Explorerの各バージョンとEdgeを実行するには、Windows機器が複数台必要です。（仮想マシンを使用する場合は、物理デバイスの数は1台かもしれません。）
各機器には、Chrome、Firefoxも設置できるように組み合わせて、SafariをテストするOSXも用意します。
Internet Explorer 8は、karmaサポートブラウザから除外され、テストするにはポリフィルが必要なため、この記事では除外します。

このように用意したPC環境は以下のとおりです。

OS 保有ブラウザ
Windows 7 Internet Explorer 9、Firefox、
Windows 7 Internet Explorer 10、Chrome
Windows 10 Internet Explorer 11、Edge
OSX Sierra Safari 10

3.テストを実行させるNode

各PC上で駆動されるブラウザのWebDriverを設置します。WebDriverのインストールは実行するNodeと同じパスにバイナリを位置させます。Safariの場合、Safariの自動テストを参照してください。

Hubとは異なり、-role nodeオプションと-nodeConfig nodeConfig.jsonオプションで役割やその他オプションを設定します。
各OSやブラウザを搭載したPCで実際に使用する設定ファイルは以下のとおりです。

（実際のHubのアドレスは別途ipv4アドレスを使用します。設定ファイルのサンプル用として、任意ドメインmulti.test.comで説明します。）

  • nodeConfig.json（Windows 7 | Internet Explorer 9、Firefox）
{
  "capabilities": [
       {
            "browserName": "firefox",
            "platform": "WINDOWS",
            "maxInstances": 5,
            "seleniumProtocol": "WebDriver"
        },
        {
            "browserName": "internet explorer",
            "version": "9",
            "platform": "WINDOWS",
            "maxInstances": 5,
            "seleniumProtocol": "WebDriver"
        }
  ],
  "port": 5555,
  "maxSession": 5,
  "register": true,
  "registerCycle": 5000,
  "hub": "http://multi.test.com:4444",
  "hubPort": 4444,
  "hubHost": "multi.test.com"
}
  • nodeConfig.json（Windows 7 | Internet Explorer 10、Chrome）
{
  "capabilities": [
    {
      "browserName": "chrome",
      "platform": "WINDOWS",
      "maxInstances": 5,
      "seleniumProtocol": "WebDriver"
    },
    {
      "browserName": "internet explorer",
      "version": "10",
      "platform": "WINDOWS",
      "maxInstances": 5,
      "seleniumProtocol": "WebDriver"
    }
  ],
  "port": 5555,
  "maxSession": 5,
  "register": true,
  "registerCycle": 5000,
  "hub": "http://fe.test.com:4444",
  "hubPort": 4444,
  "hubHost": "fe.test.com"
}
  • nodeConfig.json（Windows 10 | Internet Explorer 11、Edge）
{
  "capabilities": [
    {
      "browserName": "internet explorer",
      "platform": "WINDOWS",
      "version": "11",
      "maxInstances": 5,
      "seleniumProtocol": "WebDriver"
    },
    {
      "browserName": "MicrosoftEdge",
      "maxInstances": 5,
      "platform": "WINDOWS",
      "seleniumProtocol": "WebDriver"
    }
    ],
  "port": 5555,
  "maxSession": 5,
  "register": true,
  "registerCycle": 5000,
  "hub": "http://multi.test.com:4444",
  "hubPort": 4444,
  "hubHost": "multi.test.com"
}
  • nodeConfig.json（OSX Sierra | Safari 10）
{
  "capabilities": [
    {
      "browserName": "safari",
      "maxInstances": 10
    }
  ],
  "port": 5555,
  "maxSession": 10,
  "hub": "http://multi.test.com:4444",
  "register": true,
  "registerCycle": 5000,
  "hubPort": 4444,
  "hubHost": "multi.test.com",
  "Dwebdriver.safari.driver=/usr/bin/safaridriver": ""
}

上記の設定ファイルを見ると、capabilitiesの配列は、Nodeに使用可能なブラウザをHubに登録するのに使われます。
設定ファイルが準備できたら、それぞれのPCでSelenium Standalone Serverを実行します。
SafariブラウザはHubと同じPCから5555ポートで実行します。

java -jar selenium-server-standalone-3.6.0.jar -role node -nodeConfig nodeConfig.json

karma.config.json設定

既存の設定ファイルをコピーして数箇所だけ読めば、リモートブラウザのテスト用karmaの設定ファイルを作成できます。

  • karma.config.multi.js
// Karma configuration
// Generated on  ~~~

// WebDriver 設定
var webdriverConfig = {
  hostname: 'multi.test.com',
  port: 4444,
  remoteHost: true
};

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'js/*.js'
    ],
    exclude: [],
    preprocessors: { },
    reporters: ['spec'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,

    // 変更された部分 - 開始
    customLaunchers: {
        'IE9': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'internet explorer',
            version: '9'
        },
        'IE10': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'internet explorer',
            version: '10'
        },
        'IE11': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'internet explorer',
            version: '11'
        },
        'Edge': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'MicrosoftEdge'
        },
        'Chrome-WebDriver': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'chrome'
        },
        'Firefox-WebDriver': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'firefox'
        },
        'Safari-WebDriver': {
            base: 'WebDriver',
            config: webdriverConfig,
            browserName: 'safari'
        }
    },
    browsers: [
        'IE9', 
        'IE10',
        'IE11',
        'Edge',
        'Chrome-WebDriver',
        'Firefox-WebDriver',
        'Safari-WebDriver'
    ],
    plugins: ['karma-jasmine','karma-webdriver-launcher', 'karma-spec-reporter'],
    specReporter: {
      suppressPassed: true,
      suppressSkipped: true
    },
    // 変更された部分  - 終り


    singleRun: true,
    concurrency: Infinity
  });
}

変更された設定ファイルを確認すると、autoWatchが削除され、customLaunchers, browsers, pluginsが追加されました。
customLaunchersはユーザーが定義するlauncherです。先に設定したInternet Explorer 9〜11、Edge、Chrome、Firefox、Safariを定義します。
browsersはkarma startコマンド実行時、テストを行うブラウザを列挙する配列です。customLaunchersでテストを行うブラウザのキー値が記されています。
plugins配列には、上記のkarma-webdriver-launcherと’karma-jasmine‘, ‘karma-spec-reporter‘が記されています。
このディペンデンシーは、package.jsonファイルに下記のように追加した後、npm installコマンドを実行してインストールします。

  • package.json
{
  "name": "test",
  "repository": "http://github.com",
  "scripts": {
    "test": "karma start",
    "test:multi": "karma start karma.config.multi.js"
  },
  "devDependencies": {
    "jasmine-core": "^2.8.0",
    "karma": "^1.7.0",
    "karma-jasmine": "^1.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-spec-reporter": "^0.0.31",
    "karma-webdriver-launcher": "git+https://github.com/nhnent/karma-webdriver-launcher.git#v1.1.0"
  }
}

npm scriptもtest:multiが追加されましたが、karma startコマンドの後ろに新しく作成されたconfigファイルを書き込みました。

テスト実行

npm scriptから、マルチブラウザテストを実行してみよう。

npm run test:multi


テストを行ったブラウザで、正常に実行されたことを確認できます。

まとめ

Seleniumを利用した複数ブラウザの自動テスト環境を構築する一例を紹介しました。
ブラウザの自動テストを行う別途手段として、BrowserStack、Sauce Labsなどのサービスを利用する方法もあります。

簡単なソースコードとテストを、ローカルPCではなく、さまざまな環境で実行できるようになりました。
前述の基本的な内容をもとに、新しいreporterを追加したり、Webpackと組み合わせて使用するなど、開発に必要ないくつかのモジュールを追加して、テストと生産性の向上につながればうれしいです。

参考

NHN Cloud Meetup 編集部

NHN Cloudの技術ナレッジやお得なイベント情報を発信していきます
pagetop