Caipira agil automacao front end selenium

4.033 visualizações

Publicada em

Caipira agil automacao front end selenium qualister

Publicada em: Tecnologia
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.033
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.434
Ações
Compartilhamentos
0
Downloads
37
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Caipira agil automacao front end selenium

  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. 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. 3. 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
  4. 4. Teste Ágil Teste Ágil é uma práDca de Teste de SoFware que segue os princípios do desenvolvimento ágil
  5. 5. Teste Ágil
  6. 6. Estratégia Manutenibilidad e! Portabilidade! Baixo! Nível! Alto! Nível!
  7. 7. 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 ulização como um usuário, de forma automazada,
  8. 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 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/
  9. 9. Interação 1 Analise o site abaixo no GTMetrix. Vamos discur os resultados apresentados hap://planned.by/quickloja/
  10. 10. 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-­‐automaon-­‐pyramid
  11. 11. Validação na UI Smoke Tests xBrowser Tesng Visual Regression Tesng Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
  12. 12. Velocidade faz a diferença... E se você executasse todos os testes funcionais automazados via interface gráfica na sua build padrão? Muita demora no feedback do ciclo de CI
  13. 13. Vamos começar de tras pra frente... Xbowser Tesng com Selenium/WebDriver
  14. 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. 15. Selenium/WebDriver Antes precisamos saber algumas coisas: -­‐ Fluxo de ulização do usuário -­‐ Conhecer minimamente sobre HTML, CSS e JavaScript -­‐ Desenvolver em alguma linguagem e programação
  16. 16. 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
  17. 17. Selenium/WebDriver
  18. 18. 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 (???)
  19. 19. Selenium/WebDriver
  20. 20. Selenium/WebDriver Mas se precisarmos executar mais ações? Exemplos: -­‐ Efetuar login e cadastrar um produto -­‐ Efetuar login e consultar o estoque
  21. 21. Page Objects
  22. 22. 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
  23. 23. Interação 4 Iremos transformar o Login em um Page Objects e criar uma classe de teste para a validação do login
  24. 24. Selenium/WebDriver
  25. 25. Interação 5 Crie um Page Objects para Categoria Iremos: 1. Efetuar o login 2. Cadastrar uma categoria
  26. 26. Interação 5 Pagina Login Pagina Menu Pagina Login Pagina Nova Categoria Pagina Categoria Teste
  27. 27. Vamos começar “do começo” Smoke Tests
  28. 28. 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
  29. 29. CasperJS Execução via headless browser Uliza 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
  30. 30. CasperJS Porque executaríamos testes headless? -­‐ Maior velocidade -­‐ Teste pode estar no ciclo de CI diário -­‐ Sem dependência de browser específico
  31. 31. Interação 6 Criaremos a validação do login com o CasperJS
  32. 32. CasperJS
  33. 33. Visual Regression Test Abordagem para: -­‐ Validar valores de CSS -­‐ Comparar Screenshots -­‐ Validar design responsivo Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
  34. 34. Visual Regression Test Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
  35. 35. Visual Regression Test Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
  36. 36. Contatos elias.nogueira@qualister.com.br @eliasnogueira linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira (48) 3285-­‐5615

×