他のブラウザーをエミュレートしてテストする
あなたの仕事は、あなたのサイトがMicrosoft EdgeとAndroid全体で優れた実行を確実にすることで終わるわけではありません。 デバイス エミュレーション ツールは、スマートフォンなどの他のデバイスの範囲をシミュレートできますが、他のブラウザーによって提供されるエミュレーションのソリューションを確認することをお勧めします。
概要
特定のデバイスを持っていない場合、または何かにスポット チェックを行う場合は、ブラウザー内でデバイスをエミュレートすることをお勧めします。
デバイス エミュレーターとシミュレーターを使用すると、ワークステーションから、さまざまなデバイス上の開発サイトを模倣できます。
クラウドベースのエミュレーターを使用すると、さまざまなプラットフォームでサイトの単体テストを自動化できます。
ブラウザー エミュレーター
ブラウザー エミュレーターは、サイトの応答性をテストするために最適です。 ただし、ブラウザー エミュレーターでは、API、CSS サポート、および実際のデバイス上のモバイル ブラウザーでのみ現れる特定の動作の違いはエミュレートされません。 実際のデバイスで実行されているブラウザーでサイトをテストし、すべてが期待どおりに動作することを確認します。
Firefox レスポンシブ デザイン ビュー
Firefox には 応答性の高いデザイン ビュー があり、特定のデバイスの観点から考えるのをやめ、代わりに、ウィンドウの端をドラッグして、一般的な画面サイズや独自の画面サイズでデザインがどのように変化するかを調べることができます。
EdgeHTML エミュレーション
Windows Phone をエミュレートするには、Microsoft Edge (EdgeHTML) 組み込みのエミュレーションを使用します。
IE 11 エミュレーションを使用して、古いバージョンの Internet Explorer でページがどのように表示されるかをシミュレートします。
デバイス エミュレーターとシミュレーター
デバイス シミュレーターとエミュレーターは、ブラウザー環境だけでなく、デバイス全体をシミュレートします。 各シミュレーターは、仮想キーボードを使用したフォーム入力など、OS の統合が必要なものをテストするのに役立ちます。
Android エミュレーター
現時点では、Android エミュレーターに Microsoft Edge をインストールする方法はありません。 ただし、Android ブラウザー、Chromium コンテンツ シェル、および Android 用 Firefox を使用できます。この記事の後半で確認します。 Chromium Content Shell は、Microsoft Edge と同じChromiumレンダリング エンジンを実行しますが、ブラウザー固有の機能はありません。
Android エミュレーターには、Android Studio の一部としてダウンロードする必要がある Android SDK が付属 しています。 次に、指示に従って 仮想デバイスを設定 し、 エミュレーターを起動します。 エミュレーターが起動したら、[ ブラウザー ] アイコンを選択し、Android 用の古い Stock Browser でサイトをテストします。
Android でのコンテンツ シェルのChromium
Android 用の Chromium Content Shell をインストールするには、エミュレーターを実行したままにして、次のコマンドを実行します。
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/*.sh
./chromium-android-installer/install-chromeandroid.sh
これで、Chromium Content Shell を使用してサイトをテストできます。
Android 上の Firefox
Chromiumコンテンツシェルと同様に、APK を入手して Firefox をエミュレーターにインストールできます。
開いているエミュレーターまたは接続されている Android デバイスにファイルをインストールするには、次のコマンドを実行します。
adb install <path_to_APK>/fennec-XX.X.XX.android-arm.apk
iOS シミュレーター
Mac OS X 用の iOS シミュレーターには、App Storeからインストールする Xcode が付属しています。
完了したら、 Apple Developer ドキュメントを使用してシミュレーターを操作する方法について説明します。
注:
iOS シミュレーターを使用するたびに Xcode を開かないようにするには、それを開 き、ドックで iOS シミュレーター アイコンを右クリックし、[ Dock に保持] を選択します。 必要なときにアイコンをクリックするだけです。
Microsoft Edge (EdgeHTML)
Web サイトまたはアプリを Microsoft ブラウザーでテストする必要があり、必要なバージョンの Windows がない場合は、BrowserStack を使用できます。これは、過去と現在の両方で Microsoft ブラウザーとオペレーティング システムの多くの組み合わせのテストをサポートします。 たとえば、バージョン 80 以降のすべてのバージョンの Microsoft Edge (Chromium) と Microsoft Edge (EdgeHTML) バージョン 15 から 18 をテストできます。 Microsoft Edge のテストは BrowserStack で無料です。 詳細については、「 BrowserStack での Microsoft Edge ブラウザー テスト 」を参照してください。
クラウドベースのエミュレーターとシミュレーター
エミュレーターを使用できず、実際のデバイスにアクセスできない場合は、クラウドベースのエミュレーターが次に最適です。 実際のデバイスとローカル エミュレーターよりもクラウドベースのエミュレーターの大きな利点は、さまざまなプラットフォームでサイトの単体テストを自動化できることです。
次の一覧は、クラウドベースのエミュレーターとテスト サイトのサンプルです。 テスト サイトを選択するときに考慮する機能の説明を確認します。 独自の検索を実行して、ニーズに最適なクラウドベースのエミュレーターを見つけます。
BrowserStack は、手動テストを実行するのに役立ちます。 オペレーティング システム、ブラウザーのバージョン、デバイスの種類、および参照する URL を選択し、BrowserStack によって、対話できるホストされた仮想マシンが起動します。 同じ画面で複数のエミュレーターを実行して、複数のデバイス間でアプリの外観を同時にテストできます。
Mobileum はエミュレーターを使用しませんが、リモートで制御できる実際のデバイスを使用します。 これは、特定のデバイスで問題を再現する必要があり、一部のレポートに問題が表示されない場合に便利です。
HeadSpin は、何千もの実際のデバイス、ブラウザー、オペレーティング システムで手動クロスブラウザー テストを実行するのに役立ちます。 Slack、JIRA などの統合を通じて、複雑なバグのビデオを記録し、共有することができます。 テストを並行して行うことで、市場投入までの時間を短縮できます。
LambdaTest は、さまざまなブラウザーとオペレーティング システムの組み合わせで手動クロスブラウザー テストを実行するのに役立ちます。 複雑なバグのビデオを記録し、Microsoft Teams、Slack などの統合を通じて共有できます。 テストを並列で実行することで、テストを高速化できます。
SauceLabs を使用すると、エミュレーター内で単体テストを実行できます。これは、サイト内のフローをスクリプト化し、その後のさまざまなデバイスでこのビデオ録画を見る場合に役立ちます。 サイトで手動テストを行うこともできます。
TestingBot は、さまざまなブラウザーとオペレーティング システムの組み合わせで手動テストと自動テストの両方を実行するのに役立ちます。 TestingBot のエミュレーターと物理デバイスで Web サイトとモバイル アプリの両方をテストします。
注:
このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページはこちらで、Meggin Kearney (テクニカル ライター) と Paul Bakaus (Open Web Developer Advocate at Google |ツール、パフォーマンス、アニメーション、UX)。
