backbone / casperjs / end to end / javascript / testing

Teste de ponta a ponta com CasperJS

Introdução

Esta dica profissional irá guiá-lo através das etapas de implementação de um teste de ponta a ponta usando o CasperJS. Embora não haja nenhum código específico para o Backbone neste tutorial, faço suposições sobre como um aplicativo irá operar dentro do contexto de um aplicativo do Backbone.
Este tutorial é, portanto, adequado para quem deseja um guia de introdução ao CasperJS de 0 a 20 anos.

Para quem isto foi escrito

Esta dica profissional foi escrita para desenvolvedores de javascript intermediários e superiores que se sentem confortáveis ​​com o Backbone e têm alguma experiência com frameworks de teste como Mocha ou Jasmine.

Tecnologia

Para fazer isso, usaremos:

  • PhantomJS – atua como um navegador para executar testes.

  • CasperJS – construído para PhantomJS, oferece alguns utilitários interessantes para teste, como cliques e eventos de registro.

Etapa 1 – Instale o PhantomJS

Se você estiver usando o NPM.

$ npm install phantomjs -g

Caso contrário, baixe aqui

Para testar se o PhantomJS foi instalado e está acessível através do seu terminal:

phantomjs -v

Isso deve retornar o número da versão

Escreva seu primeiro script de teste PhantomJS hello world. Crie um arquivo “test.js” com o seguinte:

console.log("Hello PhantomJS");

Para executar, vá para o console e digite o seguinte:

phantomjs test.js

Etapa 2 – Instale o CasperJS

Se você estiver usando o NPM.

$ npm install casperjs -g

Caso contrário, verifique a documentação de instalação aqui .

Para testar se o CasperJS está instalado e acessível através do seu terminal:

casperjs -version

Isso deve retornar o número da versão

Agora vamos nos familiarizar com o CasperJS. Crie um novo arquivo casper_test.js.

Exigir e criar uma nova instância Casper
O método .create () retornará uma instância da classe casper

var Casper = require('casper').create();

Para iniciar o Casper, você deve usar o método .start () para navegar no site e executar o terno Casper

// casper.start(url, callback);
casper.start('http//:google.com', function(){})

Agora ecoe o título da página atual. Você pode imprimir mensagens em uma variedade de estilos diferentes: INFO, ERROR, WARNING, COMMENT

casper.start('http//:google.com', function(){
    // this.echo(messageToPrint, style)
    this.echo(this.getTitle, 'INFO')
});

Finalmente, use o método run

casper.run()

O código completo é o seguinte:

var casper = require('casper').create();

casper.start('http://google.com/', function() {
    this.echo(this.getTitle(), 'INFO');
});

casper.run();

Para executar isso, vá para o seu terminal e digite:

$ casperjs casper_test.js

O console deve imprimir ‘Google’

Etapa 3 – Escreva um teste em CasperJS

O básico

O CasperJS tem seu próprio executor de teste prático. Vamos começar escrevendo um pequeno script rápido para se acostumar com o clichê.

// casper.test.begin(testTitle, numberOfTests, callback)
casper.test.begin('Testing Google', 1, function(test){
    casper.start('http//:google.com');

    casper.then(function(){
        test.assertTitle('Google', 'Google has correct title');
    });

    capser.run(function(){
        test.done();
    })
});

Para executar este teste, vá para o terminal e digite:

$ casperjs test google_test.js

Então, o que está acontecendo aqui? Em primeiro lugar, você deve ter notado que não exigimos o módulo casper e instanciamos uma instância casper. Os testes requerem que os executemos usando o comando ‘test’ no terminal. Algum tipo de magia fantasmagórica garante que uma instância de casper seja criada para nós.

Em seguida, usamos casper.test.begin () passando 3 argumentos. O título do teste, o número de testes esperados para execução e a função de retorno de chamada. A função de retorno de chamada é onde todos os negócios acontecem. Aqui usamos o método .start () para abrir um site (veja acima para mais informações), então usamos um dos métodos de teste test .assertTitle () para verificar se o título da página é o que esperamos.
No método .run () , fazemos um callback com test.done () para dizer ao CasperJS que terminamos a execução.

Preenchendo um formulário

Para preencher um formulário, usamos a função preencher:

casper.fill('selector', {
    'nameOfFormElement' : 'yourInput'
}, submit);

Aqui está um exemplo de código para preencher um formulário de login simples:

casper.fill('form#signInForm', {
    'username' : 'santa',
    'password' : 'presents'
}, true);

Isso preencherá o nome de usuário com o papai noel e a senha com os presentes . Aqui, eu defini submit como true, então ele enviará o formulário para mim.

Às vezes, um aplicativo Backbone pode dispensar os botões de envio. Para clicar em seu próprio botão de envio personalizado, defina o último argumento no método .fill () como false e use o método .click () .

Teste de login do Papai Noel

Vamos dar uma olhada em um teste que irá logar o papai noel e verificar se o url mudou para ‘/ user / santa’.

Aqui começamos nosso teste, nomeando-o ‘Sign In Santa’ e dizendo a casper para esperar 1 teste para ser executado. Em seguida, inicializamos nosso site, que neste caso estou executando localmente na porta 3000.

casper.test.begin('Sign In Santa', 1, function(test){
  casper.start('http://localhost:3000/');

Como estou usando o Backbone, o site leva algum tempo para analisar meu script e renderizar as visualizações. Portanto, utilizo o método .wait () . Depois de esperar 500 milissegundos, preencho o formulário e defino a opção de envio como falsa.

casper.wait(500, function(){
    this.fill('form#signInForm', {
        'username' : 'santa',
        'password' : 'xmas'

    }, false);
});

Em seguida, clico no botão “Entrar”.

casper.then(function(){
    this.click(".signInBtn");
});

O backbone deve redirecionar para uma nova URL (‘ http: // localhost: 3000 / # user / santa’ ), exibindo a página de perfil do usuário. Isso levará um pouco de tempo de processamento, portanto, uso o método .wait () mais uma vez. Agora posso testar se o URL é o que espero.

casper.wait(500, function(){
    test.assertUrlMatch(this.getCurrentUrl(), 'http://localhost:3000/#user/santa');
});

Finalmente, faço o teste.

    casper.run(function(){
        test.done();
    });
});

Aqui está o código completo:

casper.test.begin('Sign In Santa', 1, function(test){
    casper.start('http://localhost:3000/');

    casper.wait(500, function(){
        this.fill('form#signInForm', {
            'username' : 'santa',
            'password' : 'xmas'

        }, false);
    });

    casper.then(function(){
        this.click(".signInBtn");
    });

    casper.wait(500, function(){
        test.assertUrlMatch(this.getCurrentUrl(), 'http://localhost:3000/#user/santa');
    });

    casper.run(function(){
        test.done();
    });
});

O fim

Você chegou ao final do tutorial. Parabéns!

Se você tiver alguma sugestão de como eu poderia melhorar este tutorial, deixe um comentário construtivo abaixo 🙂

Related Posts

Firefox + depuração de backbone

Buscando modelos relacionados com o Backbone

_.bind () e Function.prototype.bind ()