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

Existe
um
projeto
no
GitHub
com
o
que
foi
desenvolvido
durante
o
workshop
h7ps://github.com/eliasnogueira/automacao-­‐fontend-­‐caipiraagil

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

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

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

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/

Interação
1
Analise
o
site
abaixo
no
GTMetrix.
Vamos
discu_r
os
resultados
apresentados
h7p://planned.by/quickloja/

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

Validação
na
UI
Smoke
Tests
xBrowser
Tes_ng
Visual
Regression
Tes_ng
Slide
“roubado”do
@stefanteixeira
h7p://goo.gl/WKGO7X

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

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/Frameworks
usam
ele
“por
baixo
dos
panos”
Suporte
nas
principais
linguagems
Java,
C#,
Ruby,
Python,
JavaScript
(Node.js)
h7p://seleniumhq.org

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

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

Selenium/WebDriver

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
(???)

Selenium/WebDriver

Selenium/WebDriver
Mas
se
precisarmos
executar
mais
ações?
Exemplos:
-­‐
Efetuar
login
e
cadastrar
um
produto
-­‐
Efetuar
login
e
consultar
o
estoque

Page
Objects

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

Interação
4
Iremos
transformar
o
Login
em
um
Page
Objects
e
criar
uma
classe
de
teste
para
a
validação
do
login

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
adianta
fazer
o
deploy”
Como
em
todos
os
outros
testes,
deve
executar
sempre
o
mais
rápido
possível

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

CasperJS
Porque
executaríamos
testes
headless?
-­‐
Maior
velocidade
-­‐
Teste
pode
estar
no
ciclo
de
CI
diário
-­‐
Sem
dependência
de
browser
específico

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
design
responsivo
Slide
“roubado”do
@stefanteixeira
h7p://goo.gl/WKGO7X

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
(48)
3285-­‐5615