Testes de frontend utilizando casperjs para navegar pelas páginas e fazer os asserts necessários.

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/