Introdução
Se você é um desenvolvedor da Web que segmenta a Web para vários dispositivos, provavelmente terá que testar seus sites e apps da Web em vários dispositivos e configurações diferentes. O teste sincronizado pode ajudar nesse caso e é uma maneira eficaz de realizar automaticamente a mesma interação em vários dispositivos e navegadores ao mesmo tempo.
O teste sincronizado pode ajudar a resolver dois problemas particularmente demorados:
- Mantenha todos os seus dispositivos sincronizados com o URL que você quer testar. O carregamento manual delas em cada dispositivo é ontem, leva mais tempo e facilita a perda de regressões.
- Sincronizar interações. A capacidade de carregar uma página é ótima para testes visuais. No entanto, para testes de interação, o ideal é que você também queira sincronizar rolagens, cliques e outros comportamentos.
Felizmente, se você tiver acesso a alguns dos dispositivos de destino, há várias ferramentas destinadas a melhorar o fluxo da área de trabalho para os dispositivos móveis. Neste artigo, vamos conhecer o Ghostlab, a visualização remota, o Adobe Edge Inspect e o Grunt.
Ferramentas
GhostLab (Mac)
O Ghostlab é um aplicativo comercial para Mac (US$ 49) projetado para sincronizar testes de sites e apps da Web em vários dispositivos. Com a configuração mínima, ele permite que você sincronize simultaneamente:
- Cliques
- Navegação
- Rolagens
- Entrada no formulário (por exemplo, formulários de login, inscrição)
Isso facilita muito o teste da experiência do usuário completa do seu site em vários dispositivos. Depois de abrir sua página em um navegador no dispositivo, qualquer mudança na navegação (incluindo atualizações) faz com que todos os outros dispositivos conectados sejam atualizados instantaneamente. Como o Ghostlab tem suporte para a observação de diretórios locais, essa atualização também acontece quando você salva edições em arquivos locais, mantendo tudo sempre sincronizado.
Achei fácil configurar o Ghostlab. Para começar, faça o download, instale e execute o teste (ou a versão completa, se você quiser comprar). Em seguida, conecte o Mac e os dispositivos que você quer testar à mesma rede Wi-Fi para que eles possam ser descobertos.
Quando o Ghostlab estiver em execução, você poderá clicar em "+" para adicionar um URL para teste ou simplesmente arrastá-lo da barra de endereço do navegador. Outra opção é arrastar a pasta local que você quer testar para a janela principal e uma nova entrada do site será criada. Para este artigo, estou testando uma versão ativa do http://html5rocks.com. ;
Você pode iniciar um novo servidor Ghostlab clicando no botão de reprodução ">" ao lado do nome do site. Isso inicia um novo servidor, disponível em um endereço IP específico para sua rede (por exemplo, http://192.168.21.43:8080).
Aqui, conectei um Nexus 4 e indiquei o Chrome para Android para o endereço IP que o Ghostlab me forneceu. Isso é tudo o que preciso fazer. O Ghostlab não exige que você instale um cliente dedicado por dispositivo, como algumas outras soluções, e isso significa que você pode começar os testes ainda mais rapidamente.
Qualquer dispositivo conectado ao URL do Ghostlab será adicionado à lista de clientes conectados na barra lateral à direita da janela principal do Ghostlab. Clicar duas vezes no nome do dispositivo mostra mais detalhes, como tamanho da tela, SO e assim por diante. Agora você pode testar a navegação e a sincronização de cliques. Isso é ótimo.
O Ghostlab também mostra algumas estatísticas sobre dispositivos conectados, como a string do UA, largura e altura da janela de visualização, densidade de pixels do dispositivo, proporção e muito mais. A qualquer momento, é possível alterar manualmente o URL base que está inspecionando clicando na engrenagem de configurações ao lado de uma entrada. Isso abre uma janela de configuração como esta:
Agora posso selecionar um dos meus outros dispositivos conectados, clicar em links diferentes no HTML5Rocks, e a navegação será sincronizada tanto no Chrome para computador (onde digitei o mesmo URL do Ghostlab) quanto em todos os meus dispositivos.
O que é ainda melhor é que o Ghostlab tem uma opção que permite usar proxy de todos os links que passam pela rede para que, em vez de um clique em http://192.168.21.43:8080/www.html5rocks.com navegar para www.html5rocks.com/en/performance2, isso vai fazer com que o link em todos os dispositivos. 2http://192.168.21.43/www.htm5rocks.com/en/performance
Para ativar, marque a opção "Load all content through Ghostlab" na guia "Content Loading".
Confira como ele funciona:
O Ghostlab é capaz de carregar qualquer número de sites ou janelas em qualquer navegador compatível. Isso não só permite testar o site em diferentes resoluções, mas também como o código se comporta em navegadores e plataformas distintos. Eba,
O Ghostlab permite que você configure o espaço de trabalho do projeto que está visualizando e pode especificar se quer que as mudanças no diretório sejam monitoradas e atualizadas quando forem detectadas. Isso significa que as alterações fazem com que todos os clientes conectados sejam atualizados. Não há mais atualizações manuais.
Talvez você esteja se perguntando como o Ghostlab pode ajudar. Embora não seja certamente um canivete suíço, ele também oferece suporte à inspeção remota de código em dispositivos conectados. Na interface principal, clicar duas vezes em qualquer nome de dispositivo abrirá uma opção "debug" que iniciará uma versão do Chrome DevTools para você testar.
O Ghostlab torna isso possível por meio do inspetor da Web remoto Weinre do pacote, que permite depurar scripts e ajustar estilos em dispositivos conectados. Semelhante à experiência de depuração remota disponível para o Google Chrome para Android, é possível selecionar elementos, executar alguns perfis de desempenho e scripts de depuração.
No geral, fiquei impressionada com a rapidez com que consegui usar o Ghostlab para os testes diários em vários dispositivos. Se você é freelancer, talvez ache o custo da licença comercial um pouco alto. Confira mais opções abaixo. No entanto, fico feliz em recomendar o Ghostlab de outra forma.
Adobe Edge Inspect CC (Mac, Windows)
O Adobe Edge Inspect faz parte do pacote de assinatura do Adobe Creative Cloud, mas também está disponível como teste sem custo financeiro. Ele permite que você dirija vários dispositivos iOS e Android com o Chrome (usando a extensão Edge Inspector para Chrome), de modo que, se você navegar até um URL específico, todos os dispositivos conectados permaneçam sincronizados.
Para configurar, primeiro inscreva-se em uma conta do Adobe Creative Cloud ou faça login em uma conta atual, se você já tiver uma. Em seguida, faça o download e instale o Edge Inspect do Adobe.com (disponível no momento para Mac e Windows, mas não para Linux). É importante ter à mão os docs do Edge Inspect.
Após a instalação, instale a extensão de inspeção do Edge para o Chrome para sincronizar a navegação entre dispositivos conectados.
Também será necessário instalar um cliente Edge Inspect em cada dispositivo com que você quer sincronizar ações. Felizmente, os clientes estão disponíveis para iOS, Android e Kindle.
Com o processo de instalação atrasado, agora podemos começar a inspecionar nossas páginas. Você precisa conferir se todos os dispositivos estão conectados à mesma rede para que isso funcione.
Inicie o Edge Inspect no computador, na extensão Edge Inspect no Chrome e no app nos seus dispositivos (veja abaixo):
Agora, podemos acessar um site como HTML5Rocks.com no computador, e nosso dispositivo móvel vai navegar automaticamente para a mesma página.
Na extensão, agora você também vai ver seu dispositivo listado com um símbolo <> ao lado dele, como na captura de tela abaixo. Clicar nesse botão inicia uma instância do Weinre permitindo que você inspecione e depure sua página.
O Weinre é um console e visualizador de DOM e não possui recursos do Chrome DevTools, como depuração JavaScript, criação de perfil e cascata de rede. Embora seja o mínimo necessário para usar as ferramentas para desenvolvedores, ele é útil para verificar a integridade do estado de DOM e JavaScript.
A extensão Edge Inspect também permite gerar capturas de tela de dispositivos conectados com facilidade. Útil para testar o layout ou apenas capturar sua página para compartilhar com outras pessoas.
Para desenvolvedores que já pagam pela CC, o Edge Inspect é uma ótima solução. No entanto, há algumas ressalvas, como cada dispositivo que exige que um cliente dedicado seja instalado e um pouco de trabalho de configuração extra que você pode não encontrar com uma alternativa como o Ghostlab.
Prévia remota (Mac, Windows, Linux)
A Visualização remota é uma ferramenta de código aberto em que você hospeda páginas HTML e conteúdo que pode ser exibido em vários dispositivos.
A visualização remota executa uma chamada XHR em um intervalo de cada 1.100 ms para verificar se um URL em um arquivo de configuração foi alterado. Se ele descobrir que já existe, o script atualizará o atributo src de um iframe carregado na página para cada dispositivo, carregando a página nele. Caso nenhuma alteração seja detectada, o script continuará a pesquisa até que uma alteração seja feita.
Isso é ótimo para encadear dispositivos e mudar facilmente um URL em todos eles. Para começar, faça o seguinte:
- Faça o download da visualização remota e mova todos os arquivos dela para um servidor acessível localmente. Pode ser o Dropbox, um servidor de desenvolvimento ou qualquer outra coisa.
- Carregue "index.html" deste download em todos os dispositivos de destino. Essa página será usada como driver e vai carregar a página que você quer testar usando um iframe.
- Edite o "url.txt" (incluído no download e agora veiculado no seu servidor) com o URL que você quer visualizar. Salve o arquivo.
- A visualização remota vai notar que o arquivo url.txt mudou e vai atualizar todos os dispositivos conectados para carregar seu URL.
Embora seja uma solução de baixa fidelidade, a Visualização remota é sem custo financeiro e funciona.
Grunt + Live-Reload (Mac, Windows, Linux)
Grunt (e Yeoman) são ferramentas de linha de comando usadas para scaffolding e criação de projetos no front-end. Se você já usa essas ferramentas e tem a configuração de atualização em tempo real, é fácil atualizar seu fluxo de trabalho para ativar o teste entre dispositivos, em que cada mudança feita no editor causa uma atualização em qualquer um dos dispositivos em que o app local foi aberto.
Você provavelmente está acostumado a usar grunt server. Quando executado no diretório raiz
do projeto, ele detecta alterações nos arquivos de origem e
atualiza automaticamente a janela do navegador. Isso acontece graças à
tarefa grunt-contrib-watch que executamos como parte do servidor.
Se você tiver usado o Yeoman para gerenciar o projeto, ele terá
criado um Gruntfile com tudo o que você precisa para fazer uma atualização em tempo real no seu
computador. Para que ele funcione entre dispositivos, basta mudar uma
propriedade, que é o hostname (no computador). Ele estará listado em
connect. Se você notar que hostname está definido como localhost, mude para
0.0.0.0. Em seguida, execute grunt server e, como de costume, uma nova janela será aberta exibindo uma visualização da página. O URL provavelmente será como http://localhost:9000 (a porta é 9000).
Abra uma nova guia ou terminal e use ipconfig | grep inet para descobrir o
IP interno do sistema. Ele pode ser semelhante a 192.168.32.20. A última etapa é abrir
um navegador, como o Chrome, no dispositivo com o qual você quer sincronizar livereloads
e digitar esse endereço IP seguido pelo número da porta anterior, por exemplo,
192.169.32.20:9000.
Pronto! A recarga em tempo real agora fará com que todas as edições feitas nos arquivos de origem no computador acionem atualizações no navegador para computador e no navegador no dispositivo móvel. Incrível!
O Yeoman também tem um gerador de dispositivos móveis disponível que facilita a configuração desse fluxo de trabalho.
Emmet LiveStyle
O Emmet LiveStyle é um plug-in para navegador e editor que adiciona a edição de CSS em tempo real ao seu fluxo de trabalho de desenvolvimento. No momento, ele está disponível para Chrome, Safari e Sublime Text e oferece suporte à edição bidirecional (de editor para navegador e vice-versa).
O Emmet LiveStyle não força uma atualização completa do navegador quando você faz mudanças, mas envia edições CSS pelo protocolo de depuração remota do DevTools. Isso significa que você pode ver as alterações feitas no editor da área de trabalho em qualquer versão conectada do Chrome, seja no Chrome para computador ou para Android.
O LiveStyle tem o que chamamos de "modo multiview", que é ideal para testar e ajustar designs responsivos em janelas e dispositivos. No modo multiview, todas as atualizações do editor são aplicadas a todas as janelas, assim como as atualizações do DevTools para a mesma página.
Com o pacote LiveStyle instalado, para começar a editar CSS em tempo real:
- Inicie o Sublime Text e abra um arquivo CSS em um projeto.
- Inicie o Chrome e acesse a página com o CSS que você quer editar.
- Abra o DevTools e acesse o painel LiveStyle. Marque a opção "Ativar LiveStyle". Observação: o DevTools precisará ser mantido aberto durante a sessão de edição ao vivo em cada janela para que as atualizações de estilo sejam aplicadas.
- Quando esse recurso estiver ativado, uma lista de folhas de estilo será exibida à esquerda e uma lista dos arquivos do editor à direita. Selecione o arquivo do editor a ser associado ao navegador. Pronto! Ótimo.
Agora, a lista de arquivos do editor será atualizada automaticamente quando você editar, criar, abrir ou fechar arquivos.
Conclusões
O teste entre dispositivos ainda é um espaço novo e rápido, com muitos concorrentes novos em desenvolvimento. Felizmente, existem várias ferramentas sem custo financeiro e comerciais para garantir a compatibilidade e os testes com vários conjuntos de dispositivos.
Dito isso, ainda há muito potencial para melhoria nessa área, e incentivamos você a pensar em como as ferramentas para testes em vários dispositivos podem ser melhoradas. Qualquer coisa que reduza o tempo de configuração e melhore o fluxo de trabalho entre dispositivos é vantajosa.
Problemas
Talvez os maiores problemas que encontrei durante o teste com essas ferramentas foram dispositivos que entravam no modo suspensão regularmente. Não é um ponto de interrupção, mas é incômodo depois de um tempo. Sempre que possível, é uma boa ideia configurar seus dispositivos para não entrarem em suspensão. No entanto, lembre-se de que isso pode descarregar a bateria, a menos que você esteja sempre conectado.
Pessoalmente, não tive problemas graves com o GhostLab. Por US $49, algumas pessoas podem achar o preço um pouco alto. No entanto, lembre-se de que, se você o usa regularmente, ele vale mais ou menos por si. Uma das melhores coisas da configuração foi não ter que se preocupar em instalar e gerenciar um cliente por dispositivo de destino. O mesmo URL funcionou em qualquer lugar.
Com o Adobe Edge Inspect, achei um pouco tedioso instalar e usar clientes específicos em cada dispositivo. Também descobri que ele não atualizava consistentemente todos os clientes conectados, o que significa que eu tive que fazer isso usando a extensão do Chrome. Ele também requer uma assinatura do Creative Cloud e se limita a carregar sites no cliente, e não em um navegador selecionado nos seus dispositivos. Isso pode limitar sua capacidade de realizar testes precisos.
A visualização remota funcionou como anunciado, mas é extremamente leve. Isso significa que, para qualquer coisa que não seja atualizar o site em vários dispositivos, você vai precisar de uma opção de ferramentas mais avançadas. Ele não vai sincronizar cliques ou rolagens, por exemplo.
Recomendações
Se estiver procurando uma solução multiplataforma sem custo financeiro para começar, recomendamos usar a visualização remota. Para quem trabalha em uma empresa em busca de uma solução paga, o GhostLab tem sido consistentemente excelente na minha experiência, mas só está disponível para Mac. Para usuários do Windows, o Adobe Edge Inspect é a melhor chamada e menos algumas peculiaridades, geralmente funciona.
O Grunt e o LiveStyle também são excelentes para aumentar a iteração ao vivo durante o desenvolvimento.