Поделиться через

Эмуляция и тестирование других браузеров

  • Статья

Чтобы убедиться, что ваш веб-сайт работает для всех пользователей, протестируйте его в других браузерах и устройствах. Не все пользователи будут использовать браузер и устройство, которые использовались при разработке. Мы рекомендуем проверка решения для эмуляции, предоставляемые другими браузерами, в дополнение к использованию средства эмуляции устройств в Средствах разработки Microsoft Edge.

Сводка

Существует несколько различных уровней тестирования, которые можно выполнить для тестирования веб-сайта в разных условиях:

  • Эмуляторы браузера помогают быстро проверить, как выглядит и ведет себя веб-сайт при различных размерах и разрешениях экрана, эмуляции событий касания и переопределить строку User-Agent, которую отправляет браузер. Эмуляторы браузера используются из браузера, в который выполняется разработка. См. статью Эмуляторы браузера ниже.

  • Эмуляторы и симуляторы устройств позволяют запускать другие устройства с компьютера разработки и тестировать веб-сайт так, как если бы вы использовали эти другие устройства. См . статью Эмуляторы устройств и симуляторы ниже.

  • Облачные эмуляторы позволяют выполнять автоматические тесты для веб-сайта на разных платформах. См. статью Облачные эмуляторы и симуляторы ниже.

Эмуляторы браузера

Эмуляторы браузера отлично подходят для тестирования того, как веб-сайт выглядит и ведет себя при разных размерах экрана и разрешениях, при включении событий касания или при установке строки User-Agent в другой строке User-Agent браузера.

Вы используете эмуляторы браузера из браузера, в который вы разрабатываетесь. Например, в Microsoft Edge можно использовать средство эмуляции устройств в средствах разработки, чтобы получить приблизительное представление о том, как выглядит и ведет себя ваш веб-сайт на разных устройствах. Дополнительные сведения об использовании средства эмуляции устройств в Средствах разработки Microsoft Edge см. в разделе Эмуляция мобильных устройств (эмуляция устройств).

Эмуляторы браузера не имитируют различия в поддержке веб-API или поддержке CSS. Например, средство эмуляции устройств в Microsoft Edge не имитирует, как в Firefox или Safari поддерживаются различные веб-API или функции CSS, которые может использовать ваш сайт. Чтобы убедиться, что все работает должным образом, протестируйте свой сайт в браузерах, работающих на реальных устройствах.

Ниже приведены некоторые эмуляторы браузера, которые можно использовать для тестирования веб-сайта в других браузерах:

Эмуляторы устройств и симуляторы

Симуляторы устройств и эмуляторы имитируют все устройство, а не просто имитируют среду браузера. Каждый симулятор полезен для тестирования аспектов, требующих интеграции с конкретной операционной системой, таких как ввод формы с помощью клавиатур мобильного устройства.

Эмуляторы устройств и симуляторы устанавливаются на компьютере разработки, чтобы вы могли продолжать тестировать веб-сайт на том же компьютере, на котором выполняется разработка, имитируя опыт использования другого устройства.

Эмулятор Android

На данный момент установить Microsoft Edge в эмуляторе Android не существует. Однако вы можете использовать браузер Android, оболочку содержимого Chromium и Firefox для Android, которые рассматриваются далее в этой статье. Chromium Content Shell работает с тем же механизмом отрисовки Chromium, что и Microsoft Edge, но не имеет функций, характерных для браузера.

Чтобы использовать эмулятор Android, выполните следующие действия:

  1. Скачайте эмулятор Android, который входит в состав пакета SDK для Android, скачав Android Studio.

  2. Настройте виртуальное устройство, выполнив действия, описанные в разделе Создание виртуальных устройств и управление ими.

  3. Запустите эмулятор, выполнив действия, описанные в разделе Запуск приложений в эмуляторе Android.

  4. После загрузки эмулятора щелкните значок Браузера и протестируйте веб-сайт в старом браузере для Android.

Chromium оболочка содержимого на Android

Чтобы установить Chromium Content Shell для Android, оставьте эмулятор запущенным и выполните следующую команду:

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

Как и в Chromium Content Shell, вы можете получить APK-файл для установки Firefox на эмулятор.

Скачайте правильный .apk файл.

Чтобы установить файл на открытый эмулятор или подключенное устройство Android, выполните следующую команду:

adb install <path_to_APK>/fennec-XX.X.XX.android-arm.apk

Симулятор iOS

Симулятор iOS для Mac OS X поставляется с Xcode, который устанавливается из App Store.

Когда вы закончите, узнайте, как работать с симулятором, в документации для разработчиков Apple.

Чтобы избежать необходимости открывать Xcode каждый раз, когда вы хотите использовать симулятор iOS, откройте симулятор iOS, щелкните правой кнопкой мыши значок симулятора iOS на док-станции и выберите Команду Сохранить в док-станции. Теперь вы можете просто щелкнуть значок всякий раз, когда он вам нужен.

Виртуальные машины

Чтобы протестировать веб-сайт в других операционных системах, можно запустить виртуальные машины на устройстве разработки. Например, Hyper-V — это средство виртуализации, которое позволяет запускать различные версии Windows и Linux. Дополнительные сведения см. в статье Общие сведения о Hyper-V на Windows 10.

Сведения о других виртуальных машинах см. в статье Виртуальные машиныстатьи Стратегии для тестирования в MDN.

Облачные эмуляторы и симуляторы

Облачные эмуляторы и симуляторы — это коммерческие решения для тестирования веб-сайта на разных устройствах и браузерах без установки на компьютере разработки. Они полезны, если у вас нет доступа к реальным устройствам или вы не можете использовать локальные эмуляторы. Облачные решения также полезны для автоматизации тестов на разных платформах.

См . статью Эмуляторы в разделе Стратегии для тестирования в MDN.

См. также

Адаптивный дизайн:

Андроид:

Яблоко:

MDN:

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и авторами Меггин Кирни и Пол Бакаус.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.