Automação de Teste em Front End - Caipira Ágil

[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






Contatos

[email protected] @eliasnogueira

linkedin.com/in/eliasnoguiera slideshare.net/eliasnogueira

(48) 3285-‐5615

Documents

Automação de Teste em Front End - Caipira Ágil