Protractor Tutorial Quality in Agile 2015
Download as PPTX, PDF7 likes2,081 views
Andrew Eisenberg gives an overview of UI testing with Protractor. He discusses installing and running Protractor, writing basic tests, more complex test scenarios using page objects and promises, debugging tips, and considerations around when and how to use Protractor for UI testing AngularJS applications. While Protractor is a powerful tool, he notes it has limitations and maintenance costs, and manual testing may be better for unstable UIs and use cases in flux.
![This throws an exception:
This does not:
var text = element(
by.css(‘#my-input’)).getText();
expect(text.split(‘,’)[0]).toBe(‘sumthin’);
var text = element(
by.css(‘#my-input’)).getText();
expect(text).toContain(‘sumthin’);](https://image.slidesharecdn.com/qualityinagile-150421142923-conversion-gate02/85/Protractor-Tutorial-Quality-in-Agile-2015-24-320.jpg)
![Protractor and `expect`
• expect accepts promises
– delays execution until promise is resolved
var text = element(
by.css(‘#my-input’)).getText();
expect(text.split(‘,’)[0]).toBe(‘sumthin’);
var text = element(
by.css(‘#my-input’)).getText();
expect(text).toContain(‘sumthin’);](https://image.slidesharecdn.com/qualityinagile-150421142923-conversion-gate02/85/Protractor-Tutorial-Quality-in-Agile-2015-28-320.jpg)
Protractor Tutorial Quality in Agile 2015
- 1. UI Testing with Protractor Andrew Eisenberg Tasktop Technologies
- 2. • Sr. Software Engineer @ Tasktop Technologies • PhD from UBC in programming languages & IDEs
- 3. A Cautionary Tale 100% Code Coverage!!! …but I was playing the wrong game.
- 4. Testing an app in 7+ easy steps 1. Installing and running Protractor 2. First tests 3. Creating test scenarios 4. Real tests 5. Synchronicity and Asynchronicity 6. Page object pattern 7. Debugging, screen capture, and other tips 8. Discussion items and gotchas
- 6. Kinds of testing • Unit testing • Integration testing • System testing (or Functional testing) – UI Testing Using Protractor A simplification!
- 7. What is Protractor? • “End-to-End testing” – Well, not really. Just UI testing • Built to work with AngularJS • Built on top of Selenium • Is a node app
- 9. When should I use Protractor? • UI stable • Use cases well established • Already unit-tested • Uses AngularJS • UI unstable • Use cases in flux • Not unit-tested • Doesn’t use AngularJS Do it Avoid
- 11. Installing and running Protractor • Install node/npm from https://nodejs.org/ • Install protractor, grunt – npm install -g protractor – npm install -g grunt-cli • Update webdriver – webdriver-manager update
- 12. Getting tutorial code • git clone https://github.com/aeisenberg/angular-app.git • cd angular-app • git checkout qia-step-1 • Open file: Quality-in-Agile-Protractor-Tutorial.md • Follow instructions in file
- 13. Run the app and play user: [email protected] pass: nuthing
- 15. Protractor & Jasmine describe('Home Page', function () { it('should be the default page', function () { browser.get(browser.baseUrl); expect(browser.getCurrentUrl()) .toEqual(browser.baseUrl + 'projectsinfo'); }); });
- 16. Let’s Code! • Getting started – git checkout qia-step-2-before • If you get stuck: – git checkout qia-step-2-after
- 19. USE CASE-BASED TEST SCENARIOS Step 4
- 21. Let’s Code! • Getting started – git checkout qia-step-4-before • If you get stuck: – git checkout qia-step-4-after
- 22. MORE COMPLEX TEST Step 5
- 23. Secretly, everything is a promise
- 24. This throws an exception: This does not: var text = element( by.css(‘#my-input’)).getText(); expect(text.split(‘,’)[0]).toBe(‘sumthin’); var text = element( by.css(‘#my-input’)).getText(); expect(text).toContain(‘sumthin’);
- 25. JavaScript Promises • (Eventually) contains result of computation • Asynchronous programming • Composable, chainable, and…FUN! • A standard promise.then(function(result) { verify(result); }).then(function(result) { display(result); });
- 26. ElementFinder returns promise element(by.css(‘#my-input’)) .sendKeys(‘Hello’) .getText() .then(function(text) { console.log(text); }); All ElementFinder methods return promises
- 28. Protractor and `expect` • expect accepts promises – delays execution until promise is resolved var text = element( by.css(‘#my-input’)).getText(); expect(text.split(‘,’)[0]).toBe(‘sumthin’); var text = element( by.css(‘#my-input’)).getText(); expect(text).toContain(‘sumthin’);
- 29. Let’s Code! • Getting started – git checkout qia-step-5-before • If you get stuck: – git checkout qia-step-5-after
- 31. The PageObject pattern • Readable DSL for tests • Promotes reuse • Centralizes UI coupling
- 32. PageObject Big Idea • Extract CSS ugliness – element(by.css('#login')).click(); • Into semantically meaningful actions – loginPage.openDialog();
- 33. Tests do not touch DOM directly var loginPage = new require(‘./LoginPage)(); loginPage.login(‘[email protected]’, ‘secret’); expect(loginPage.isLoggedIn().toBeTruthy(); loginPage.logout();
- 34. Let’s Code! • Page Object Skeleton – git checkout qia-step-6-before • Getting started – git checkout qia-step-6-middle • If you get stuck: – git checkout qia-step-6-after
- 35. DEBUGGING AND OTHER FUN THINGS Step 7
- 36. Let’s Code! • Getting started – git checkout qia-step-7
- 37. Focused tests • fit & fdescribe • Focus protractor – on a single test or set of tests
- 38. Debug mode • protractor debug protractor.conf.js • Enter node’s debugger – debugger; • Enter debugger (webdriver aware) – browser.debugger(); • Enter debugger (new feature doesn’t work too well) – browser.pause();
- 39. Element Explorer • protractor --elementExplorer • Interactive invoking of webdriver commands
- 40. Interactive login > element(by.css('#login')).click() > > element(by.css('#login-email') .sendKeys(’[email protected]') > > element(by.css('#login-password') .sendKeys(’nuthin') > > element(by.css('#do-login')).click()
- 41. Screenshots browser.takeScreenshot().then(function(png) { var stream = fs.createWriteStream(filename); stream.write(new Buffer(png, 'base64')); stream.end(); });
- 42. Jasmine reporters • Hook into jasmine spec lifecycle – before/after test/suite/jasmine • Things to do – Format test results – Grab screenshot on failure – Cleanup before/after tests – Start/stop resources – …
- 43. Do something on failure jasmine.getEnv().addReporter({ specDone: function(result) { if (result.failedExpectations .length > 0) { console.log(‘I am a failure…’); } } });
- 45. What should be unit tested? What should be UI tested?
- 46. How much refactoring in production code is appropriate?
- 47. Should test use id attributes or complex CSS expressions?
- 48. THE TRUTH BEHIND PROTRACTOR
- 49. It ain’t perfect • Timing problems • Difficult to debug • Inconsistent behavior • Failures hard to reproduce • Expensive to maintain • Tests can be slow
- 50. Protractor is appropriate • When… – Using AngularJS – UI is mature – Front end is well unit-tested – Use cases well described • Until then…
- 52. Protractor is… • For UI testing • AngularJS-aware • Secretly powered by Selenium • Asynchronous and event-based • A powerful and clean way to test UI But… • Expensive to maintain
- 53. Questions? • [email protected] • twitter: @werdnagreb • https://github.com/aeisenberg/angular-app