Automação de Teste em Front End - Caipira Ágil

1.088 visualizações

Publicada em

Apresentação no Caipira Ágil em 06/09/2014 referente a algumas formas de automação focada em front-end.

Automação de Teste em Front End - Caipira Ágil

  1. 1. 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
  2. 2. Existe um projeto no GitHub com o que foi desenvolvido durante o workshop h7ps://github.com/eliasnogueira/automacao-­‐fontend-­‐caipiraagil
  3. 3. www.qualister.com.br Fundada em 2007 Mais de 1.000 clientes em todo o Brasil Mais de 50 cursos sobre teste de soEware Mais de 3.000 alunos formados
  4. 4. 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
  5. 5. Teste Ágil Teste Ágil é uma práIca de Teste de SoKware que segue os princípios do desenvolvimento ágil
  6. 6. Teste Ágil
  7. 7. Estratégia Manutenibilidad e Portabilidade Baixo Nível Alto Nível
  8. 8. 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,
  9. 9. Dividindo em partes... W3Schools: verifica online HTML e CSS h7p://www.w3schools.com/website/web_validate.asp W3C Status: lista de diversos soEwares para automação h7p://www.w3.org/Status.html GTmetrix: analisa a velocidade/performance de uma página h7p://planned.by/quickloja/ Browser Diet: guia para perder peso no browser h7p://browserdiet.com/pt/
  10. 10. Interação 1 Analise o site abaixo no GTMetrix. Vamos discu_r os resultados apresentados h7p://planned.by/quickloja/
  11. 11. Automação da UI é Importante Pirâmide de Automação de Teste Michel Cohn (Succeding with Agile) h7p://www.mountaingoatsoEware.com/blog/the-­‐forgo7en-­‐layer-­‐of-­‐the-­‐test-­‐automa_on-­‐pyramid
  12. 12. Validação na UI Smoke Tests xBrowser Tes_ng Visual Regression Tes_ng Slide “roubado”do @stefanteixeira h7p://goo.gl/WKGO7X
  13. 13. 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
  14. 14. Vamos começar de tras pra frente... Xbowser Tes_ng com Selenium/WebDriver
  15. 15. 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) h7p://seleniumhq.org
  16. 16. 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
  17. 17. Interação 2 Manualmente... 1. Acessar a página h7p://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
  18. 18. Selenium/WebDriver
  19. 19. Interação 3 Manualmente... 1. Acessar a página h7p://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 (???)
  20. 20. Selenium/WebDriver
  21. 21. Selenium/WebDriver Mas se precisarmos executar mais ações? Exemplos: -­‐ Efetuar login e cadastrar um produto -­‐ Efetuar login e consultar o estoque
  22. 22. Page Objects
  23. 23. 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
  24. 24. Interação 4 Iremos transformar o Login em um Page Objects e criar uma classe de teste para a validação do login
  25. 25. Selenium/WebDriver
  26. 26. Interação 5 Crie um Page Objects para Categoria Iremos: 1. Efetuar o login 2. Cadastrar uma categoria
  27. 27. Interação 5 Pagina Login Pagina Menu Pagina Login Pagina Nova Categoria Pagina Categoria Teste
  28. 28. Vamos começar “do começo” Smoke Tests
  29. 29. 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
  30. 30. 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 h7p://casperjs.org
  31. 31. CasperJS Porque executaríamos testes headless? -­‐ Maior velocidade -­‐ Teste pode estar no ciclo de CI diário -­‐ Sem dependência de browser específico
  32. 32. Interação 6 Criaremos a validação do login com o CasperJS
  33. 33. CasperJS
  34. 34. Visual Regression Test Abordagem para: -­‐ Validar valores de CSS -­‐ Comparar Screenshots -­‐ Validar design responsivo Slide “roubado”do @stefanteixeira h7p://goo.gl/WKGO7X
  35. 35. Visual Regression Test Slide “roubado”do @stefanteixeira h7p://goo.gl/WKGO7X
  36. 36. Visual Regression Test Slide “roubado”do @stefanteixeira h7p://goo.gl/WKGO7X
  37. 37. Contatos elias.nogueira@qualister.com.br @eliasnogueira linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira (48) 3285-­‐5615

×