Tutorial - Visão sobre Automação de Testes com CasperJS

753 visualizações

Publicada em

Tutorial - Visão sobre Automação de Testes com CasperJS

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
753
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tutorial - Visão sobre Automação de Testes com CasperJS

  1. 1. Tutorial Automação de Testes e CasperJS
  2. 2. • Visão sobre Automação de Testes • Processo de Automação de Testes • Manipulação de Elementos • CasperJS • Referências Ementa
  3. 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. 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. 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. 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. 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. 8. • Fluxogramas / Processos de Negócio • Casos de Uso Processo de Automação de Teste
  9. 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. 10. • Exercitando: – Vamos analisar o comportamento do sistema ao Cadastrar usuário com sucesso no redmine demo. Processo de Automação de Teste
  11. 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. 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. 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. 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. 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. 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. 17. • Agora imagine uma ferramenta de testes totalmente baseada em javascript! Manipulação dos Elementos na Página
  18. 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. 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. 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. 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. 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. 23. • Efetue o teste abrindo o prompt do ms-dos e digite: >casperjs --version >phantomjs --version CasperJS
  24. 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. 25. • Nós teremos o seguinte: • Colocar o resultado do teste • O que significa o nosso código de teste? CasperJS
  26. 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. 27. • Pergunta! No exemplo acima executamos um teste? CasperJS
  28. 28. • Não!!! • Testes precisam de validações (asserções) que garantam, visualmente, que o sistema responde de forma correta! CasperJS
  29. 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. 30. • Documentação CasperJS
  31. 31. • Sua API é dividida nas funções: CasperJS
  32. 32. • casper: – Comportamento do teste – Funções utilitárias – Timers e validações de espera de transição – etc CasperJS
  33. 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. 34. • clientUtils: • Perceba que o módulo “__utils__” não está disponível na página quando abrimos normalmente: CasperJS
  35. 35. • mouse: – Abstração das operações com mouse como click, move, doubleclick CasperJS
  36. 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. 37. • tester: – Funções para validar conteúdo, textos, atributos, valores dos elementos html. CasperJS
  38. 38. • Agora na estrutura de uma suíte de teste: CasperJS Teste!
  39. 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. 40. CasperJS Execute este código e perceba as execuções que foram feitas de forma assíncronas!
  41. 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. 42. CasperJS
  43. 43. CasperJS
  44. 44. CasperJS
  45. 45. CasperJS
  46. 46. CasperJS
  47. 47. CasperJS
  48. 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

×