Primeirospassoscom
Protractor
por Walmyr Lima e Silva Filho

Quemsoueu?
● Desenvolvedor focado em
testes na Taller Negócios
Digitais
● Autor do blog Talking About
Testing
● Ativo membro de comunidades
de tecnologia

Hojeveremos...
● 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

Entaotá,oqueéProtractoreparaqueeleserve?
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.

EessetaldeProtractortemumaboadocumentação?

Oqueprecisopracomeçar?
● Conhecimentos básicos de JS
● Protractor 3.0.0 -> NodeJS v4
● Protractor 2 -> NodeJS v0.12

Ok,agoravamos
colocaramãona
massa!!

=(
Infelizmentenão!
Masvouimprovisar

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.
}
};
Vejamosalgumasconfiguraçõesbásicas

Criandooprimeiroteste
describe( '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.
});
});

Interagindoumpoucomaiscomaaplicação
it( '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');
});

Ecomoficaoresultadodostestes?

Equandoostestesfalham?

● Suporte ao Jasmine2
● Integração entre
Browserstack e Travis CI
Algumasnovidadessobreaversão3.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
=)
AlgunsNodepackagesúteis

Jáouviufalaremtestesderegressãovisuais?
VisualReview
API do VisualReview para integração com o Protractor

Eexisteumpadrãonaescritadetestes?
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
wlsf82@gmail.com