primeiros passos com protractor - guts-sc
TRANSCRIPT
Primeiros passos com Protractor
por Walmyr Lima e Silva Filho
Quem sou eu?● Desenvolvedor focado em
testes na Taller Negócios Digitais
● Autor do blog Talking About Testing
● Ativo membro de comunidades de tecnologia
Hoje veremos...● O que é e para que serve o Protractor
● Documentação + API
● Pré-requisitos
● Configurações básicas
● Primeiros testes
● Extras: Novidades Protractor 3.0.0, Node Packages, VisualReview e PageObjects
Entao tá, o que é Protractor e para que ele serve?
O que é?
Protractor é um framework open source para automação de testes de aplicações AngularJS.
Para que serve?
Com o Protractor você pode criar e rodar testes automatizados de aplicações web em navagadores reais, como se fosse um usuário real utilizando a aplicação.
E esse tal de Protractor tem uma boa documentação?
O que preciso pra começar?
● Conhecimentos básicos de JS
● Protractor 3.0.0 -> NodeJS v4
● Protractor 2 -> NodeJS v0.12
Ok, agora vamos colocar a mão na
massa!!
=(Infelizmente não!
Mas vou improvisar
module.exports.config = {
directConnect: true, // To use the browser's webdriver directly.
specs: ['api.spec.js'], // Array of test files.
capabilities: {
'browserName': 'chrome' // The browser where tests will run against.
},
baseUrl: 'http://angular.github.io/', // The base URL for testing.
onPrepare: function() {
browser.driver.manage().window().maximize(); // Maximize window before start testing.
}
};
Vejamos algumas configurações básicas
Criando o primeiro testedescribe( 'API', function() {
it( 'has a title', function() {
// Arrange
browser.get('protractor/#/api'); // Navigate to baseUrl + 'protractor/#/api'.
var title = element.all(by.css('h3')).first(); // store title element in a variable.
// Assert
expect(title.getText()).toContain('Protractor API'); // The test expectation.
});
});
Interagindo um pouco mais com a aplicaçãoit( 'search for an existing protractor method', function() {
// Arrange
browser.get('protractor/#/api');
var searchField = element(by.model('searchTerm'));
var firstSidebarItem = element(by.repeater('item in items').row(0));
var firstSidebarLink = firstSidebarItem.element(by.css('a'));
var apiSearchedTitle = element(by.css('.api-title'));
// Act
searchField.sendKeys('repeater');
firstSidebarLink.click();
// Assert
expect(apiSearchedTitle.getText()).toContain('by.repeater');
});
E como fica o resultado dos testes?
E quando os testes falham?
● Suporte ao Jasmine2
● Integração entre Browserstack e Travis CI
Algumas novidades sobre a versão 3.0.0
● jasmine-spec-reporter -> Para um melhor report dos testes no terminal
● protractor-jasmine2-screenshot-reporter -> Relatório de testes em html com links para screenshots de cada teste
=)
Alguns Node packages úteis
Já ouviu falar em testes de regressão visuais?VisualReview
API do VisualReview para integração com o Protractor
E existe um padrão na escrita de testes?PageObjects
http://angular.github.io/protractor/#/page-objects
Protractor e PageObjects, uma combinação perfeita!
Aprendendo Protractor episódio 11
Obrigado!
walmyr-filho.com
talkingabouttesting.com
@walmyrlimaesilv
github.com/wlsf82/primeiros-passos-com-protractor-
guts-sc