Renata Andrade - Agilizando testes manuais com Browsersync

Agilizando testes manuais com Browsersync RENATA ANDRADE 2017

Quem sou eu •QA Engineer na Avenue Code •Apaixonada por
testes •Super animada pra eventos da comunidade •Na área de TI há cerca de 10 anos •https://www.linkedin.com/in/raptatinha

Quem faz teste manual web? E em mais de um
browser?

Quem já ouviu falar em Browsersync? E quem usa ou
já usou?

Migrando 600 sites para a nova plataforma •Responsividade •Boa performance
em situações de markdown e hotmarkets •Desenvolvimento e implantação acelerado de features •Criação rápida de novos sites •Possibilidade de testes A/B •Mantendo a taxa de conversão usuários

Alguns dados

Curiosidades do projeto •Time formado por 11 devs e 4
testers •Releases de novas funcionalidades de 2 a 4 vezes por semana •2 sites já em produção – 3º em desenvolvimento •Projeto com 90+% de cobertura de teste unitário •Integração contínua com CircleCI e cloudkeeper integrado com slack •Testes automatizados funcionais para 80% dos cenários críticos •Testes manuais em feature branch e em ambiente unificado em pelo menos 1 versão de cada browser/device e também em versões beta •Implantação de Visual Regression Testing como ainda este ano

Introducing… Browsersync!!! Através de injestão de script tags assíncronas (<script
async>...</script>) no <body> do HTML ele consegue assistir e executar ações em outros browsers que estiver conectado.

Introducing… Browsersync!!!

Browsersync npm install -g browser-sync Acesso ◦ browser-sync start --proxy
"myproject.dev" --files "css/*.css" Local ◦ browser-sync start --files "app/css/*.css, app/js/*.js" –server ◦ Dessa forma permite também o livereload

Browsersync Features ◦ Scroll ◦ Clicks (usa xpath) ◦ Preenchimento
de campo ◦ Browserstack ◦ Devices ◦ Tunnel Know issues ◦ Mouse hover ◦ Sincronização interrompida em caso de tempo de resposta diferente entre browsers (principalmente Safari)

Demonstração

Browsersync options Tem como alterar as regras default utilizando options.
browser-sync start --proxy https://www.google.com.br/ --files "css/*.css" --logLevel debug browser-sync start --proxy https://www.google.com.br/ --files "css/*.css" --port 8884

Browsersync UI

Local Project browser-sync start --server --files "css/*.css" --tunnel true

Synchronized Cross-device Mobile Testing •Ghostlab ($49 – trial 7 dias)
•Remote Preview (open source - free) •Adobe Edge Inspect (pago como parte do pacote Adobe Creative Cloud - free trial)

Renata Andrade - Agilizando testes manuais com Browsersync

Renata Andrade - Agilizando testes manuais com Browsersync

Agile Testers

More Decks by Agile Testers

Other Decks in Technology

Featured

Transcript

Agilizando testes manuais com Browsersync RENATA ANDRADE 2017

Quem sou eu •QA Engineer na Avenue Code •Apaixonada por

Quem faz teste manual web? E em mais de um

Quem já ouviu falar em Browsersync? E quem usa ou

Migrando 600 sites para a nova plataforma •Responsividade •Boa performance

Alguns dados

Curiosidades do projeto •Time formado por 11 devs e 4

Introducing… Browsersync!!! Através de injestão de script tags assíncronas (<script

Introducing… Browsersync!!!

Browsersync npm install -g browser-sync Acesso ◦ browser-sync start --proxy

Browsersync Features ◦ Scroll ◦ Clicks (usa xpath) ◦ Preenchimento

Demonstração

Browsersync options Tem como alterar as regras default utilizando options.

Browsersync UI

Local Project browser-sync start --server --files "css/*.css" --tunnel true

Synchronized Cross-device Mobile Testing •Ghostlab ($49 – trial 7 dias)