BrowserStack é uma plataforma de teste que possibilita realizar testes automáticos ou manuais em aplicações móveis e web em diversos navegadores, incluindo navegadores como Internet Explorer, Opera, Safari, Android, iPhone, Chrome etc. Plataforma bastante parecida com o SauceLabs, mas infelizmente não possui nenhum plano gratuito, só há um curto período para teste (o suficiente para podermos fazer um pequeno experimento).
Essa plataforma permite executar os testes em diversas linguagem de programação, porém, em nosso exemplo, iremos utilizar o NodeJS (JavaScript) e o Node Package Manager (NPM), que podem ser baixados no site oficial. É necessário o NPM para instalar o Karma, o PhantomJS e o WD, digitando o seguinte script no terminal:
npm install -g cucumber phantomjs
npm install wd
O NodeJS possui dois tipos de dependências: global e local. Uma dependência global é executada via terminal (linha de comando). Já a local é instalada na pasta corrente, dentro de um diretório chamado node_modules, e é utilizada via script NodeJS.
O primeiro script, que utiliza o parâmetro -g, instala o Karma e o PhantomJS como dependências globais. O Karma é uma ferramenta permite rodar testes unitários de JavaScript em diferentes plataformas. Já o PhantomJS é um WebKit headless totalmente em JavaScript e possui suporte rápido e nativo para vários padrões web como manipulação de DOM, seletores CSS, JSON, Canvas e SVG.
O segundo script instala o WD como dependência local, um cliente NodeJS para facilitar o acesso à API do Selenium 2, o qual suporta métodos como: fazer requisições GET e POST, clicar no botão VOLTAR do navegador, redimensionar e mover a janela do navegador, submeter formulário, digitar texto, selecionar um elemento DOM, clicar e mover um elemento DOM selecionado, etc.
Após a instalação das dependências, vamos criar um arquivo com a especificação da história de usuário e o teste de aceitação. Algo bem simples. Suficiente para exemplificar a implementação desse tipo de teste utilizando JavaScript.
Nesse exemplo, será utilizado uma ferramenta chamada Test'em, que é gerenciada e instalada pelo NPM. Essa ferramenta permite rodar os testes unitários de JavaScript localmente em diferentes plataformas, tornando a execução mais fácil e divertida. Test'em suporta vários frameworks de teste, tais como: Jasmine, QUnit e Mocha. Para instalar, basta digitar no terminal:
npm install testem -g
No exemplo, será utilizado o framework Jasmine. Mesmo código do tutorial oficial do SauceLabs. As especificações do código estão descritas no arquivo PastaSpec.js e a implementação no arquivo Pasta.js.
Uma vez criado o arquivo de especificação 'PastaSpec.js' e a implementação 'Pasta.js', é preciso criar um arquivo de configuração 'testem.json'. Necessário apenas informar o framework utilizado e os arquivos JavaScript.
O Test'em usa como padrão a porta 7357. O parâmetro '--port' serve para especificar uma outra. Nesse caso, vamos utilizar a 8080, digitando:
testem --port=8080
Após a execução do comando, o resultado dos testes pode ser visto pela url http://localhost:8080/. Caso a url seja aberta no Chrome, os testes serão executados no navegador Chrome. Caso aberta no Safari, será executado no Safari. Como ilustra a figura seguinte.
Para testar o código em diversos navegadores ou diversos sistemas operacionais, não é necessário ter máquinas virtuais nem mesmo outros dispositivos, como celulares ou tablet. O Sauce Labs prover o conector Sauce Connect. Com ele é possível criar uma conexão entre a nossa máquina e os servidores do SauceLabs, assim é possível rodar os testes dentro do firewall do Sauce Labs Cloud. Cloud que disponibiliza mais de 200 plataformas, que inclui dispositivos móveis, diversos SO e navegadores. Uma vez baixado o Sauce Connect, essa conexão é feita pelo comando:
java -jar Sauce-Connect.jar --tunnel-identifier "tabless" $SAUCE_USERNAME $SAUCE_ACCESS_KEY
Vale ressaltar que $SAUCE_USERNAME e $SAUCE_ACCESS_KEY são variáveis de ambientes. Método recomendado para evitar a divulgação de dados privados. Para obter dados de acesso, acesse a página de cadastro. Após a criação da conta, uma chave de acesso já é fornecida, conforme é ilustrado na figura abaixo.
Na página inicial, o botão New Interactive Session permite a criação de uma instância de navegador. Uma popup (ilustrada na imagem abaixo) será exibida ao clicar no botão, com várias opções de sistema operacional e de navegador.
Ao instanciar o navegador, é possível visualizar o resultado dos testes no terminal (ilustração na imagem abaixo). Os testes sempre serão executados novamente caso haja alguma alteração tanto no código quanto nas especificações, possibilitando assim a prática de TDD ou BDD, utilizando qualquer tipo de navegador.
Esse exemplo contempla apenas a execução de testes de forma manual. Essas ferramentas que foram utilizadas também oferecem suporte para a automatização de testes, mas isso ficará para um próximo capítulo. Muito obrigado.