BrowserStackはクラウド上でテスト環境・自動化環境を提供するサービスで、他の有料ツールに比べても非常に強力なサービスです。かなり多岐にわたるデバイス・ブラウザのバージョンを有しており、現代のWeb/モバイルアプリのテストにおけるアジリティを大幅に向上させるポテンシャルがあると考えています。この記事では、BrowserStack持つサービス・機能解説と、強み、差別化要素などについて紹介・解説します。

記事の構成

BrowserStackが提供するサービスの概要
BrowserStackの強み
自動テスト実行環境をBrowserStackで構築することで得られるアドバンテージ
他のテスト自動化サービス（有料のもの）との違い

想定する読者

UIテストの実行環境準備に悩んでいる方
BrowserStackの利用方法より前に、全体像を押さえておきたい方

1.BrowserStackとは何か？

サービスの全体像

BrowserStackは、主にテスト実行環境を提供するサービスですが、多くのサービスを展開しています。（下表は2023/08時点のリスト）

サービス名	説明
BrowserStack Live	Webアプリのマニュアルテスト環境を提供
BrowserStack Automate	Webアプリの自動テスト実行環境を提供
BrowserStack App Live	モバイルアプリのマニュアルテスト環境を提供
BrowserStack App Automate	モバイルアプリの自動テスト実行環境を提供
BrowserStack Percy	ビジュアルテストを行うツール
BrowserStack Test Management	テストケース・実行の管理ツール
BrowserStack Test Observability	テスト実行状態の監視ツール

特によく使われる上二つのサービスでは”Webアプリケーションのテスト環境"を提供しており、インターネットに公開されたWebアプリケーション、開発中のローカルのWebアプリケーションのテスト環境が揃っています。

テスト環境 = テスト用アプリケーションがデプロイされ、ホストされている環境
テスト実行環境 = 上記テスト環境にアクセスし、テストを実施するためのデバイス・ブラウザ・OSを含む環境

BrowserStackはクラウド上で後者の「テスト実行環境」を提供しています。

BrowserStack Live　（手動テスト)

BrowserStackにホストされている様々なデバイスを利用し、マニュアルテストすることが可能です。画像ではiPhone13のデバイスを立ち上げ、Webのダッシュボード上で操作を行っている様子です。シミュレータではなく、実機デバイスをブラウザ上から操作できます。

BrowserStack Automate （自動テスト）

Seleniumをはじめとした自動テストフレームワークのリモートWebDriverとしてBrowserStackのサーバを指定し、ログイン情報（ユーザ名、アクセスキー）を含めることで、自動テストコードをBrowserStackで実行することができます。

実行後、このようなレポートが出力され、テスト実行時の動画（デフォルトでは30日間保存）やスクリーンショット、ネットワークログなども確認することができます。

2.BrowserStackの強み

膨大な種類のクロスデバイス・ブラウザテスト

BrowserStackの最大の強みは、「多くのMobileデバイス、Desktop OSが用意されていること」です。iPhone14などの最新機種から、WindowsXP, IE6など...古の環境...まで、幅広く提供されています。

