Testando frontendUtilizando ferramentas JS

https://slimerjs.org/

http://phantomjs.org/

CasperJSScript 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])

Assertionsassert()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/