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-syncMas, 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
Autoras:
- Fernanda Costa
- Mônica Faria
- Thaíza Faria
