Caipira agil automacao front end selenium
-
Upload
qualister -
Category
Technology
-
view
729 -
download
5
description
Transcript of Caipira agil automacao front end selenium
![Page 1: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/1.jpg)
[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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/2.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/3.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/4.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/5.jpg)
Teste Ágil
![Page 6: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/6.jpg)
Estratégia
Manutenibilida
d
e!Portabilidade!Baixo!
Nível!Alto!Nível!
![Page 7: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/7.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/8.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/9.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/10.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/11.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/12.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/13.jpg)
Vamos começar de tras pra frente...
Xbowser Tes\ng com Selenium/WebDriver
![Page 14: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/14.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/15.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/16.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/17.jpg)
Selenium/WebDriver
![Page 18: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/18.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/19.jpg)
Selenium/WebDriver
![Page 20: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/20.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/21.jpg)
Page Objects
![Page 22: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/22.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/23.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/24.jpg)
Selenium/WebDriver
![Page 25: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/25.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/26.jpg)
Interação 5
Pagina Login
Pagina Menu
Pagina Login
Pagina Categoria
Pagina Nova Categoria
Teste
![Page 27: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/27.jpg)
Vamos começar “do começo”
Smoke Tests
![Page 28: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/28.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/29.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/30.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/31.jpg)
Interação 6
Criaremos a validação do login com o CasperJS
![Page 32: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/32.jpg)
CasperJS
![Page 33: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/33.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/34.jpg)
Visual Regression Test
Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
![Page 35: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/35.jpg)
Visual Regression Test
Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
![Page 36: Caipira agil automacao front end selenium](https://reader031.fdocument.pub/reader031/viewer/2022012405/54627441b1af9f936c8b4ff4/html5/thumbnails/36.jpg)
Contatos
[email protected] @eliasnogueira
linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira
(48) 3285-‐5615