Testando Frontend

Testando seu front utilizando ferramentas para teste javascript

Transcript

1. Testando frontend Utilizando ferramentas JS
2. https://slimerjs.org/ http://phantomjs.org/ CasperJS Script de navegação e testes para PhantomJS e SlimerJS http://casperjs.org/
4. Pensando seu teste • O que vai ser testado? • É um fluxo padrão? É possível reproduzir? • É realmente necessário este teste? Vai adicionar valor ao produto?
5. Mapeando o fluxo a ser testado • Qual página devo abrir? • Qual o http-code esperado? • Quais elementos deveriam aparecer na tela? • Qual o comportamento esperado ao clicar em algum elemento?
7. Formulando um caso de teste 1. http-code 200 2. Título da página igual a: 'Fernando Fabricio' 3. Tag h1 com o conteúdo: 'Fernando Fabricio'
8. Criando o teste begin(String description, Number planned, Function suite) begin(String description, Function suite) begin(String description, Number planned, Object config) begin(String description, Object config)
9. Estrutura do teste start(String url[, Function then]) run(fn onComplete[, int time])
10. Assertions assert() assertDoesntExist() assertEquals() assertEval() assertEvalEquals() assertElementCount() assertExists() assertFalsy() assertField() assertFieldName() assertFieldCSS() assertFieldXPath() assertHttpStatus() assertMatch() assertNot() assertNotEquals() assertNotVisible() assertRaises() assertSelectorDoesntHaveText() assertSelectorHasText() assertResourceExists() assertTextExists() assertTextDoesntExist() assertTitle() assertTitleMatch() assertTruthy() assertType() assertInstanceOf() assertUrlMatch() assertVisible()
11. Exemplo de teste
12. Executando o teste casper test <seu arquivo JS> Resultado do teste formulado:
13. setUP e tearDown
15. Exemplo de teste
17. Screenshot
19. http://casperjs.readthedocs.org/