Automação de front-end Web

com métodos Ágeis

Elias Nogueira
elias.nogueira@qualister.com.br / @eliasnogueira

contato@qualister.com.br

(48) 3285-5615

twitter.com/qualister

facebook.com/qualister

linkedin.com/company/qualister
 www.qualister.com.br

Fundada em 2007
Mais de 1.000 clientes em todo o Brasil
Mais de 50 cursos sobre teste de software
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ática de Teste

de Software que segue os princípios
do desenvolvimento ágil
Teste Ágil
Estratégia

Baixo Alto
Nível Nível
 Verificação

Verificação
Iremos verificar padrões de HTML, CSS, JavaScript e boas práticas
para deixar o front-end mais leve.

Validação
Iremos validar se a aplicação funciona como especificado
simulando a utilização como um usuário, de forma automatizada,
 Dividindo em partes...

W3Schools: verifica online HTML e CSS

http://www.w3schools.com/website/web_validate.asp

W3C Status: lista de diversos softwares para automação

http://www.w3.org/Status.html

GTmetrix: analisa a velocidade/performance de uma página

http://planned.by/quickloja/

Browser Diet: guia para perder peso no browser

http://browserdiet.com/pt/
 Interação 1

Analise o site abaixo no GTMetrix.

Vamos discutir os resultados apresentados

http://planned.by/quickloja/
 Automação da UI é
Importante
Pirâmide de Automação de Teste
Michel Cohn (Succeding with Agile)

http://www.mountaingoatsoftware.com/blog/the-forgotten-layer-of-the-test-automation-pyramid
 Validação na UI

Smoke Tests

xBrowser Testing

Visual Regression Testing

Slide “roubado”do @stefanteixeira http://goo.gl/WKGO7X

 Velocidade faz a
diferença...
E se você executasse todos os testes funcionais
automatizados 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 Testing com Selenium/WebDriver

 Selenium/WebDriver

API mais usada para desenvolvimento de testes

automatizados em front end web

Diversas APIs/Frameworks usam ele “por baixo dos panos”

Suporte nas principais linguagems

Java, C#, Ruby, Python, JavaScript (Node.js)

http://seleniumhq.org
 Selenium/WebDriver

Antes precisamos saber algumas coisas:

- Fluxo de utilizaçã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 http://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 http://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

Teste Pagina Login

Pagina Login Pagina Nova Categoria

Pagina Menu Pagina Categoria

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

Utiliza PhantomJS e SlimerJS (Gecko) para navegação e testes

Escrita de código em JavaScript

Deixa a execução muito mais rápida

http://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 http://goo.gl/WKGO7X

 Visual Regression Test

Slide “roubado”do @stefanteixeira http://goo.gl/WKGO7X

 Visual Regression Test

Slide “roubado”do @stefanteixeira http://goo.gl/WKGO7X

 Contatos
elias.nogueira@qualister.com.br
@eliasnogueira
linkedin.com/in/eliasnoguiera
slideshare.net/eliasnogueira
(48) 3285-5615