この記事は、Mercari Bold Challenge Month の 2日目の記事です。
メルカリで QA Automation Engineer をしている 根本 征 です。
私は現在、メルカリWeb版のUIテスト自動化に取り組んでいます。
今回は、Microsoft Edge ブラウザでの UIテスト自動化 (Selenium WebDriver) とその環境構築についてお話します。
- Windows10 / Microsoft Edge で Selenium WebDriver のテストを動かす
- Windows 10 / Microsoft Edge のテスト環境への課題
- Azure DevTest Labs 上でテスト環境を構築する
- コストと他サービスとの比較
- おわりに
マルチブラウザ時代のUIテスト戦略
以前の記事では、Azure Kubernetes Service / Selenium Grid を活用した、UIテスト自動化の環境構築について書きました。
UIテストの場合、他のレイヤーのテストと比較すると環境構築が複雑であったり、実行時間がかかりやすいなどの課題が出てきがちです。
私たちは、適切なサイズのUIテストを Azure Kubernetes Service / Selenium Grid で実行させることで、上記の課題を解決することができました。
しかし、上記の環境では docker-selenium という Docker イメージを利用しているため、Chrome もしくは Firefox のブラウザでしか動作させることができません。
下記のWebブラウザシェアからも分かる通り、現在 Chrome 以外にも Safari / Microsoft Edge のブラウザを使っている方も多くいます。
株式会社 ウェブレッジ より
そのため、それらのブラウザでメルカリWeb版を利用するお客様にも快適に使っていただくためには、リリース前にそれらのブラウザで手動テストもしくは自動化されたテストで確認する必要があります。
私たちはこれまで WebdriverIO という、内部で WebDriver を使ったフレームワークでUIテストを実装・実行してきました。
Safari / Microsoft Edge は WebDriver に対応しているため、これまでの資産を活用しながらそれらのブラウザで実行させることが可能です。
Microsoft EdgeはW3C WebDriver推奨をサポート
WebDriver Support in Safari 10 | WebKit
しかし、全てのブラウザで、全てのテストを、すべてのタイミングで実行するのには限界があります。
理由としてまず Safari / Microsoft Edge が動作できるOS・環境に制限があるためです。
- デスクトップ版 Safari は macOS のみで動作し、その macOS は Appleのソフトウェアライセンス によって macのハードウェア上でのみ動作させることができます。
-
デスクトップ版 Microsoft Edge(現在提供されているEdgeHTML版) は Windows 10 でのみ動作し、ソフトウェアライセンスの契約・購入が必要になります。
上記のような制限があるため、 Chrome / Firefox ブラウザと比較すると Safari / Microsoft Edge のテスト環境を構築・運用するのは難しいです。
そのため、下記のピラミッド図のように各ブラウザによって実行頻度や実行するテストケースを決めていく必要があると考えています。
次からは Windows10 / Microsoft Edge での Selenium WebDriver のテスト実行とその環境構築についてお話します。
Windows10 / Microsoft Edge で Selenium WebDriver のテストを動かす
Microsoft Edge で Selenium WebDriver を動かすには、Microsoft WebDriver が必要になります。
下記のページから Microsoft WebDriver をダウンロードすることができます。
https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
EdgeHTML版のバージョン18以上とバージョン18未満、プレビュー版であるChromium版で Microsoft WebDriver のインストール方法がそれぞれ異なるので注意してください。
次に Selenium WebDriver をインストールします。
Windows のパッケージマネージャーである Chocolatey 経由でインストールすることもできるのでおすすめです。
GitHub – dhoer/choco-selenium: Installs and configures selenium standalone, hub, or node server
Selenium Grid の Node として Hub に登録する際は下記コマンドを実行します。
# Add capability for Microsoft Edge
$capabilitiesJson = "C:toolsseleniumedgeonlycapabilities.json"
@'
[
{
"browserName": "MicrosoftEdge",
"platform": "WINDOWS"
}
]
'@ | New-Item $capabilitiesJson -Type file -Force
choco install -y openjdk
choco install -y selenium --params "'/role:node /hub:localhost:4444 /javaoptions:-Dwebdriver.edge.driver=C:WindowsSystem32MicrosoftWebDriver.exe /capabilitiesJson:$capabilitiesJson /autostart'"
最後に下記のような Capability を指定してテストを実行させます。
// wdio.conf.ts Config file for WebdriverIO const config: WebdriverIO.Config = { capabilities: [ { browserName: "MicrosoftEdge", platformName: "WINDOWS", "ms:inPrivate": true }; ] }
"ms:inPrivate" Capability を使うことによって、InPrivate ウィンドウを開いてテストを実行させることができます。
InPrivate ウィンドウの場合、ブラウザを閉じた際に閲覧データ(Cookie、履歴、一時ファイル)が消去されるため、テスト間での依存関係(ログイン状態など)をなるべく無くすためにもこの Capability は true にするのをお勧めします。
Windows 10 / Microsoft Edge のテスト環境への課題
上記の手順によって Windows 10 / Microsoft Edge で Selenium WebDriver のテストを動かす環境を作ることができました。
私たちは、まず社内にある Windows PC を使って上記の環境を構築・テストを実行させていました。
とっかかりとしては良かったのですが、いくつか課題が出てきました。
1つは実行時間です。
1台の Windows PC を使い 1並列で実行させると 120程度のテストケースで約2時間かかりました。
もちろん先ほどの戦略の通り、Chrome などのブラウザと比較すると頻度も少ないため実行時間に関してある程度許容はできますが、それでも30分程度で実行できるようになるのが理想です。
また並列実行数を増やすに当たって、複数の物理マシンを運用していくのも今後課題になっていくと感じました。
上記の課題を解決するためにクラウド上で構築できないかと考え、今回 Azure DevTest Labs を試してみることにしました。
Azure DevTest Labs 上でテスト環境を構築する
Azure DevTest Labs は、開発 / テスト環境として仮想マシンをプロビジョニング・管理することができるサービスです。
DevTest Labs | Microsoft Azure
プロジェクト(ラボ) を作成し、MarketPlaceにあるイメージ(今回だと Windows 10 Pro, Version 1903)を選択してVMを立ち上げることができます。
複数の同じ環境のVMを作成する場合(今回だと Selenium Grid の Node)、カスタムイメージや数式を活用することでプロビジョニングのコストを削減することができます。
VM から Azure DevTest Labs カスタム イメージを作成する | Microsoft Docs
VM を作成するための Azure DevTest Labs 数式の管理 | Microsoft Docs
また、Azure DevTest Labs にはラボ内のVMで同じ パブリック IP アドレスを共有する機能があります。
Azure DevTest Labs の共有 IP アドレスについて | Microsoft Docs
開発・テスト環境の場合、IPアドレスによるアクセス制限をかけていることが多くあります。
この機能を利用することによって、個別のVMへのアクセス・個別のVMからのアクセスに必要な パブリック IP アドレスの数を必要最低限に抑えることができます。
最終的には、Azure DevTest Labs 上で Microsoft Edge ブラウザのテストを5並列実行できる環境を作成し、実行時間を約2時間→30分以下に短縮 させることができました。
コストと他サービスとの比較
Azure DevTest Labs のサービス自体は無料で利用することができます。
また、Azure DevTest Labs 上で利用する際の Windows ライセンスに関しては、開発・テストの用途である場合には無償で利用することができます。
そのため、基本的には Virtual Machine などの Azure で使うリソースに関して課金されます。
今回は Microsoft Edge を Selenium WebDriver で使う用途のみなので、Virtual Machine としては
- Standard_B1ms(1CPU, 2GB RAM, ￥2,600 / 月)
- Standard_B2s(2CPU, 4GB RAM, ￥5,200 / 月)
で十分だと感じました。
また、Azure DevTest Labs には自動シャットダウン・自動起動の機能が標準であります。
これによってテストを実行させたい時間帯のみ起動させておくことが可能になり、コストを削減させることができます。
Azure DevTest Labs でのラボのポリシーの管理 | Microsoft Docs
Microsoft Edge のテストをクラウドで実行できるサービスだと SauceLabs / BrowserStack などの SaaS も存在します。
下記にそれぞれのメリットを記述しました、用途に合わせて選ぶのが良いかと思います。
SauceLabs / BrowserStack のメリット
- 環境構築・運用の必要がない
- ブラウザ、OSの細かいバージョンまで環境として用意してくれている
Azure DevTest Labs で環境を作るメリット
- 一回作ってしまえば、並列実行数の追加が容易 & コストが上がりにくい
- SauceLabs / BrowserStack は基本的に同時並列実行数によって課金される
- 実行環境を日本に作ることができる(東日本・西日本リージョン)
- SauceLabs / BrowserStack は現在日本に実行環境はない
- IaaS なのでネットワークなどのカスタマイズができる
おわりに
今回は、Windows 10 / Microsoft Edge ブラウザでの UIテスト自動化 (Selenium WebDriver) と Azure DevTest Labs を使った環境構築についてお話しました。
Windows 10 / Microsoft Edge の環境構築・運用はハードルが高いイメージでしたが、Azure DevTest Labs を活用することで比較的簡単にこれらを行うことができ、テストの高速化を達成することができました。
もちろん Chrome / Firefox ブラウザと比較すると環境構築・運用は難しくなってしまうため、先ほども申した通りブラウザによって実行頻度や実行するテストケースを決めていく必要があると考えています。
また今回は Azure DevTest Labs をブラウザテストの用途としてのみ利用しましたが、それ以外にも自動テスト環境として用途はありそうです。
例えば、Appium を活用した Windows App の自動テスト環境を Azure DevTest Lab 上に作ることも可能です。
Appium Pro #81: Testing Windows Desktop Apps With Appium
今後も、より安定・高速化されたテスト環境の構築にチャレンジしていきたいと思います。
