Blog

Fique por dentro de tudo o que acontece nos segmentos que a GT4W atua e saiba como agregar valor para sua empresa.

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

13/03/2018

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:

 

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:

 

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:

 

 

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

  

 
Autoras:
  • Fernanda Costa

  • Mônica Faria

  • Thaíza Faria

 
Referências:
Curtir
Please reload

Posts Relacionados

Assuntos

Please reload

Please reload

Comentários