contato@qualister.com.br 
(48) 3285-5615 
twitter.com/qualister 
facebook.com/qualister 
linkedin.com/company/qualister 
A...
Existe 
um 
projeto 
no 
GitHub 
com 
o 
que 
foi 
desenvolvido 
durante 
o 
workshop 
h7ps://github.com/eliasnogueira/aut...
www.qualister.com.br 
Fundada 
em 
2007 
Mais 
de 
1.000 
clientes 
em 
todo 
o 
Brasil 
Mais 
de 
50 
cursos 
sobre 
test...
Front 
End 
x 
Back 
End 
Front 
End 
Tudo 
o 
que 
o 
usuário 
vê 
e 
consegue 
interagir. 
Geralmente 
criado 
(na 
web)...
Teste 
Ágil 
Teste 
Ágil 
é 
uma 
práIca 
de 
Teste 
de 
SoKware 
que 
segue 
os 
princípios 
do 
desenvolvimento 
ágil
Teste 
Ágil
Estratégia 
Manutenibilidad 
e 
Portabilidade 
Baixo 
Nível 
Alto 
Nível
Verificação 
Verificação 
Iremos 
verificar 
padrões 
de 
HTML, 
CSS, 
JavaScript 
e 
boas 
prá_cas 
para 
deixar 
o 
fron...
Dividindo 
em 
partes... 
W3Schools: 
verifica 
online 
HTML 
e 
CSS 
h7p://www.w3schools.com/website/web_validate.asp 
W3...
Interação 
1 
Analise 
o 
site 
abaixo 
no 
GTMetrix. 
Vamos 
discu_r 
os 
resultados 
apresentados 
h7p://planned.by/quic...
Automação 
da 
UI 
é 
Importante 
Pirâmide 
de 
Automação 
de 
Teste 
Michel 
Cohn 
(Succeding 
with 
Agile) 
h7p://www.mo...
Validação 
na 
UI 
Smoke 
Tests 
xBrowser 
Tes_ng 
Visual 
Regression 
Tes_ng 
Slide 
“roubado”do 
@stefanteixeira 
h7p://...
Velocidade 
faz 
a 
diferença... 
E 
se 
você 
executasse 
todos 
os 
testes 
funcionais 
automa_zados 
via 
interface 
gr...
Vamos 
começar 
de 
tras 
pra 
frente... 
Xbowser 
Tes_ng 
com 
Selenium/WebDriver
Selenium/WebDriver 
API 
mais 
usada 
para 
desenvolvimento 
de 
testes 
automa_zados 
em 
front 
end 
web 
Diversas 
APIs...
Selenium/WebDriver 
Antes 
precisamos 
saber 
algumas 
coisas: 
-­‐ 
Fluxo 
de 
u_lização 
do 
usuário 
-­‐ 
Conhecer 
min...
Interação 
2 
Manualmente... 
1. Acessar 
a 
página 
h7p://planned.by/quickloja/ 
2. Preencher 
o 
campo 
usuário 
com 
el...
Selenium/WebDriver
Interação 
3 
Manualmente... 
1. Acessar 
a 
página 
h7p://planned.by/quickloja/ 
2. Preencher 
o 
campo 
usuário 
com 
el...
Selenium/WebDriver
Selenium/WebDriver 
Mas 
se 
precisarmos 
executar 
mais 
ações? 
Exemplos: 
-­‐ 
Efetuar 
login 
e 
cadastrar 
um 
produt...
Page 
Objects
Page 
Objects 
Cada 
página 
vira 
uma 
classe 
com 
ações 
(simples 
ou 
em 
conjunto) 
O 
Teste 
consome 
cada 
página 
...
Interação 
4 
Iremos 
transformar 
o 
Login 
em 
um 
Page 
Objects 
e 
criar 
uma 
classe 
de 
teste 
para 
a 
validação 
...
Selenium/WebDriver
Interação 
5 
Crie 
um 
Page 
Objects 
para 
Categoria 
Iremos: 
1. Efetuar 
o 
login 
2. Cadastrar 
uma 
categoria
Interação 
5 
Pagina 
Login 
Pagina 
Menu 
Pagina 
Login 
Pagina 
Nova 
Categoria 
Pagina 
Categoria 
Teste
Vamos 
começar 
“do 
começo” 
Smoke 
Tests
Smoke 
Tests 
Pequeno 
conjunto 
de 
testes 
mais 
prioritários 
O 
pensamento 
é 
“sem 
isso 
não 
funcionar 
nem 
adiant...
CasperJS 
Execução 
via 
headless 
browser 
U_liza 
PhantomJS 
e 
SlimerJS 
(Gecko) 
para 
navegação 
e 
testes 
Escrita 
...
CasperJS 
Porque 
executaríamos 
testes 
headless? 
-­‐ 
Maior 
velocidade 
-­‐ 
Teste 
pode 
estar 
no 
ciclo 
de 
CI 
di...
Interação 
6 
Criaremos 
a 
validação 
do 
login 
com 
o 
CasperJS
CasperJS
Visual 
Regression 
Test 
Abordagem 
para: 
-­‐ 
Validar 
valores 
de 
CSS 
-­‐ 
Comparar 
Screenshots 
-­‐ 
Validar 
desi...
Visual 
Regression 
Test 
Slide 
“roubado”do 
@stefanteixeira 
h7p://goo.gl/WKGO7X
Visual 
Regression 
Test 
Slide 
“roubado”do 
@stefanteixeira 
h7p://goo.gl/WKGO7X
Contatos 
elias.nogueira@qualister.com.br 
@eliasnogueira 
linkedin.com/in/eliasnoguiera 
slideshare.net/eliasnogueira 
(4...
Próximos SlideShares
Carregando em…5
×

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

1.028 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

×