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. Existe
um
projeto
no
GitHub
com
o
que
foi
desenvolvido
durante
o
workshop
h7ps://github.com/eliasnogueira/automacao-‐fontend-‐caipiraagil
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. 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. Teste
Ágil
Teste
Ágil
é
uma
práIca
de
Teste
de
SoKware
que
segue
os
princípios
do
desenvolvimento
ágil
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. 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. Interação
1
Analise
o
site
abaixo
no
GTMetrix.
Vamos
discu_r
os
resultados
apresentados
h7p://planned.by/quickloja/
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
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. Vamos
começar
de
tras
pra
frente...
Xbowser
Tes_ng
com
Selenium/WebDriver
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. 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. 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
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
(???)
21. Selenium/WebDriver
Mas
se
precisarmos
executar
mais
ações?
Exemplos:
-‐
Efetuar
login
e
cadastrar
um
produto
-‐
Efetuar
login
e
consultar
o
estoque
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. Interação
4
Iremos
transformar
o
Login
em
um
Page
Objects
e
criar
uma
classe
de
teste
para
a
validação
do
login
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. 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. CasperJS
Porque
executaríamos
testes
headless?
-‐
Maior
velocidade
-‐
Teste
pode
estar
no
ciclo
de
CI
diário
-‐
Sem
dependência
de
browser
específico