Browsersync: A ferramenta que veio para acabar com as desculpas!

Um problema bem chato que todos desenvolvedores e/ou analistas de qualidade de softwares passam é ter que testar uma aplicação em diferentes navegadores e, além disso, ter a certeza de que a aplicação seja responsiva. Uma das questões que impede de uma pessoa testar em todos os browsers é o tempo. Se um erro é corrigido para um browser específico, o testador precisa ter a certeza de que em nenhum outro aconteça o mesmo problema e, muitas vezes, não temos tempo para realizar o teste. Esta desculpa já não pode mais ser aceita!

Durante a “Agile Testers Conference - BH 2017”, foi apresentada uma ferramenta que nos ajuda e muito, a contornar este problema. O nome da mágica é Browsersync. Esta ferramenta sincroniza o código e as ações de vários navegadores e/ou plataformas simultaneamente, assim, se você testar em um, ela testa em todos!

Fazendo a mágica acontecer com Browsersync

Mas, o que é Browsersync?

Browsersync é uma ferramenta open-source que realiza testes sincronizados em diversos navegadores e dispositivos, onde é possível simular as ações de scrolls, clicks e input de dados em formulários. Os navegadores são atualizados automaticamente à medida que você altera HTML, CSS, imagens e outros arquivos de projeto. Registra suas URLs de teste para que você possa enviá-los de volta para todos os dispositivos com um clique. Ela corta tarefas manuais repetitivas e dá ao testador um par de mãos extra. E o melhor de tudo, é que ela funciona em Windows, Mac e Linux ;)

O Browsersync cessa este problema de testar as mesmas funcionalidades em todos os ambientes, fazendo com que o teste fique o mais fácil e rápido. Em formulários, por exemplo, enquanto os dados estão sendo preenchidos em um navegador, em todos os outros navegadores e plataformas, que estão ligados à ferramenta, os mesmos dados são adicionados automaticamente. Através disso, é possível verificar o comportamento das páginas ao mesmo tempo da iteração, aumentando a agilidade no ambiente de trabalho.

Além de tudo, é fácil de instalar e usar.

Ele é uma ferramenta em Node.JS e para instalá-lo, basta escrever um comando bem simples em seu terminal:

npm install -g browser-sync  

Mas, se você preferir, existem plugins para o Grunt, Gulp e outras ferramentas de build. Existem dois modos do Browsersync: um para sites estáticos e outro para sites dinâmicos. Para sites estáticos, a ferramenta sobe um servidor HTTP na pasta onde estiverem os arquivos. Neste caso, para rodar a ferramenta, basta abrir o terminal, entrar na pasta do projeto e escrever o seguinte comando:

browser-sync start --server --files "css/*.css"  

Já para sites dinâmicos, que envolvem backend (PHP, Java, .NET, etc), a ferramenta roda em modo proxy. Para este modo, o comando também é bem simples:

browser-sync start --proxy "myproject.dev" --files "css/*.css"  

Após rodar os comandos, você será direcionado para o um endereço local: http://localhost:3000.

Assim que estiver neste local, basta copiar a URL em cada um dos navegadores que deseja testar e voilà, o que fizer em um, fará em todos!

Como se não fosse suficiente, você ainda pode ter acesso a http://localhost:3001, que disponibiliza uma interface com o usuário disponibilizando outros recursos.

Alguns recursos disponibilizados são:

  • Ver o histórico de URLs e executá-las novamente;
  • Controlar que tipos de ações devem ser sincronizadas (cliques, scroll, formulários);
  • Abrir uma nova aba em todos os navegadores;
  • Forçar o reload de todos os navegadores;
  • Entre outros recursos.

Infelizmente o Browsersync não é perfeito :(, existem algumas limitações na ferramenta como por exemplo, se você estiver fazendo um teste de uma aplicação em um ambiente mobile e em um desktop, o layout da aplicação irá ser diferente, então, dependendo de onde você clicar no navegador do desktop, pode não ser clicado no ambiente mobile. Mas isso ainda não é desculpa para deixar de usá-lo ;).

Para ter mais acesso a informações, acesse: Browsersync

Participantes do Agile Testers Conference - BH 2017 Participantes do Agile Testers Conference - BH 2017

Autoras:

  • Fernanda Costa
  • Mônica Faria
  • Thaíza Faria

Referências: