tutorial - visão sobre automação de testes com casperjs
TRANSCRIPT
![Page 1: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/1.jpg)
TutorialAutomação de Testes e
CasperJS
![Page 2: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/2.jpg)
• Visão sobre Automação de Testes
• Processo de Automação de Testes
• Manipulação de Elementos
• CasperJS
• Referências
Ementa
![Page 3: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/3.jpg)
• Formação: Ciência da Computação (UNITRI)
• Pós-Graduação: Gerenciamento de Projetos em TI (UNITRI)
• Pós-Graduação: Teste de Software (UNIEURO)
• Certificado ALATS - CTBS
• Certificado ISTQB – CTFL
• + de 4 anos na área de Testes e Qualidade de Software
Apresentação
• Frederico Allan de Souza
https://www.linkedin.com/pub/frederico-allan
![Page 4: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/4.jpg)
• Pra que automatizar? • Tarefas repetitivas
• Garantir continuidade do negócio
• Reduzir esforço e custo
• Confiabilidade no código fonte
Visão sobre Automação de Testes
![Page 5: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/5.jpg)
• Áreas de atuação Testes Automatizados
• Realizar testes que passem por todas as camadas
• Foco nos principais processos de negócio
• Utilizar ferramentas com reaproveitamento de código e fácil manutenção.
Visão sobre Automação de Testes
UI
Services
Unit
![Page 6: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/6.jpg)
Planejamento e priorização
Ambiente de Testes e Massa de Dados
Construção Scripts (Ações do usuário)
Inserção dos Pontos de Verificação (Asserts)
Execução dos Scripts
Refatoração
Inserção em um ambiente de
integração contínua
Análise dos resultados
Manutenção
Processo de Automação de Teste
![Page 7: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/7.jpg)
• Roteiro/Passos:
1. Cadastrar um produto
2. Cadastrar preço
3. Entrar com produto no estoque
4. Consultar o estoque
Processo de Automação de Teste
• Planejamento e “roteirização” do Teste
![Page 8: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/8.jpg)
• Fluxogramas / Processos de Negócio
• Casos de Uso
Processo de Automação de Teste
![Page 9: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/9.jpg)
• Considerações nesta fase:
– Identificar o comportamento do sistema como um usuário normal:
• Transições de tela
• Pop-ups
• Mensagens de Alerta e validação
• etc
Processo de Automação de Teste
![Page 10: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/10.jpg)
• Exercitando:
– Vamos analisar o comportamento do sistema ao Cadastrar usuário com sucesso no redmine demo.
Processo de Automação de Teste
![Page 11: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/11.jpg)
1. Entrar na pagina http://demo.redmine.org/login
2. cadastrar um usuário (Cadastre-se)
Usuário:sbx0
Senha:sbx0
Confirmação:sbx0
Nome: sbx0
Sobrenome: sbx0
Email: [email protected]
Indioma: Portuguese (Brazil)
Qual o comportamento do sistema?
Como, você usuário, identifica que o cadastro foi realizado?
Processo de Automação de Teste
![Page 12: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/12.jpg)
• Ferramentas manipulam tela através dos elementos html
• Principais formas:
– Navegando até o xpath do elemento://div/p[2]
- Atributos do elementoclass=“intro”
id=“my-Adrdress”
Manipulação dos Elementos na Página
![Page 13: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/13.jpg)
• Principais formas de acesso nos elementos html em ferramentas de teste web:
– Seletores CSS
– id
– class
– por atributo
– contains
– etc
Manipulação dos Elementos na Página
![Page 14: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/14.jpg)
• Executando código jquery na página:
- Os elementos html podem possuir eventos e funções javascript ou jquery que podem ser chamados via “console”. Ex:
- $(“button#salvar”).click();
- $(“input#login”).val(“admin”);
- $(“label#usuario”).text(“User”);
- Fazer Testes!
Manipulação dos Elementos na Página
![Page 15: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/15.jpg)
• Pense nas inúmeras funções que um código em javascript chamar dentro da página e a manipulação que pode efetuar nos elementos html.
Manipulação dos Elementos na Página
![Page 16: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/16.jpg)
• Agora pense numa ferramenta de testes que executa javascript, manipula os objetos html, injeta código, usa as próprias funções da página.
Manipulação dos Elementos na Página
![Page 17: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/17.jpg)
• Agora imagine uma ferramenta de testes totalmente baseada em javascript!
Manipulação dos Elementos na Página
![Page 18: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/18.jpg)
• Ferramenta opensource de teste desenvolvido em javascript para o PhantomJS.
• É executado pelo browser “webkit” via headless.
– Defini e ordena os passos de navegação
– Preenchimento de formulários
– Clicks
– Captura screenshots da página ou parte dela
– Testa DOM remoto
CasperJS
![Page 19: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/19.jpg)
– Log de eventos
– Download de recursos, incluindo os binários
– Escreve um conjunto de testes funcionais, poupando resultados como JUnit e XML
CasperJS
![Page 20: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/20.jpg)
• Instalação Windows:
1. baixe a ultima versão do arquivo .zip na página casperjs.org
2. descompacte a pasta no c:\ com o nome de “casperjs”
3. altere a variável de ambiente “path” incluindo o diretório da pasta bin do casperjs
CasperJS
![Page 21: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/21.jpg)
• Faça o mesmo para o phantomjs:
1. baixe a ultima versão do arquivo .zip na página do phantomjs
2. descompacte a pasta no c:\ com o nome de “phantomjs”
3. altere a variável de ambiente “path” incluindo o diretório da pasta do phantomjs
CasperJS
![Page 22: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/22.jpg)
• Instale a versão do .net 3.5 ou a mais recente
– http://www.microsoft.com/pt-br/search/Results.aspx?q=.net
CasperJS
![Page 23: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/23.jpg)
• Efetue o teste abrindo o prompt do ms-dos e digite:
>casperjs --version
>phantomjs --version
CasperJS
![Page 24: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/24.jpg)
• Guia rápido:
– Escolha um editor js e escreva um arquivo teste.jscom o código abaixo:
– Execute-o com:
• >casperjs <nome_arquivo.js>
CasperJS
![Page 25: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/25.jpg)
• Nós teremos o seguinte:
• Colocar o resultado do teste
• O que significa o nosso código de teste?
CasperJS
![Page 26: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/26.jpg)
1. criação da instancia casper
2. Inicio dos testes e abertura da url
– Uma vez a página aberta capturamos o título da página
– <title> my page</title>
3. Abrimos outra url
– Capturamos o título da página
4. Executamos todas as funções acima.
CasperJS
![Page 27: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/27.jpg)
• Pergunta!
No exemplo acima executamos um teste?
CasperJS
![Page 28: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/28.jpg)
• Não!!!
• Testes precisam de validações (asserções) que garantam, visualmente, que o sistema responde de forma correta!
CasperJS
![Page 29: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/29.jpg)
• Casper possui módulos de teste que fazem asserções nos elementos e validam textos, títulos da página, valores dentro de campos, nome de botões etc. Ex:
CasperJS
![Page 30: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/30.jpg)
• Documentação
CasperJS
![Page 31: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/31.jpg)
• Sua API é dividida nas funções:
CasperJS
![Page 32: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/32.jpg)
• casper:
– Comportamento do teste
– Funções utilitárias
– Timers e validações de espera de transição
– etc
CasperJS
![Page 33: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/33.jpg)
• clientUtils:
– O que pode ser executado no front-end
• Com a função “Evaluate” o casper injeta “__utils” dentro da página e utiliza suas funçoes. Neste caso acima, utiliza o “.echo”
CasperJS
![Page 34: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/34.jpg)
• clientUtils: • Perceba que o módulo “__utils__” não está disponível
na página quando abrimos normalmente:
CasperJS
![Page 35: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/35.jpg)
• mouse:
– Abstração das operações com mouse como click, move, doubleclick
CasperJS
![Page 36: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/36.jpg)
• colorizer:
– Coloração diferenciada nos print’s de execução
CasperJS
Note
Most of the time you won’t have
to use a Colorizer instance
directly as CasperJS provides
all the necessary methods.
![Page 37: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/37.jpg)
• tester:
– Funções para validar conteúdo, textos, atributos, valores dos elementos html.
CasperJS
![Page 38: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/38.jpg)
• Agora na estrutura de uma suíte de teste:
CasperJS
Teste!
![Page 39: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/39.jpg)
• Nota:– O then do método thenOpen significa que o script precisa
esperar o método anterior terminar para então partir parao próximo passo, pois este é o fluxo de navegação.
– Como cada página tem um tempo de carregamentodiferente, o CasperJS precisa deste mecanismo paracontrolar o fluxo de execução.
CasperJS
![Page 40: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/40.jpg)
CasperJS
Execute este código e perceba as execuções
que foram feitas de forma assíncronas!
![Page 41: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/41.jpg)
1. Exercício: criar o caso de teste conforme nossos exercícios anteriores
2. Execute-o no cmd: >casperjs test arquivo.js
CasperJS
1. Entrar na pagina http://demo.redmine.org/login
2. cadastrar um usuário (Cadastre-se)
Usuário:sbx0
Senha:sbx0
Confirmação:soft@123
Nome: sbx0
Sobrenome: sbx0
Email: [email protected]
Indioma: Portuguese (Brazil)
3. Visualizar “Minha Conta”
4. Logar com o usuário.
5. Excluir a conta
6. Logar com o usuário.
![Page 42: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/42.jpg)
CasperJS
![Page 43: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/43.jpg)
CasperJS
![Page 44: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/44.jpg)
CasperJS
![Page 45: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/45.jpg)
CasperJS
![Page 46: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/46.jpg)
CasperJS
![Page 47: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/47.jpg)
CasperJS
![Page 48: Tutorial - Visão sobre Automação de Testes com CasperJS](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a9ee891a28ab27248b46c7/html5/thumbnails/48.jpg)
• Introdução a Automação de teste
– http://www.qualister.com.br/blog/introducao-a-automacao-de-testes
• Melhorando sua Estratégia de Testes Automatizados
– http://stefanteixeira.com.br/2014/04/22/melhorando-sua-estrategia-de-testes-automatizados/
• Seletores CSS 2.1 - Parte 1
– http://maujor.com/tutorial/seletores_css21_parte1.php
• W3Schools
– http://www.w3schools.com/
• CasperJS.org
– http://casperjs.org
• PhantomJS.org
– http://phantomjs.org/
• Testes Funcionais com CasperJS
– http://imasters.com.br/front-end/javascript/testes-funcionais-com-casperjs/
Referências