36
[email protected] (48) 3285-5615 twitter.com/qualister facebook.com/qualister linkedin.com/company/qualister Automação de frontend Web com métodos Ágeis Elias Nogueira [email protected] / @eliasnogueira

Caipira agil automacao front end selenium

Embed Size (px)

DESCRIPTION

Caipira agil automacao front end selenium qualister

Citation preview

Page 1: Caipira agil automacao front end selenium

[email protected] (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  [email protected]  /  @eliasnogueira  

Page 2: Caipira agil automacao front end selenium

     

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  

Page 3: Caipira agil automacao front end selenium

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    

Page 4: Caipira agil automacao front end selenium

Teste  Ágil  

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

Page 5: Caipira agil automacao front end selenium

Teste  Ágil  

Page 6: Caipira agil automacao front end selenium

Estratégia  

Manutenibilida

d

e!Portabilidade!Baixo!

Nível!Alto!Nível!

Page 7: Caipira agil automacao front end selenium

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,    

Page 8: Caipira agil automacao front end selenium

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/    

Page 9: Caipira agil automacao front end selenium

Interação  1  

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

Page 10: Caipira agil automacao front end selenium

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  

Page 11: Caipira agil automacao front end selenium

Validação  na  UI  

Smoke  Tests    xBrowser  Tes\ng    Visual  Regression  Tes\ng    

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

Page 12: Caipira agil automacao front end selenium

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    

Page 13: Caipira agil automacao front end selenium

Vamos  começar  de  tras  pra  frente...  

Xbowser  Tes\ng  com  Selenium/WebDriver    

Page 14: Caipira agil automacao front end selenium

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  

Page 15: Caipira agil automacao front end selenium

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  

Page 16: Caipira agil automacao front end selenium

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  

Page 17: Caipira agil automacao front end selenium

Selenium/WebDriver  

Page 18: Caipira agil automacao front end selenium

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  (???)  

Page 19: Caipira agil automacao front end selenium

Selenium/WebDriver  

Page 20: Caipira agil automacao front end selenium

Selenium/WebDriver  

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

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

Page 21: Caipira agil automacao front end selenium

Page  Objects  

Page 22: Caipira agil automacao front end selenium

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  

Page 23: Caipira agil automacao front end selenium

Interação  4  

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

Page 24: Caipira agil automacao front end selenium

Selenium/WebDriver  

Page 25: Caipira agil automacao front end selenium

Interação  5  

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

Page 26: Caipira agil automacao front end selenium

Interação  5  

 

Pagina  Login    

 

Pagina  Menu    

 

Pagina  Login    

 

Pagina  Categoria    

 

Pagina  Nova  Categoria    

 

Teste    

Page 27: Caipira agil automacao front end selenium

Vamos  começar  “do  começo”  

Smoke  Tests    

Page 28: Caipira agil automacao front end selenium

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  

Page 29: Caipira agil automacao front end selenium

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    

 

 

Page 30: Caipira agil automacao front end selenium

CasperJS  

Porque  executaríamos  testes  headless?    

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

 

 

 

Page 31: Caipira agil automacao front end selenium

Interação  6  

Criaremos  a  validação  do  login  com  o  CasperJS  

Page 32: Caipira agil automacao front end selenium

CasperJS  

Page 33: Caipira agil automacao front end selenium

Visual  Regression  Test  

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

 

 

 

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

Page 34: Caipira agil automacao front end selenium

Visual  Regression  Test  

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

Page 35: Caipira agil automacao front end selenium

Visual  Regression  Test  

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

Page 36: Caipira agil automacao front end selenium

Contatos  

 

[email protected]  @eliasnogueira  

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

(48)  3285-­‐5615