Download - Caipira agil automacao front end selenium
[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
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
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áDca de Teste de SoFware que segue os princípios do desenvolvimento ágil
Teste Ágil
Estratégia
Manutenibilida
d
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 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/
Interação 1
Analise o site abaixo no GTMetrix. Vamos discu\r os resultados apresentados hap://planned.by/quickloja/
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-‐automa\on-‐pyramid
Validação na UI
Smoke Tests xBrowser Tes\ng Visual Regression Tes\ng
Slide “roubado”do @stefanteixeira hap://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) hap://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 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
Selenium/WebDriver
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 (???)
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 hap://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 hap://goo.gl/WKGO7X
Visual Regression Test
Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
Visual Regression Test
Slide “roubado”do @stefanteixeira hap://goo.gl/WKGO7X
Contatos
[email protected] @eliasnogueira
linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira
(48) 3285-‐5615