Caipira agil automacao front end selenium
4 gostaram5,774 visualizações
O documento fornece informações sobre automação de testes front-end com métodos ágeis. Apresenta conceitos como front-end, back-end, teste ágil, estratégias de teste, ferramentas como Selenium e CasperJS e técnicas como page objects, smoke tests e testes de regressão visual.
Caipira agil automacao front end selenium
- 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. 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 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. Teste Ágil Teste Ágil é uma práDca de Teste de SoFware que segue os princípios do desenvolvimento ágil
- 5. Teste Ágil
- 6. Estratégia Manutenibilidad e! Portabilidade! Baixo! Nível! Alto! Nível!
- 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. 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. Interação 1 Analise o site abaixo no GTMetrix. Vamos discur os resultados apresentados hap://planned.by/quickloja/
- 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. Validação na UI Smoke Tests xBrowser Tesng Visual Regression Tesng Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
- 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. Vamos começar 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 ulização do usuário -‐ Conhecer minimamente sobre HTML, CSS e JavaScript -‐ Desenvolver em alguma linguagem e programação
- 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
- 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 (???)
- 20. Selenium/WebDriver Mas se precisarmos executar mais ações? Exemplos: -‐ Efetuar login e cadastrar um produto -‐ Efetuar login e consultar o estoque
- 21. Page Objects
- 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. Interação 4 Iremos transformar o Login em um Page Objects e criar uma classe de teste para a validação do login
- 25. Interação 5 Crie um Page Objects para Categoria Iremos: 1. Efetuar o login 2. Cadastrar uma categoria
- 26. Interação 5 Pagina Login Pagina Menu Pagina Login Pagina Nova Categoria Pagina Categoria Teste
- 27. Vamos começar “do começo” Smoke Tests
- 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. 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. 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. Interação 6 Criaremos a validação do login com o CasperJS
- 32. CasperJS
- 33. Visual Regression Test Abordagem para: -‐ Validar valores de CSS -‐ Comparar Screenshots -‐ Validar design responsivo Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
- 34. Visual Regression Test Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
- 35. Visual Regression Test Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
- 36. Contatos elias.nogueira@qualister.com.br @eliasnogueira linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira (48) 3285-‐5615