Emular e testar outros browsers

Para se certificar de que o seu site funciona para todos os seus utilizadores, teste o seu site noutros browsers e dispositivos. Nem todos os seus utilizadores irão utilizar o browser e o dispositivo que utilizou durante o desenvolvimento. Recomendamos que marcar soluções para a emulação fornecidas por outros browsers, além de utilizar a ferramenta de Emulação de Dispositivos nas DevTools do Microsoft Edge.

Resumo

Existem vários níveis diferentes de testes que pode fazer para testar o seu site em diferentes condições:

• Os emuladores do browser ajudam-no a testar rapidamente o aspeto e o comportamento do seu site em diferentes tamanhos e resoluções de ecrã, com emulação de eventos táteis e ao substituir a cadeia de User-Agent que o browser envia. Pode utilizar os emuladores do browser no qual está a desenvolver. Consulte Os emuladores do browser, abaixo.

• Os emuladores e simuladores de dispositivos permitem-lhe executar outros dispositivos a partir do seu computador de desenvolvimento e testar o seu site como se estivesse a utilizar estes outros dispositivos. Veja Emuladores e simuladores de dispositivos abaixo.

• Os emuladores baseados na cloud permitem-lhe executar testes automatizados para o seu site em diferentes plataformas. Veja Emuladores e simuladores baseados na cloud, abaixo.

Emuladores do browser

Os emuladores do browser são ótimos para testar o aspeto e o comportamento do seu site em diferentes tamanhos de ecrã e resoluções, quando os eventos táteis estão ativados ou quando a cadeia de User-Agent está definida para a cadeia de User-Agent de outro browser.

Pode utilizar os emuladores do browser no qual está a desenvolver. Por exemplo, no Microsoft Edge, pode utilizar a ferramenta DevTools para utilizar a ferramenta DevTools para obter uma aproximação do aspeto e comportamento do seu site em diferentes dispositivos. Para obter mais informações sobre como utilizar a ferramenta de Emulação de Dispositivos nas DevTools do Microsoft Edge, veja Emular dispositivos móveis (Emulação do Dispositivo).

Os emuladores do browser não emulam diferenças no suporte da API Web ou no suporte do CSS. Por exemplo, a ferramenta de Emulação de Dispositivos no Microsoft Edge não emula a forma como as diferentes APIs Web ou funcionalidades CSS que o seu site pode estar a utilizar são suportadas no Firefox ou no Safari. Para ter a certeza de que tudo se comporta conforme esperado, teste o seu site em browsers em execução em dispositivos reais.

Seguem-se alguns emuladores do browser que pode utilizar para testar o seu site noutros browsers:

• Modo de Estrutura Reativo do Firefox.
• Modo de Dispositivo do Chrome.
• Modo de Estrutura Reativo do Safari.

Emuladores e simuladores de dispositivos

Os simuladores de dispositivos e os emuladores simulam todo o dispositivo, em vez de apenas simularem o ambiente do browser. Cada simulador é útil para testar aspetos que requerem integração com o sistema operativo específico, como a introdução de formulários através de teclados de dispositivos móveis.

Pode instalar emuladores e simuladores de dispositivos no seu computador de desenvolvimento, para que possa continuar a testar o seu site no mesmo computador no qual está a desenvolver, ao mesmo tempo que simula a experiência de utilização de um dispositivo diferente.

Emulador android

De momento, não existe forma de instalar o Microsoft Edge num emulador Android. No entanto, pode utilizar o Browser Android, o Chromium Content Shell e o Firefox para Android, que são abordados mais adiante neste artigo. Chromium Shell de Conteúdos executa o mesmo motor de composição Chromium que o Microsoft Edge, mas vem sem funcionalidades específicas do browser.

Para utilizar o emulador android:

1. Transfira o emulador android, que é empacotado como parte do SDK android, ao transferir o Android Studio.

2. Configure um dispositivo virtual ao seguir os passos em Criar e gerir dispositivos virtuais.

3. Inicie o emulador ao seguir os passos em Executar aplicações no Emulador do Android.

4. Após o arranque do emulador, selecione o ícone browser e teste o seu site no Antigo Stock Browser para Android.

Chromium shell de conteúdo no Android

Para instalar o Chromium Shell de Conteúdos para Android, mantenha o emulador em execução e execute o seguinte comando:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/*.sh
./chromium-android-installer/install-chromeandroid.sh

Agora, pode testar o seu site com o Chromium Shell de Conteúdos.

Firefox no Android

À semelhança do Chromium Content Shell, pode obter um APK para instalar o Firefox no emulador.

Transfira o ficheiro de .apk correto.

Para instalar o ficheiro num emulador aberto ou num dispositivo Android ligado, execute o seguinte comando:

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

Simulador iOS

O simulador iOS para Mac OS X é fornecido com Xcode, que é instalado a partir do App Store.

Quando terminar, saiba como trabalhar com o simulador através da documentação do Apple Developer.

Para evitar ter de abrir o Xcode sempre que quiser utilizar o Simulador iOS, abra o Simulador iOS, clique com o botão direito do rato no ícone do Simulador iOS na estação de ancoragem e, em seguida, selecione Manter na Dock. Agora, pode clicar no ícone sempre que precisar.

Máquinas virtuais

Para testar o seu site noutros sistemas operativos, pode executar máquinas virtuais no seu dispositivo de desenvolvimento. Por exemplo, o Hyper-V é uma ferramenta de virtualização que lhe permite executar várias versões do Windows e Linux. Para saber mais, veja Introdução ao Hyper-V no Windows 10.

Para outras máquinas virtuais, veja Máquinas virtuais em Estratégias para realizar testes no MDN.

Emuladores e simuladores baseados na cloud

Os emuladores e simuladores baseados na cloud são soluções comerciais para testar o seu site em diferentes dispositivos e browsers sem instalar nada no seu computador de desenvolvimento. São úteis quando não tem acesso a dispositivos reais ou quando não pode utilizar emuladores locais. As soluções baseadas na cloud também são úteis para automatizar testes em diferentes plataformas.

Veja Emuladores em Estratégias para realizar testes no MDN.

Confira também

• Emular dispositivos móveis (Emulação de Dispositivos)
• Introdução ao Hyper-V no Windows 10

Design reativo:

• Modo de Estrutura Reativo - Firefox.
• Simular dispositivos móveis com o modo de dispositivo – Chrome.
• Modo de Estrutura Reativo - Safari.

Android:

• Android Studio
• Criar e gerir dispositivos virtuais - para configurar um dispositivo virtual.
• Execute aplicações no Android Emulator para iniciar o emulador.
• Escolha o Browser firefox a transferir no seu idioma: Firefox Android Beta – para transferir o ficheiro .apk correto.

Apple:

• Xcode
• Ajuda do Simulador

MDN:

• Estratégias para realizar testes na MDN.
  • Emuladores
  • Máquinas virtuais

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Meggin Kearney e Paul Bakaus.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.