O documento apresenta um tutorial sobre automação de testes com a ferramenta CasperJS. Aborda conceitos como visão sobre automação de testes, processo de automação, manipulação de elementos na página e detalha o uso da ferramenta CasperJS, incluindo instalação e exemplo de teste.

1. Tutorial
Automação de Testes e
CasperJS

2. • Visão sobre Automação de Testes
• Processo de Automação de Testes
• Manipulação de Elementos
• CasperJS
• Referências
Ementa

3. • 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
fredericoallansouza@gmail.com

4. • 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

5. • Á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

6. 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

7. • 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

8. • Fluxogramas / Processos de Negócio
• Casos de Uso
Processo de Automação de Teste

9. • 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

10. • Exercitando:
– Vamos analisar o comportamento do sistema ao
Cadastrar usuário com sucesso no redmine demo.
Processo de Automação de Teste

11. 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: sbx0@sbx0.com
 Indioma: Portuguese (Brazil)
 Qual o comportamento do sistema?
 Como, você usuário, identifica que o cadastro foi
realizado?
Processo de Automação de Teste

12. • Ferramentas manipulam tela através dos
elementos html
• Principais formas:
– Navegando até o xpath do elemento:
//div/p[2]
- Atributos do elemento
class=“intro”
id=“my-Adrdress”
Manipulação dos Elementos na Página

13. • 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

14. • 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

15. • 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

16. • 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

17. • Agora imagine uma
ferramenta de testes
totalmente baseada em
javascript!
Manipulação dos Elementos na Página

18. • 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

19. – Log de eventos
– Download de recursos, incluindo os binários
– Escreve um conjunto de testes funcionais,
poupando resultados como JUnit e XML
CasperJS

20. • 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

21. • 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

22. • Instale a versão do .net 3.5 ou a mais recente
– http://www.microsoft.com/pt-br/search/Results.aspx?q=.net
CasperJS

23. • Efetue o teste abrindo o prompt do ms-dos e
digite:
>casperjs --version
>phantomjs --version
CasperJS

24. • Guia rápido:
– Escolha um editor js e escreva um arquivo teste.js
com o código abaixo:
– Execute-o com:
• >casperjs <nome_arquivo.js>
CasperJS

25. • Nós teremos o seguinte:
• Colocar o resultado do teste
• O que significa o nosso código de teste?
CasperJS

26. 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

27. • Pergunta!
No exemplo acima
executamos um teste?
CasperJS

28. • Não!!!
• Testes precisam de validações (asserções) que
garantam, visualmente, que o sistema
responde de forma correta!
CasperJS

29. • 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

30. • Documentação
CasperJS

31. • Sua API é dividida nas funções:
CasperJS

32. • casper:
– Comportamento do teste
– Funções utilitárias
– Timers e validações de espera de transição
– etc
CasperJS

33. • 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

34. • clientUtils:
• Perceba que o módulo “__utils__” não está disponível
na página quando abrimos normalmente:
CasperJS

35. • mouse:
– Abstração das operações com mouse como click,
move, doubleclick
CasperJS

36. • 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.

37. • tester:
– Funções para validar conteúdo, textos, atributos,
valores dos elementos html.
CasperJS

38. • Agora na estrutura de uma suíte de teste:
CasperJS
Teste!

39. • Nota:
– O then do método thenOpen significa que o script precisa
esperar o método anterior terminar para então partir para
o próximo passo, pois este é o fluxo de navegação.
– Como cada página tem um tempo de carregamento
diferente, o CasperJS precisa deste mecanismo para
controlar o fluxo de execução.
CasperJS

40. CasperJS
Execute este código e perceba as execuções
que foram feitas de forma assíncronas!

41. 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: sbx0@sbx0.com
 Indioma: Portuguese (Brazil)
3. Visualizar “Minha Conta”
4. Logar com o usuário.
5. Excluir a conta
6. Logar com o usuário.

42. CasperJS

43. CasperJS

44. CasperJS

45. CasperJS

46. CasperJS

47. CasperJS

48. • 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