Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Emular e testar outros navegadores

Seu trabalho não acaba depois de garantir que o site funcione perfeitamente no Chrome e no Android. Embora o Device Mode possa simular diversos outros dispositivos, como iPhones, recomendamos que você confira soluções de emulação para outros navegadores.

TL;DR

  • Quando não tiver um determinado dispositivo ou quiser fazer uma verificação pontual, a melhor opção é emular o dispositivo dentro do próprio navegador.
  • Os emuladores e simuladores de dispositivo permitem reproduzir o site em desenvolvimento em diversos dispositivos a partir da estação de trabalho.
  • Os emuladores com base em nuvem permitem automatizar testes de unidade para o site em diferentes plataformas.

Emuladores de navegador

Os emuladores de navegador são ótimos para testar a capacidade de resposta de um site, mas não emulam diferenças na API, a compatibilidade com CSS e determinados comportamentos que você veria em um navegador para dispositivos móveis. Teste seu site em navegadores de dispositivos reais para garantir que todos os comportamentos estejam corretos.

Visualização de design responsivo do Firefox

O Firefox tem uma visualização de design responsivo que incentiva você a não pensar mais em termos de dispositivos específicos e, em vez disso, explorar como seu design muda em tamanhos de tela comuns ou definir um tamanho personalizado arrastando as bordas.

Emulação F12 do Edge

Para emular Windows Phones, use a emulação incorporada do Microsoft Edge.

Como o Edge não tem compatibilidade com versões legadas, use a emulação do IE 11 para simular a aparência da sua página em versões mais antigas do Internet Explorer.

Emuladores e simuladores de dispositivos

Emuladores e simuladores de dispositivos simulam não só o ambiente de navegação, mas todo o dispositivo. Eles são úteis para testar elementos que precisam de integração de SO, por exemplo, entradas de formulário com teclados virtuais.

Android Emulator

Navegador Stock do Android Emulator
Navegador Stock no Android Emulator

No momento, não é possível instalar o Chrome em um emulador de Android. No entanto, você pode usar o Navegador do Android, o Chromium Content Shell e o Firefox para Android, sobre os quais falaremos mais à frente neste guia. O Chromium Content Shell usa o mesmo mecanismo de renderização do Chrome, mas vem sem nenhum recurso específico do navegador.

O Android Emulator vem com o Android SDK, que você precisa transferir por download aqui. Depois, siga as instruções para configurar um dispositivo virtual e inicialize o emulador.

Depois que o emulador for inicializado, clique no ícone de navegador para testar o site no antigo navegador Stock para Android.

Chromium Content Shell no Android

Content Shell do Android Emulator
Content Shell do Android Emulator

Para instalar o Chromium Content Shell para Android, deixe o emulador em execução e execute os seguintes comandos em um prompt de 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 Chromium Content Shell.

Firefox para Android

Ícone do Firefox no Android Emulator
Ícone do Firefox no Android Emulator

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

Faça o download do arquivo .apk correto em https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

Então, você pode instalar o arquivo em um emulador aberto ou um dispositivo Android conectado com o seguinte comando:

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

iOS Simulator

O iOS Simulator para Mac OS X vem com o Xcode, que você pode instalar da App Store.

Quando terminar, saiba como trabalhar com o simulador na documentação da Apple.

Modern.IE

VM do Modern IE
VM do Modern IE

As máquinas virtuais do Modern.IE permitem acessar diferentes versões do IE no computador pelo VirtualBox (ou VMWare). Escolha uma máquina virtual na página de download aqui.

Emuladores e simuladores baseados na nuvem

Se não puder usar os emuladores e não tiver acesso a dispositivos reais, os emuladores baseados na nuvem são a melhor opção. Uma grande vantagem dos emuladores com base em nuvem em relação aos dispositivos reais e emuladores locais é que você pode automatizar os testes de unidade do seu site para diferentes plataformas.

  • O BrowserStack (comercial) é o modo mais fácil de usar para testes manuais. Você seleciona um sistema operacional, a versão do navegador e o tipo do dispositivo, seleciona um URL para navegar e ele fornece uma máquina virtual hospedada com a qual você pode interagir. Você ainda pode acionar diversos emuladores na mesma tela, o que permite testar o visual e o funcionamento do seu aplicativo em diversos dispositivos ao mesmo tempo.
  • O SauceLabs (comercial) permite executar testes de unidade dentro de um emulador, o que pode ser muito útil para determinar um fluxo pelo site e assistir à gravação em vídeo dele depois em vários dispositivos. Você ainda pode realizar testes manuais no site.
  • O Device Anywhere (comercial) não usa emuladores, mas sim dispositivos reais que você controla remotamente. Isto é muito útil caso que você precise reproduzir um problema em um dispositivo específico e não consiga encontrar o bug em nenhuma das opções dos guias anteriores.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.