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.

Angular UI Testing with Protractor

5,206 views

Published on

Slides for the presentation I did for the Vancouver AngularJS meetup group.

http://www.meetup.com/vanangularJS/events/216391652/

The code is available on my github account.

https://github.com/aeisenberg/angular-app/tree/vanangular-protractor

(Notice the branch is not master.)

Published in: Software

Angular UI Testing with Protractor

  1. 1. UI Testing with Protractor Andrew Eisenberg Tasktop Technologies
  2. 2. About me • PhD from UBC • SpringSource/VMware/Pivotal – Spring, Groovy, AspectJ, JS (IDE and languages) • Tasktop – Platform and Apps teams
  3. 3. Kinds of testing • Unit testing • Integration testing – UI Testing • System testing Using Protractor
  4. 4. How Protractor works • Selenium Server to manage browsers • Selenium WebDriver to invoke browser APIs • Protractor node app to run tests • Jasmine, etc as test framework
  5. 5. How to run Protractor • Protractor config file: exports.config = { onPrepare: function () { … }, capabilities: {'browserName’:'firefox’}, specs: ['../tests/*.spec.js'], baseUrl: 'http://localhost:8080/’, jasmineNodeOpts: { … }, // and many more options } • To launch: protractor protractor.conf.js
  6. 6. The first test describe('HomePage', function () { it('should be the default page', function () { browser.get(browser.baseUrl); expect(browser .getCurrentUrl()) .toEqual(browser.baseUrl + 'projectsinfo'); }); });
  7. 7. The PageObject pattern • Models the services exported by a page LoginPage.prototype = { isLoggedIn : function() { … }, logout : function() { … }, login : function() { … }, cancelLogin : function() { … } }
  8. 8. Secretly, everything is a promise
  9. 9. Debugging! Add to script: browser.debugger(); Launch in debug mode: protractor debug protractor.conf.js
  10. 10. SOME THINGS I LEARNED
  11. 11. Avoid complex selectors Bad element(by.cssContainingText(‘table.data tr.user td.name’, ‘Jane’); element(by.repeater(‘option as option.label for option in field.options track by (option.value + option.label)’); Good element(by.cssContainingText(‘.name’, ‘Jane’); element(by.css (‘#name-Jane’); element(by.css(‘#options’));
  12. 12. Selectors are brittle • ids most stable – easy to fix when they change – consider dynamically generated ids • but be careful they are always valid and unique – Should be namespaced by directive • but…what if directive repeated multiple times? • OK to refactor base code – make it more testable – expose ids
  13. 13. Impossible to test everything • Too many corner cases • Happy path • A few corner cases • Any interesting interactions • More complex tests are more brittle • Trade-off: – time spent writing/maintaining tests vs code
  14. 14. Your tests will be Incomplete and Brittle Deal with it.
  15. 15. State & Reproducibility • Better to test against clean state • Better to tear down before each test • Can be slow to clean • Tests should not make assumptions about clean state
  16. 16. UI Testing with Protractor Andrew Eisenberg Twitter: @werdnagreb

×