Conecte-se ao túnel de teste local do BrowserStack com o Grunt

BrowserStack é uma ótima ferramenta para teste em vários navegadores e sistemas operacionais. Em seus planos de teste ao vivo, eles irão ativar um servidor executando o sistema operacional e o navegador especificados e permitir que você interaja remotamente. Eles também oferecem um serviço de captura de tela que enviará fotos de sua página em até 25 navegadores em computadores e celulares.

O teste local é feito por tunelamento do serviço para sua máquina local. Isso pode ser feito convenientemente com um miniaplicativo Java que é executado no navegador. Por mais fácil de usar que seja, descobri que o túnel Java não é confiável. Freqüentemente, preciso me reconectar para obter acesso ao meu servidor de desenvolvimento local.

BrowserStack oferece um aplicativo Java que pode ser executado localmente que é muito mais confiável, mas requer uma série de parâmetros de shell para ser iniciado. Você sempre pode fazer isso com um script de shell, mas gosto de manter toda a minha automação em um só lugar. Para esse fim, configurei uma tarefa do Grunt para executar o script para mim. É um processo simples para configurá-lo. Estou assumindo que você já tem o Grunt instalado e funcionando. Se não, vá para a página de introdução do Grunt .

Instale o grunt-exec de Jake Harding . Isso permitirá que o Grunt execute comandos shell. Use npm install grunt-exec --save-devpara instalá-lo e adicioná-lo ao seu package.jsonarquivo.

Baixe o aplicativo Java do BrowserStack para tunelamento. Obtenha-o na página de teste local . Você pode colocar isso em qualquer lugar. Eu simplesmente o adicionei ao diretório raiz do meu projeto. Isso torna a configuração do Grunt um pouco mais fácil.

Adicione esta nova tarefa ao seu Gruntfile initConfig:

exec: {
  bstack_test: {
    cmd: 'java -jar BrowserStackTunnel.jar <your BrowserStack API key> localhost,<port>,0'
  }
}

Esse é todo o código de que você precisa para fazer este trabalho. No entanto, ter sua chave de API BrowserStack em texto simples em seu arquivo Grunt não funcionará em muitos casos. Em vez disso, o que faço é exportar uma variável de ambiente no meu shell e usá-la no comando. Altere o comando na configuração da sua tarefa assim:

cmd: 'java -jar BrowserStackTunnel.jar $BROWSERSTACK_API localhost,<port>,0'

e exporte a variável do terminal com o seguinte comando.

export BROWSERSTACK_API='<your BrowserStack API key>'

Agora, sua chave secreta estará com segurança fora do controle de versão e longe de olhos curiosos.

(Opcional) Crie um alias para sua tarefa ou inclua-o em uma tarefa existente para teste e depuração. Se você adicionar isso a uma tarefa existente, observe que ela será bloqueada, portanto, você precisa ter uma maneira de executar as tarefas simultaneamente . Tenho esta tarefa dentro do meu initConfig:

grunt.registerTask('test', ['exec:bstack_test'])

Supondo que você seguiu a etapa opcional, apenas execute esta tarefa a partir do terminal dentro do diretório do seu projeto.

grunt test

Agora você terá acesso aos seus sites locais para testes na infinidade de navegadores e dispositivos oferecidos pelo serviço BrowserStack.