Emular e testar outros navegadores

Para garantir que seu site funcione para todos os usuários, teste-o em outros navegadores e dispositivos. Nem todos os usuários usarão o navegador e o dispositivo que você usou durante o desenvolvimento. Incentivamos você a marcar as soluções para emulação fornecidas por outros navegadores, além de usar a ferramenta Emulação de Dispositivo no Microsoft Edge DevTools.

Resumo

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

  • Os emuladores de navegador ajudam você a testar rapidamente a aparência e o comportamento do seu site em diferentes tamanhos e resoluções de tela, com a emulação de eventos de toque e substituindo a cadeia de caracteres User-Agent que o navegador envia. Você usa emuladores de navegador do navegador em que está desenvolvendo. Consulte Emuladores de navegador, abaixo.

  • Emuladores e simuladores de dispositivo permitem que você execute outros dispositivos de seu computador de desenvolvimento e teste seu site como se estivesse usando esses outros dispositivos. Consulte Emuladores e simuladores de dispositivo, abaixo.

  • Os emuladores baseados em nuvem permitem que você execute testes automatizados para seu site em diferentes plataformas. Consulte Emuladores e simuladores baseados em nuvem, abaixo.

Emuladores de navegador

Os emuladores de navegador são ótimos para testar a aparência e o comportamento do seu site em diferentes tamanhos e resoluções de tela, ou quando eventos de toque estão habilitados ou quando a cadeia de caracteres User-Agent está definida como a cadeia de caracteres User-Agent de outro navegador.

Você usa emuladores de navegador do navegador em que está desenvolvendo. Por exemplo, no Microsoft Edge, você pode usar a ferramenta Emulação de Dispositivo no DevTools para obter uma aproximação de como seu site se parece e se comporta em diferentes dispositivos. Para obter mais informações sobre como usar a ferramenta de Emulação de Dispositivo no Microsoft Edge DevTools, consulte Emular dispositivos móveis (Emulação de Dispositivo).

Emuladores de navegador não emulam diferenças no suporte à API Web ou no suporte a CSS. Por exemplo, a ferramenta de emulação de dispositivo no Microsoft Edge não emula como as diferentes APIs da web ou recursos CSS que seu site pode estar usando são compatíveis com o Firefox ou o Safari. Para ter certeza de que tudo se comporta conforme o esperado, teste seu site em navegadores executados em dispositivos reais.

Aqui estão alguns emuladores de navegador que você pode usar para testar seu site em outros navegadores:

Emuladores e simuladores de dispositivo

Simuladores e emuladores de dispositivos simulam todo o dispositivo, em vez de apenas simular o ambiente do navegador. Cada simulador é útil para testar aspectos que exigem integração com o sistema operacional específico, como entrada de formulário usando teclados de dispositivos móveis.

Você instala emuladores e simuladores de dispositivo em seu computador de desenvolvimento, para que possa continuar a testar seu site no mesmo computador em que está desenvolvendo, enquanto simula a experiência de usar um dispositivo diferente.

Emulador do Android

No momento, não há como instalar o Microsoft Edge em um emulador do Android. No entanto, você pode usar o navegador Android, o shell de conteúdo do Chromium e o Firefox para Android, que são abordados posteriormente neste artigo. O Chromium Content Shell executa o mesmo mecanismo de renderização do Chromium que o Microsoft Edge, mas vem sem recursos específicos do navegador.

Para usar o emulador do Android:

  1. Faça o download do emulador do Android, que faz parte do SDK do Android, fazendo o download do Android Studio.

  2. Configure um dispositivo virtual, seguindo as etapas em Criar e gerenciar dispositivos virtuais.

  3. Inicie o emulador seguindo as etapas em Executar aplicativos no Emulador do Android.

  4. Depois que o emulador for inicializado, selecione o ícone do navegador e teste seu site no antigo navegador de ações para Android.

Shell de conteúdo do Chromium no Android

Para instalar o Chromium Content Shell 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 você pode testar seu site com o Shell de Conteúdo do Chromium.

Firefox no Android

Semelhante ao Chromium Content Shell, você pode obter um APK para instalar o Firefox no emulador.

Baixe o arquivo .apk correto.

Para instalar o arquivo em um emulador aberto ou dispositivo Android conectado, execute o seguinte comando:

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

Simulador de iOS

O simulador do iOS para Mac OS X vem com o Xcode, que você instala na App Store.

Quando terminar, saiba como trabalhar com o simulador por meio da documentação do desenvolvedor da Apple.

Para evitar ter que abrir o Xcode toda vez que quiser usar o Simulador do iOS, abra o Simulador do iOS, clique com o botão direito do mouse no ícone do Simulador do iOS no dock e selecione Manter no Dock. Agora você pode simplesmente clicar no ícone sempre que precisar.

Máquinas virtuais

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

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

Emuladores e simuladores baseados em nuvem

Emuladores e simuladores baseados em nuvem são soluções comerciais para testar seu site em diferentes dispositivos e navegadores sem instalar nada em sua máquina de desenvolvimento. Eles são úteis quando você não tem acesso a dispositivos reais ou quando não pode usar emuladores locais. As soluções baseadas em nuvem também são úteis para automatizar testes em diferentes plataformas.

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

Confira também

Design responsivo:

Android:

Apple:

MDN:

Observação

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

Licença Creative Commons Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.

  • Last updated on