[email protected] (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 [email protected] / @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
Manutenibilida
d
ePortabilidadeBaixo
NívelAltoNí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 Categoria
Pagina Nova 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
[email protected] @eliasnogueira
linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira
(48) 3285-‐5615
Recommended