Testando frontend
Utilizando ferramentas JS
https://slimerjs.org/
http://phantomjs.org/
CasperJS
Script de navegação e testes para
PhantomJS e SlimerJS
http://casperjs.org/
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?
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?
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'
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)
Estrutura do teste
start(String url[, Function then])
run(fn onComplete[, int time])
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()
Exemplo de teste
Executando o teste
casper test <seu arquivo JS>
Resultado do teste formulado:
setUP e tearDown
Exemplo de teste
Screenshot
http://casperjs.readthedocs.org/

Testando frontend utilizando ferraments JS