Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Primeiros passos com protractor - GUTS-SC

709 views

Published on

Palestra com os primeiros passos para a criação de automação de testes para aplicações AngularJS apresentada no primeiro evento presencial de 2016 do Grupo de Usuários de Teste de Software de Santa Catarina.

Published in: Technology

Primeiros passos com protractor - GUTS-SC

  1. 1. Primeirospassoscom Protractor por Walmyr Lima e Silva Filho
  2. 2. Quemsoueu? ● Desenvolvedor focado em testes na Taller Negócios Digitais ● Autor do blog Talking About Testing ● Ativo membro de comunidades de tecnologia
  3. 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. 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. 5. EessetaldeProtractortemumaboadocumentação?
  6. 6. Oqueprecisopracomeçar? ● Conhecimentos básicos de JS ● Protractor 3.0.0 -> NodeJS v4 ● Protractor 2 -> NodeJS v0.12
  7. 7. Ok,agoravamos colocaramãona massa!!
  8. 8. =( Infelizmentenão! Masvouimprovisar
  9. 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. 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. 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. 12. Ecomoficaoresultadodostestes?
  13. 13. Equandoostestesfalham?
  14. 14. ● Suporte ao Jasmine2 ● Integração entre Browserstack e Travis CI Algumasnovidadessobreaversão3.0.0
  15. 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. 16. Jáouviufalaremtestesderegressãovisuais? VisualReview API do VisualReview para integração com o Protractor
  17. 17. Eexisteumpadrãonaescritadetestes? PageObjects http://angular.github.io/protractor/#/page-objects Protractor e PageObjects, uma combinação perfeita! Aprendendo Protractor episódio 11
  18. 18. Obrigado! walmyr-filho.com talkingabouttesting.com @walmyrlimaesilv github. com/wlsf82/primeiros- passos-com-protractor- guts-sc wlsf82@gmail.com

×