Post on 05-Aug-2020
Feito em..
Usa..
e usa..
para testes em..
Faz como um usuário faria
Dê adeus ao checklist manual
Passo a passo
- Baixe o NodeJS ~> https://nodejs.org/download/
- $ npm install -g protractor
- $ npm install
- $ npm run update-webdriver
- $ npm start
- $ npm test
2 tests, 1 assertion, 0 failures
Deu certo? Ótimo!
Entendendo o protractor.conf
exports.config = {
specs: [
'./tests/test.js',
],
capabilities: {
'browserName': 'chrome'
},
baseUrl: 'http://localhost:8888/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: false,
isVerbose: true,
includeStackTrace: true
},
directConnect: true,
onPrepare: function() {
browser.manage().window().maximize();
}
};
Navegador onde os testes serão rodados
A url base a ser testada
Framework que serão utilizados para escrever os testes
Opções do Jasmine
Conecta direto ao webdriver
O que fazer antes de começar
Arquivos de testes, carregados nessa ordem
Entendendo o test/test.js
describe('Meu primeiro teste usando Protractor', function() {
it('Acessando aplicação', function() {
browser.get('http://localhost:8888/');
});
it('Escrevendo no input', function() {
var name = 'o meu nome é Teste, obrigado por me usar...';
var elementName = element(by.model('yourName'));
var elementResponse = element(by.css('h1'));
elementName.sendKeys(name);
browser.sleep(2000); // essa linha não é necessária, serve apenas para que você veja a mágica acontecendo
expect(elementResponse.getText()).toEqual('Hello ' + name + '!');
});
});
Descrição do conjunto de testes (suite)
Acessa a URL da aplicação
Teste..
Encontrando um elemento
by.css('.minhaclasse')
<div id="meuid"> <span class="minhaclasse"></span> </div>
element(by.css('.minhaclasse'));
element(by.css('#meuid .minhaclasse'));
by.css('[ng-click="funcao"()]')
<a href="#" ng-click="funcao()">botão</a>
element(by.css('[ng-click="funcao()"]'));
by.id('meuid')
<div id="meuid"></div>
element(by.id('meuid'));
element.all(by.id('meuid')).get(0);
by.model('meumodelo')
<input type="text" ng-model="meumodelo" />
element(by.model('meumodelo'));
element.all(by.model('meumodelo')).first();
by.binding('meubind')
<input type="text" binding="meubind" />
element(by.bind('meubind'));
element.all(by.bind('meubind')).last();
Promisse
var el = element(locator);
el.getText().then(function(text) {
console.log(text);
});
var el = element(locator);
el.isPresent().then(function(is) {
console.log(is);
});
Expect
.toEqual()
expect(browser.getTitle()).toEqual('CICAT');
.toBe()
expect(items[0].getText()).toBe('First');
Debugando
browser.pause()Para tudo e você decide quando voltar
ddescribe() & iit()Rodando apenas os testes que você quer...
console.log()Simples, bom e velho log
Gravando a saída num .txt$ npm test > saida.txt
Timeouts
Esperando a página carregar
Padrão: 10000msModificando..
No seu protractor.conf adicione a seguinte linha:
getPageTimeout: tempo_em_ms
Esperando a página sincronizarPadrão: 11000ms
Modificando..
No seu protractor.conf adicione a seguinte linha:
allScriptsTimeout: tempo_em_ms
Esperando o AngularJS
Padrão: 10000msModificando..
No seu protractor.conf adicione a seguinte linha:
getPageTimeout: tempo_em_ms
Esperando um teste acabar
Padrão: 30000msModificando..
No seu protractor.conf adicione a seguinte linha:
jasmineNodeOpts: {defaultTimeoutInterval: timeout_in_millis}
Esperando um teste acabar
Padrão: 30000msModificando #2..
No seu test.js adicione a seguinte linha:
it('Descrição', testFn, timeout_in_millis)
Salvando resultados (.xml)
No seu protractor.conf, no parâmetro onPrepare, adicione o seguinte trecho: onPrepare: function() { [...] require('jasmine-reporters'); jasmine.getEnv().addReporter( new jasmine.JUnitXmlReporter('./reports', true, true, 'TEST-PREPEND-') ); }
Diretório onde serão salvos os XMLs
Os reports serão consolidados pelo describe
Texto adicionado antes do nome do XML
Pronto :)Obrigado a todos, vocês foram muito gentis!