Androidデバイス（世界的にシェアの高いSamsung, Googleに代表される実機デバイス)
iOSデバイス(iPhone5~最新のほぼ全機種、iPadなど）
Windowsデバイス・ブラウザ(Windows XP~11)
MacOSデバイス・ブラウザ(Snow Leopard~Ventura, Sonoma(ベータ版))

世界中で登録されているスマートフォンの数は2016年の36.6億から2022年には64.2億まで上昇（2023年Statista調べ）しており、開発されるアプリケーションはWeb/モバイル問わず"ある端末、ブラウザなどでは動作しない"ことの損失は年々大きくなっています。そのため、リーズナブルなライセンス料でこれだけの種類のデバイスを利用してテストできることは一定の有用性があると思っています。

Windows XPとか、Mac OS X Snow Leopardとか、懐かしいとすら思いますが、用意されていることに驚きです。。

ローカル・内部ネットワークにアクセス可能

BrowserStack Localというプラグインをデバイスにインストールすれば、ローカルや内部ネットワーク内のみでホストしている資源へのアクセスも可能です。

WSS/HTTPSでの接続のため、セキュア
BrowserStackサーバから内部のネットワークへのアクセス認可が必要

自動テストとの高い連携性

BrowserStack Automateでは、自動テストコードをBrowserStackのデバイスで実行可能
Selenium, JS Testing, Cypress(ベータ), Playwright（ベータ）と連携が可能
実行後、スクリーンショットや動画をWeb上で確認可能

例えば、下記はSelenide(Java)でのUIテストをBrowserStackで実行しようとする場合、下記のように設定します。

// BrowserStackで取得したユーザ名とアクセスキーを設定
username = System.getenv("BROWSERSTACK_USERNAME");
accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");

// ビルド名（レポート上でタイトルとして表示）を設定
buildName = "基本機能のテスト"

// Capabilitiesをセットする(W3C形式）
DesiredCapabilities capabilities = new DesiredCapabilities();
HashMap<String, Object> bstackOptionsMap = new HashMap<String, Object>();

bstackOptionsMap.put("buildName", buildName);
bstackOptionsMap.put("sessionName", scenario.getName());
capabilities.setCapability("bstack:options", bstackOptionsMap);

//最終的に、利用するWebDriverに設定内容を適用
driver = new RemoteWebDriver(new URL("https:xxxxxx.com"), capabilities);

高い安定性を有したテスト環境

自動UIテストを実行する場合、各種ドライバ・ブラウザ・言語のバージョン指定などの細かな設定が必要になる場合が多く、安定したテスト環境構築に時間を要しますが、BrowserStackの実行環境の安定性は比較的高く、設定や不安定なテストのデバッグなどの効率が従来より上がります。（筆者の体感）

Appiumの設定も省略可能

Web/ネイティブアプリの自動テストをモバイルで実行する場合、Appiumが利用されます。ただAppiumを使ったテストは、設定の難易度が非常に高いことが課題です。特にSeleniumのテストをAppium経由でAndroidデバイスなどで動かす場合、下記のような設定に悩まされることがあります。この設定作業で、時間もストレスどんどん膨れ上がっていきます。。

AndroidのOSバージョンの確認・設定
Androidにインストールされているブラウザのバージョン調査・検証
Androidでテストするためのドライバーのバージョン調査・検証
Appiumのバージョン調査・検証
Seleniumのバージョン調査・検証

BrowserStack上でテストする場合、これらの作業はBrowserStack社の管轄で行われるので、比較的（少なくとも、自社やチームで設定するよりは）安定的なテスト実行が期待できます。テスト環境構築による遅延リスクの低減が期待できます。

3.BrowserStackで実現するテスト実行環境のクラウド化

開発現場では軽視されがち・遅延しがちな「テスト環境構築」の救世主

現在の特にCustomerフェーシングなWebアプリケーションの開発では、様々なデバイスやOS、ブラウザで動作保証をすることが求められますが、そのためのテスト環境構築に必要となるリソースは膨大になることがあります。

単純にWindowsとChromeで機能テストをするための環境構築はかなり簡単ですが、モバイルデバイスをテスト環境で利用するとなると、調達からセキュリティ監査、ネットワークの設定のほか、デバイス固有の設定をするのに、遅延が生じるというのはよく耳にする話です。

テスト環境の構築は、上記のような場合に一定の経験や知識が必要となるため、開発チームの誰かがかなりの時間を割くか、専門のノウハウを持った人材を充てる必要があります。BrowserStackでテスト環境を構築した場合、そのリソースに割くコストを低減することができます。

モバイル端末を買う必要がなくなる？

前述した通り、BrowserStackはかなり多くの端末・環境を提供しているため、環境構築のリソース削減に一役買います。ただし、実機デバイスとはいえWeb UIを通して画面を確認することになるため、BrowserStackのみでデバイステストを完了する判断はあまりいい判断とは言えないと考えています。

実際のデバイスを用いて機能を検証することは別途必要になるケースがほとんどです。

4.他サービスとの違い・差別化要素

ベンダロックインが起こりづらい

BrowserStackでは既存の自動テストの設定を変更するだけなので、ローカル実行との切り替えが容易です。

BrowserStackを利用するために、独自のテストコードは実行環境の指定のみ
Seleniumなど、一般的なライブラリで使うことが想定されているため、やめるのも簡単

ノーコード・ローコード自動化ツールの罠

ノーコード・ローコードのテスト自動化ツールは、テストスクリプトの作成〜テスト実行までをサポートすることで自動テストを実現しているものが多いですが、このスクリプトは一般的に利用されている自動化コードにExportすることはできないため、有償ツールの利用継続をやめると判断した場合完全に作り直すという事態になります。ローコードツールは直感的な操作や楽に自動テストを組めるメリットをうたうものが多いですが、どれだけメンバーのスキルや時間が少なくても、極力避けるべき戦略と筆者は考えています。

それに対してBrowserStackが提供するリソーススタックは利用開始・取り外しが容易という点で、上記のようなロックインが起こりづらいと言えます。

5.その他のサービス

BrowserStackはその他にもサービスを展開していますので、ざっくり紹介します。テスト管理・監視ツールも提供しているので、AutomateやLiveと合わせて使うと連携面でのメリットがあります。

BrowserStack Percy

Percyでは、Webテスト自動実行時のDOMスナップショットを取得し、いくつかのブラウザや幅を変えて画像を保存し、前のバージョンなどと比較します。BrowserStack AutomateなどではUIの機能テスト(Functional Testing)を実行できるのに対し、Percyでは見た目を確認するビジュアルテスト(Visual Testing)を行うことが可能です。

自動テスト時に、スクリーンショットを取りたいタイミングでAPIを呼び出す
CIでの前回のビルド時との比較が可能
ピクセル比較の厳密性などを設定することで、毎回大きな差分が出ることを回避できる
画像：公式Docより転載

BrowserStack Test Management

テストケース・テストスイーツ管理のためのツール（公式Docより画像転載）

6.まとめ

BrowserStackはテスト環境・自動化環境を提供するサービスで、個人的には、テスト自動化関連の有償ツールの大本命だと思っています。登録してから一定時間のテスト実行なら無料でできるので、ぜひ触れてみることをお勧めします。個別のサービスの機能や詳しい設定方法は、今後別記事としてアップデートします。

書き始めたらかなり長くなってしまいましたが、読んでいただきありがとうございました。
それでは、Happy Testing!

参考リンク

https://www.browserstack.com/
https://www.browserstack.com/guide

Accenture Japan QE&Aでは、テスト自動化を通じてお客様の変革を支援しています。
同じビジョンを共有する仲間を募集しています！

Discussion