Este documento apresenta uma introdução ao Protractor, um framework para automação de testes de aplicações AngularJS. Ele discute o que é o Protractor e para que ele serve, requisitos básicos, configurações iniciais, criação de primeiros testes e recursos adicionais como novidades na versão 3.0.0, pacotes Node úteis, testes visuais e padrões de projeto como Page Objects.

1. Primeirospassoscom
Protractor
por Walmyr Lima e Silva Filho

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

3. 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

4. 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.

5. EessetaldeProtractortemumaboadocumentação?

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

7. Ok,agoravamos
colocaramãona
massa!!

8. =(
Infelizmentenão!
Masvouimprovisar

9. 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

10. 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.
});
});

11. 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');
});

12. Ecomoficaoresultadodostestes?

13. Equandoostestesfalham?

14. ● Suporte ao Jasmine2
● Integração entre
Browserstack e Travis CI
Algumasnovidadessobreaversão3.0.0

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

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

17. Eexisteumpadrãonaescritadetestes?
PageObjects
http://angular.github.io/protractor/#/page-objects
Protractor e PageObjects, uma combinação perfeita!
Aprendendo Protractor episódio 11

18. Obrigado!
walmyr-filho.com
talkingabouttesting.com
@walmyrlimaesilv
github.
com/wlsf82/primeiros-
passos-com-protractor-
guts-sc
wlsf82@gmail.com