Seu trabalho não termina com a garantia de que seu site funciona bem no Chrome e no Android. Embora o Device Mode possa simular vários outros dispositivos, como iPhones, recomendamos que você confira as soluções para emulação de outros navegadores.
Resumo
- Quando você não tem um dispositivo específico ou quer fazer uma verificação pontual, a melhor opção é emular o dispositivo dentro do navegador.
- Emuladores e simuladores de dispositivo permitem imitar o site em desenvolvimento em vários dispositivos na estação de trabalho.
- Os emuladores baseados na 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 as diferenças na API, no suporte a CSS e em certos comportamentos que você veria em um navegador para dispositivos móveis. Teste seu site em navegadores executados em dispositivos reais para ter certeza de que tudo se comporta conforme o esperado.
Visualização de design responsivo do Firefox
O Firefox tem uma visualização de design responsivo que incentiva você a parar de pensar em termos de dispositivos específicos e, em vez disso, descobrir como o design muda em tamanhos de tela comuns ou no seu próprio tamanho arrastando as bordas.
Emulação F12 do Edge
Para emular Windows Phones, use a emulação integrada do Microsoft Edge.
Como o Edge não é fornecido com compatibilidade legada, use a emulação do IE 11 para simular a aparência da página em versões mais antigas do Internet Explorer.
Emuladores e simuladores de dispositivos
Os simuladores e emuladores de dispositivos simulam não apenas o ambiente do navegador, mas todo o dispositivo. Elas são úteis para testar itens que exigem integração do SO, como entrada de formulário com teclados virtuais.
Android Emulator
Navegador Stock no Android Emulator
No momento, não é possível instalar o Chrome em um emulador do Android. No entanto, você pode usar o navegador Android, o Chromium Content Shell e o Firefox para Android, que vamos abordar mais adiante neste guia. O Chromium Content Shell usa o mesmo mecanismo de renderização do Chrome, mas vem sem nenhum dos recursos específicos do navegador.
O Android Emulator vem com o SDK do Android. Você precisa fazer o download aqui. Depois, siga as instruções para configurar um dispositivo virtual e iniciar o emulador.
Depois que o emulador for inicializado, clique no ícone do navegador para testar o site no antigo navegador Stock para Android.
Chromium Content Shell no Android
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 no Android
Ícone do Firefox no Android Emulator
Assim como o 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/.
Você pode instalar o arquivo em um emulador aberto ou dispositivo Android conectado com o seguinte comando:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
Simulador do iOS
O simulador do iOS para Mac OS X vem com o Xcode, que você pode instalar na App Store.
Quando terminar, aprenda a trabalhar com o simulador na documentação da Apple.
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.
Emuladores e simuladores baseados na nuvem
Se você não pode usar os emuladores e não tem acesso a dispositivos reais, os emuladores baseados em nuvem são a melhor opção. Uma grande vantagem dos emuladores baseados em nuvem em relação a dispositivos reais e emuladores locais é que você pode automatizar testes de unidade para seu site em diferentes plataformas.
- O BrowserStack (comercial) é a mais fácil de usar para testes manuais. Você seleciona um sistema operacional, seleciona a versão do navegador e o tipo de dispositivo, seleciona um URL para navegar e ele ativa uma máquina virtual hospedada com a qual você pode interagir. Também é possível acionar vários emuladores na mesma tela, o que permite testar a aparência do app em vários dispositivos ao mesmo tempo.
- O SauceLabs (comercial) permite executar testes de unidade dentro de um emulador, o que pode ser muito útil para criar o script de um fluxo pelo seu site e assistir à gravação em vídeo depois em vários dispositivos. Você também pode fazer testes manuais no site.
- O Device Anywhere (comercial) não usa emuladores, mas sim dispositivos reais que podem ser controlados remotamente. Isso é muito útil quando você precisa reproduzir um problema em um dispositivo específico e não consegue ver o bug em nenhuma das opções dos guias anteriores.
- O LambdaTest (comercial) ajuda a realizar testes manuais em vários navegadores em uma combinação de mais de 2.000 navegadores e sistemas operacionais. Os usuários poderão gravar vídeos de bugs complexos e compartilhá-los por integrações como MS Teams, Slack e muito mais. Os usuários podem acelerar os testes executando em paralelo.