Skip to content

Instantly share code, notes, and snippets.

@igorlima igorlima/README.md
Last active Sep 21, 2017

Embed
What would you like to do?
Exemplo de como escrever história de usuário e teste de aceitação com JavaScript

Gittip Donate Button

História de usuário é uma descrição resumida de alguma funcionalidade do sistema sob o ponto de vista do usuário. Cada história deve ter valor de negócio na visão do cliente e é uma pequena parte da funcionalidade, não necessariamente uma especificação completa, o que minimiza a necessidade de uma extensa documentação.

A história de usuário é escrita pelo próprio cliente e, também, serve para conduzir a criação de teste de aceitação, o qual tem o propósito de avaliar a qualidade externa do produto e, na medida do possível, a qualidade de uso e experiência do usuário. A automatização dos testes de aceitação é criada para certificar de que a história foi implementada corretamente.

Nesse exemplo é preciso a instalação do NodeJS e do Node Package Manager (NPM), que podem ser baixados no site oficial. O NPM é necessário para instalar o CucumberJS, o PhantomJS e o WD, digitando o seguinte script no terminal:

npm install -g cucumber phantomjs

npm install wd

O NodeJS possui dois tipos de dependências: global e local. Quando é global, a dependência passa ser executável, tornando possível a utilização da dependência através da linha de comando. Já as dependências locais são instaladas no diretório corrente, dentro de um diretório chamado node_modules.

O primeiro script, que utiliza o parâmetro -g, instala o CucumberJS e o PhantomJS como dependências globais. O CucumberJS é uma implementação JavaScript para interpretar uma linguagem chamada Gherkin, a qual permite escrever funcionalidades e especificações em texto simples. Já o PhantomJS é um WebKit headless totalmente em JavaScript e possui suporte rápido e nativo para vários padrões web como manipulação de DOM, seletores CSS, JSON, Canvas e SVG.

O segundo script instala o WD como dependência local, um cliente NodeJS para facilitar o acesso à API do Selenium 2, o qual suporta métodos como: fazer requisições GET e POST, clicar no botão VOLTAR do navegador, redimensionar e mover a janela do navegador, submeter formulário, digitar texto, selecionar um elemento DOM, clicar e mover um elemento DOM selecionado, etc.

Após a instalação das dependências, vamos criar um arquivo com a especificação da história de usuário e o teste de aceitação. Algo bem simples. Suficiente para exemplificar a implementação desse tipo de teste utilizando JavaScript.

Ao criar o arquivo de especificação, vamos criar mais dois arquivos: um com as configurações do WebDriver e o outro com as definições de cada passo do teste de aceitação. Em seguida, é preciso, em um outro terminal, rodar o PhantomJS em modo WebDriver, digitando o seguinte comando:

phantomjs --webdriver=localhost:8910

Com o PhantomJS rodando em segundo plano, basta rodar o CucumberJS passando como argumento o arquivo com a história de usuário e o teste de aceitação. O parâmetro --require serve para especificar o arquivo com as definições de cada passo do teste de aceitação. E o parâmetro --format é para alterar a formatação do resultado dos testes. Abaixo, o script e uma ilustração do resultado obtido:

cucumber.js apenas-um-exemplo.feature --require step-definitions.js --format pretty

ilustração do resultado obtido

Esse exemplo contempla de forma bem simples a implementação de teste de aceitação utilizando JavaScript. Essa abordagem também pode utilizar diferentes tipos de navegadores, mas isso ficará para uma próxima discussão. Muito obrigado.

Feature: Apenas Um Exemplo
Como um usuario do CucumberJS
Eu quero acessar um formulario de teste
Para que eu possa submeter novas informacoes
Scenario: Submetendo um formulario de teste
Given o navegador aberto
And acessar o formulario de teste
And certificar que o titulo da pagina contem "Sauce Labs"
And certificar que o titulo da pagina contem "page title"
And certificar que o titulo da pagina contem "I am a"
When clicar no botao de submeter formulario
Then a url do navegador DEVE conter "guinea-pig"
And o navegador pode ser fechado
var exports = module.exports = {},
webdriver = require('wd'),
browser = exports.browser = webdriver.remote({
hostname: "localhost",
port: 8910
});
/**
Callback not fired
http://birkett.no/blog/2013/05/01/vows-errored-callback-not-fired/
*/
process.on( 'uncaughtException', function(err) {
console.error('Caught exception: ' + err.stack );
});
var browser = require('./configuracao-webdriver-usando-phantom.js').browser;
var stepDefinitionsWrapper = function () {
this.Given(/^o navegador aberto$/, function(callback) {
browser.init( {}, function(erro, id_da_sessao, recursos_webdriver) {
if (erro) callback.fail(erro);
else callback();
});
});
this.Given(/^acessar o formulario de teste$/, function(callback) {
browser.get( 'http://saucelabs.com/test/guinea-pig', function(erro) {
if (erro) callback.fail(erro);
else callback();
});
});
this.Given(/^certificar que o titulo da pagina contem "(.*)"$/, function(texto, callback) {
browser.title( function(erro, titulo) {
if (erro) {
callback.fail(erro);
return;
}
if (titulo.indexOf(texto) >= 0) callback();
else callback.fail(new Error("O titulo nao contem o texto especificado.\nTitulo: " + titulo + "\nTexto: " + texto));
});
});
this.When(/^clicar no botao de submeter formulario$/, function(callback) {
browser.elementById('submit', function(erro, elemento) {
if (erro) callback.fail(erro);
else browser.clickElement(elemento, function(erro) {
if (erro) callback.fail(erro);
else callback();
});
});
});
this.Then(/^a url do navegador DEVE conter "(.*)"$/, function(texto, callback) {
browser.eval("window.location.href", function(erro, href) {
if (erro) {
callback.fail(erro);
return;
}
if (href.indexOf(texto) >= 0) callback();
else callback.fail(new Error("A url nao contem o texto especificado.\nURL: " + titulo + "\nTexto: " + texto));
});
});
this.Then(/^o navegador pode ser fechado$/, function(callback) {
browser.quit(function(erro){
if (erro) callback.fail(erro);
else callback();
});
});
};
module.exports = stepDefinitionsWrapper;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.