contato@qualister.com.br (48) 3285-5615 twitter.com/qualister facebook.com/qualister linkedin.com/company/qualister

Automação  de  front-­‐end  Web  com  métodos  Ágeis  

 

Elias  Nogueira  elias.nogueira@qualister.com.br  /  @eliasnogueira  

     

www.qualister.com.br    

Fundada  em  2007  Mais  de  1.000  clientes  em  todo  o  Brasil  

Mais  de  50  cursos  sobre  teste  de  so?ware  Mais  de  3.000  alunos  formados  

Front  End  x  Back  End  

Front  End  Tudo  o  que  o  usuário  vê  e  consegue  interagir.  Geralmente  criado  (na  web)  com  HTML,  CSS  e  JavaScript.    

 

Back  End  O  que  processa  as  interações  do  usuário  (Ex:  cadastrar  dados,  trafegar  dados  de  um  serviço  a  outro,  etc..)  Geralmente  desenvolvido  em  uma  linguagem  de  programação    

Teste  Ágil  

Teste  Ágil  é  uma  práDca  de  Teste  de  SoFware  que  segue  os  princípios  do  desenvolvimento  ágil    

Teste  Ágil  

Estratégia  

Manutenibilida

d

e!Portabilidade!Baixo!

Nível!Alto!Nível!

Verificação  

Verificação  Iremos  verificar  padrões  de  HTML,  CSS,  JavaScript  e  boas  prá\cas  para  deixar  o  front-­‐end  mais  leve.    

 

Validação  Iremos  validar  se  a  aplicação  funciona  como  especificado  simulando  a  u\lização  como  um  usuário,  de  forma  automa\zada,    

Dividindo  em  partes...  

W3Schools:  verifica  online  HTML  e  CSS  hap://www.w3schools.com/website/web_validate.asp    

W3C  Status:  lista  de  diversos  so?wares  para  automação  hap://www.w3.org/Status.html    

GTmetrix:  analisa  a  velocidade/performance  de  uma  página  hap://planned.by/quickloja/    

Browser  Diet:  guia  para  perder  peso  no  browser  hap://browserdiet.com/pt/    

Interação  1  

Analise  o  site  abaixo  no  GTMetrix.  Vamos  discu\r  os  resultados  apresentados    hap://planned.by/quickloja/    

Automação  da  UI  é  Importante  

Pirâmide  de  Automação  de  Teste  Michel  Cohn  (Succeding  with  Agile)    

hap://www.mountaingoatso?ware.com/blog/the-­‐forgoaen-­‐layer-­‐of-­‐the-­‐test-­‐automa\on-­‐pyramid  

Validação  na  UI  

Smoke  Tests    xBrowser  Tes\ng    Visual  Regression  Tes\ng    

Slide  “roubado”do  @stefanteixeira  hap://goo.gl/WKGO7X  

Velocidade  faz  a  diferença...  

E  se  você  executasse  todos  os  testes  funcionais  automa\zados  via  interface  gráfica  na  sua  build  padrão?    

Muita  demora  no  feedback  do  ciclo  de  CI    

Vamos  começar  de  tras  pra  frente...  

Xbowser  Tes\ng  com  Selenium/WebDriver    

Selenium/WebDriver  

API  mais  usada  para  desenvolvimento  de  testes  automa\zados  em  front  end  web    Diversas  APIs/Frameworks  usam  ele  “por  baixo  dos  panos”    Suporte  nas  principais  linguagems  

 Java,  C#,  Ruby,  Python,  JavaScript  (Node.js)    hap://seleniumhq.org  

Selenium/WebDriver  

Antes  precisamos  saber  algumas  coisas:    

 -­‐  Fluxo  de  u\lização  do  usuário    

 -­‐  Conhecer  minimamente  sobre  HTML,  CSS  e  JavaScript    

 -­‐  Desenvolver  em  alguma  linguagem  e  programação  

Interação  2  

Manualmente...    

1.  Acessar  a  página  hap://planned.by/quickloja/  2.  Preencher  o  campo  usuário  com  elias.nogueira  3.  Preencher  o  campo  senha  com  123  4.  Clicar  no  botão  Entrar  

Selenium/WebDriver  

Interação  3  

Manualmente...    

1.  Acessar  a  página  hap://planned.by/quickloja/  2.  Preencher  o  campo  usuário  com  elias.nogueira  3.  Preencher  o  campo  senha  com  123  4.  Clicar  no  botão  Entrar  5.  Validar  que  está  na  área  de  usuário  (???)  

Selenium/WebDriver  

Selenium/WebDriver  

Mas  se  precisarmos  executar  mais  ações?    Exemplos:  

 -­‐  Efetuar  login  e  cadastrar  um  produto    -­‐  Efetuar  login  e  consultar  o  estoque  

Page  Objects  

Page  Objects  

Cada  página  vira  uma  classe  com  ações  (simples  ou  em  conjunto)    O  Teste  consome  cada  página  e  monta  o  fluxo  de  execução  baseados  pela  página    Ganho  na  centralização  da  manutenção,  com  redução  na  duplicação  de  código  

Interação  4  

Iremos  transformar  o  Login  em  um  Page  Objects  e  criar  uma  classe  de  teste  para  a  validação  do  login  

Selenium/WebDriver  

Interação  5  

Crie  um  Page  Objects  para  Categoria  Iremos:  1.  Efetuar  o  login  2.  Cadastrar  uma  categoria  

Interação  5  

 

Pagina  Login    

 

Pagina  Menu    

 

Pagina  Login    

 

Pagina  Categoria    

 

Pagina  Nova  Categoria    

 

Teste    

Vamos  começar  “do  começo”  

Smoke  Tests    

Smoke  Tests  

Pequeno  conjunto  de  testes  mais  prioritários    O  pensamento  é  “sem  isso  não  funcionar  nem  adianta  fazer  o  deploy”    Como  em  todos  os  outros  testes,  deve  executar  sempre  o  mais  rápido  possível  

CasperJS  

Execução  via  headless  browser    U\liza  PhantomJS  e  SlimerJS  (Gecko)  para  navegação  e  testes    Escrita  de  código  em  JavaScript    Deixa  a  execução  muito  mais  rápida    hap://casperjs.org    

 

 

CasperJS  

Porque  executaríamos  testes  headless?    

 -­‐  Maior  velocidade    -­‐  Teste  pode  estar  no  ciclo  de  CI  diário    -­‐  Sem  dependência  de  browser  específico  

 

 

 

Interação  6  

Criaremos  a  validação  do  login  com  o  CasperJS  

CasperJS  

Visual  Regression  Test  

Abordagem  para:    -­‐  Validar  valores  de  CSS    -­‐  Comparar  Screenshots    -­‐  Validar  design  responsivo  

 

 

 

Slide  “roubado”do  @stefanteixeira  hap://goo.gl/WKGO7X  

Visual  Regression  Test  

Slide  “roubado”do  @stefanteixeira  hap://goo.gl/WKGO7X  

Visual  Regression  Test  

Slide  “roubado”do  @stefanteixeira  hap://goo.gl/WKGO7X  

Contatos  

 

elias.nogueira@qualister.com.br  @eliasnogueira  

linkedin.com/in/eliasnoguiera  slideshare.net/eliasnogueira  

(48)  3285-­‐5615