他のブラウザのエミュレートとテスト

あなたの仕事は、Chrome と Android でサイトを快適に動作させることで終わりではありません。しかし、 Device Mode では、iPhone などの他のさまざまなデバイスをシミュレートできます。 エミュレーション用のブラウザ ソリューションを提供します。

概要

  • 特定のデバイスをお持ちでない場合や、何かをスポット チェックしたい場合は、 ブラウザ内でデバイスをエミュレートすることです。
  • デバイス エミュレータとシミュレータを使用すると、 作成します。
  • クラウドベースのエミュレータを使用すると、さまざまなプラットフォームでサイトの単体テストを自動化できます。

ブラウザ エミュレータ

ブラウザ エミュレータはサイトの応答性をテストするのには最適だが、違いをエミュレートしない API、CSS サポート、モバイル ブラウザで見られる特定の動作についてです。サイトをテストする すべてが意図したとおりに動作するか検証します。

Firefoxレスポンシブ デザイン ビュー

Firefox のレスポンシブ デザイン ビューでは、 一般的な画面サイズやご自身のサイズでデザインがどのように変わるかを できます。

Edge の F12 エミュレーション

Windows Phone をエミュレートするには、Microsoft Edge の組み込みエミュレーションを使用します。

Edge には以前の互換性が備わっていないため、IE 11 のエミュレーションを使用して、 以前のバージョンの Internet Explorer では表示されなくなります。

デバイス エミュレータとシミュレータ

デバイス シミュレータとエミュレータは、ブラウザ環境だけでなくデバイス全体をシミュレートします。 OS との統合が必要な機能(たとえば、仮想アシスタントによるフォーム入力)のテストに便利です。 使用できます。

Android Emulator

Android Emulator のストック ブラウザ

Android Emulator のストック ブラウザ

現時点では、Android Emulator に Chrome をインストールする方法はありません。ただし、 Android ブラウザ、Chromium Content Shell、Android 用 Firefox など、これらについては後ほど説明します ご覧くださいChromium Content Shell は Chrome と同じレンダリング エンジンを使用していますが、 ブラウザ固有の機能。

Android Emulator には Android SDK が付属しています。この SDK はこちらからダウンロードしてください。その後 手順に沿って仮想デバイスをセットアップし、エミュレータを起動します。

エミュレータが起動したら、ブラウザ アイコンをクリックすると、 古い Android 用ストックブラウザです

Android 版 Chromium Content Shell

Android Emulator の Content Shell

Android Emulator の Content Shell

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 でサイトをテストできます。

Firefox(Android)

Android Emulator の Firefox アイコン

Android Emulator の Firefox アイコン

Chromium の Content Shell と同様に、APK を取得してエミュレータに Firefox をインストールできます。

以下から適切な .apk ファイルをダウンロードします https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

ここから、開いているエミュレータまたは接続された Android デバイスに、 次のコマンドを実行します。

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

iOS シミュレータ

Mac OS X 用の iOS シミュレータには Xcode が付属しており、App Store からインストールできます。

完了したら、Apple のドキュメントでシミュレータの使い方を確認してください。

Modern.IE

最新の IE VM

最新の IE VM

Modern.IE 仮想マシンを使用すると、VirtualBox を介してコンピュータでさまざまなバージョンの IE にアクセスできます。 (VMware)を使用します。こちらのダウンロード ページで仮想マシンを選択します。

クラウドベースのエミュレータとシミュレータ

エミュレータを使用できず、実際のデバイスにアクセスできない場合は、クラウドベースのエミュレータを使用します。 次善の策を提案します。実際のデバイスやローカル エミュレータと比較した、クラウドベースのエミュレータの大きなメリット さまざまなプラットフォームでサイトの単体テストを自動化できることです

  • BrowserStack(商用): 手動テストには最も簡単に使用できます。運用する ブラウザのバージョンとデバイスの種類を選択し、ブラウジングする URL を選択すると、 操作可能なホスト型仮想マシンですまた、同じモジュールで複数のエミュレータを起動することもできます。 同じ画面を使用して、複数のデバイスで同じアプリの外観や操作性をテストできます あります。
  • SauceLabs(商用)を使用すると、エミュレータ内で単体テストを実行できる サイトのフロースクリプトを作成するのに大変便利です こちらの動画をご覧ください さまざまなデバイスで実行されていますサイトで手動テストを行うこともできます。
  • Device Anywhere(商用)では、エミュレータを使用せず、自分で管理できる実際のデバイスを使用 できます。これは、特定の環境で問題を再現する必要がある場合に 以前のガイドのどのオプションでもバグを確認できない場合。
  • LambdaTest(商用): 特定の組み合わせに対して、ブラウザをまたいだ手動テストを実行できる 2,000 以上のブラウザとOS です。ユーザーは、複雑な虫や、前夜のイベントなどの動画を撮影できるようになります。 MS Teams、Slack などと統合して共有できます。ユーザーは、 テストを並行して実行できます