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
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
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
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
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