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.

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

17. Selenium/WebDriver

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. Selenium/WebDriver

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

24. Selenium/WebDriver

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