caipira agil automacao front end selenium

Download Caipira agil automacao front end selenium

Post on 11-Nov-2014

711 views

Category:

Technology

5 download

Embed Size (px)

DESCRIPTION

Caipira agil automacao front end selenium qualister

TRANSCRIPT

  • 1. contato@qualister.com.br (48) 3285-5615 twitter.com/qualister facebook.com/qualister linkedin.com/company/qualister Automao de front-end Web com mtodos geis Elias Nogueira elias.nogueira@qualister.com.br / @eliasnogueira
  • 2. 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
  • 3. Front End x Back End Front End Tudo o que o usurio v e consegue interagir. Geralmente criado (na web) com HTML, CSS e JavaScript. Back End O que processa as interaes do usurio (Ex: cadastrar dados, trafegar dados de um servio a outro, etc..) Geralmente desenvolvido em uma linguagem de programao
  • 4. Teste gil Teste gil uma prDca de Teste de SoFware que segue os princpios do desenvolvimento gil
  • 5. Teste gil
  • 6. Estratgia Manutenibilidad e! Portabilidade! Baixo! Nvel! Alto! Nvel!
  • 7. Verificao Verificao Iremos verificar padres de HTML, CSS, JavaScript e boas prcas para deixar o front-end mais leve. Validao Iremos validar se a aplicao funciona como especificado simulando a ulizao como um usurio, de forma automazada,
  • 8. 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 automao hap://www.w3.org/Status.html GTmetrix: analisa a velocidade/performance de uma pgina hap://planned.by/quickloja/ Browser Diet: guia para perder peso no browser hap://browserdiet.com/pt/
  • 9. Interao 1 Analise o site abaixo no GTMetrix. Vamos discur os resultados apresentados hap://planned.by/quickloja/
  • 10. Automao da UI Importante Pirmide de Automao de Teste Michel Cohn (Succeding with Agile) hap://www.mountaingoatso?ware.com/blog/the-forgoaen-layer-of-the-test-automaon-pyramid
  • 11. Validao na UI Smoke Tests xBrowser Tesng Visual Regression Tesng Slide roubadodo @stefanteixeira hap://goo.gl/WKGO7X
  • 12. Velocidade faz a diferena... E se voc executasse todos os testes funcionais automazados via interface grfica na sua build padro? Muita demora no feedback do ciclo de CI
  • 13. Vamos comear de tras pra frente... Xbowser Tesng com Selenium/WebDriver
  • 14. Selenium/WebDriver API mais usada para desenvolvimento de testes automazados 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
  • 15. Selenium/WebDriver Antes precisamos saber algumas coisas: - Fluxo de ulizao do usurio - Conhecer minimamente sobre HTML, CSS e JavaScript - Desenvolver em alguma linguagem e programao
  • 16. Interao 2 Manualmente... 1. Acessar a pgina hap://planned.by/quickloja/ 2. Preencher o campo usurio com elias.nogueira 3. Preencher o campo senha com 123 4. Clicar no boto Entrar
  • 17. Selenium/WebDriver
  • 18. Interao 3 Manualmente... 1. Acessar a pgina hap://planned.by/quickloja/ 2. Preencher o campo usurio com elias.nogueira 3. Preencher o campo senha com 123 4. Clicar no boto Entrar 5. Validar que est na rea de usurio (???)
  • 19. Selenium/WebDriver
  • 20. Selenium/WebDriver Mas se precisarmos executar mais aes? Exemplos: - Efetuar login e cadastrar um produto - Efetuar login e consultar o estoque
  • 21. Page Objects
  • 22. Page Objects Cada pgina vira uma classe com aes (simples ou em conjunto) O Teste consome cada pgina e monta o fluxo de execuo baseados pela pgina Ganho na centralizao da manuteno, com reduo na duplicao de cdigo
  • 23. Interao 4 Iremos transformar o Login em um Page Objects e criar uma classe de teste para a validao do login
  • 24. Selenium/WebDriver
  • 25. Interao 5 Crie um Page Objects para Categoria Iremos: 1. Efetuar o login 2. Cadastrar uma categoria
  • 26. Interao 5 Pagina Login Pagina Menu Pagina Login Pagina Nova Categoria Pagina Categoria Teste
  • 27. Vamos comear do comeo Smoke Tests
  • 28. Smoke Tests Pequeno conjunto de testes mais prioritrios O pensamento sem isso no funcionar nem adianta fazer o deploy Como em todos os outros testes, deve executar sempre o mais rpido possvel
  • 29. CasperJS Execuo via headless browser Uliza PhantomJS e SlimerJS (Gecko) para navegao e testes Escrita de cdigo em JavaScript Deixa a execuo muito mais rpida hap://casperjs.org
  • 30. CasperJS Porque executaramos testes headless? - Maior velocidade - Teste pode estar no ciclo de CI dirio - Sem dependncia de browser especfico
  • 31. Interao 6 Criaremos a validao do login com o CasperJS
  • 32. CasperJS
  • 33. Visual Regression Test Abordagem para: - Validar valores de CSS - Comparar Screenshots - Validar design responsivo Slide roubadodo @stefanteixeira hap://goo.gl/WKGO7X
  • 34. Visual Regression Test Slide roubadodo @stefanteixeira hap://goo.gl/WKGO7X
  • 35. Visual Regression Test Slide roubadodo @stefanteixeira hap://goo.gl/WKGO7X
  • 36. Contatos elias.nogueira@qualister.com.br @eliasnogueira linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira (48) 3285-5615