Seu trabalho não acaba depois de garantir que o site funciona perfeitamente no Chrome e no Android. Embora o Device Mode possa simular diversos outros dispositivos, como iPhones, recomendamos que você confira outras soluções de emulação para navegadores.
Resumo
- 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.
- Emuladores e simuladores de dispositivo permitem imitar o site em desenvolvimento em diversos dispositivos na 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, no suporte a CSS e em determinados comportamentos que você encontraria em um navegador para dispositivos móveis. Teste seu site em navegadores de dispositivos reais para garantir que tudo funcione conforme o esperado.
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 integrada 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 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 dos recursos específicos do navegador.
O emulador Android vem com o Android SDK, que você precisa fazer o download aqui. Em seguida, siga as instruções para configurar um dispositivo virtual e iniciar o emulador.
Depois que o emulador inicializar, 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
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
Similar ao Content Shell do Chromium, você pode conseguir 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/.
A partir daqui, 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 iOS Simulator 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 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ê também pode acionar vários 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 em um emulador, o que pode ser muito útil para criar um fluxo no site e assistir à gravação em vídeo dele 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ê pode controlar remotamente. Isso é 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.
- O LambdaTest (comercial) vai ajudar você a realizar testes manuais entre 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 meio de integrações como MS Teams, Slack e outras. Os usuários podem acelerar os testes executando-os em paralelo.