A protractor tutorial for the Quality in Agile Conference 2015 in Vancouver, B.C.

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

5. BACKGROUND
Step 0

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

8. http://www.thoughtwo
rks.com/insights/blog/
testing-angularjs-apps-
protractor

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

10. INSTALLING AND RUNNING
PROTRACTOR
Step 1

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: andrew.eisenberg@gmail.com
pass: nuthing

14. FIRST TESTS
Step 2

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

17. SKETCHING TEST SCENARIOS
Step 3

18. Authentication
User
management
Project
management
Backlog
management
Sprint
management

19. USE CASE-BASED TEST SCENARIOS
Step 4

20. ElementFinder
element(by.css(‘#run-command’));
element(by.css(‘#run-command’)).isPresent();
element(by.css(‘button.command’)).click();
element.all(by.css(‘button.command’))
.click();
element(by.css(‘#my-input’)).getText();
element(by.cssContainingText
(‘button.command’, ‘Run’)).click();
browser.waitForAngular();

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

27. element(by.css(‘#my-button’)).click();
element(by.css(‘#my-button’))
.isDisplayed();
element(by.css(‘#my-button’))
.click()
.isDisplayed();
element(by.css(‘#my-button’))
.click().then(function() {
element(by.css(‘#my-button’))
.isDisplayed();
});

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

30. PAGEOBJECT PATTERN
Step 6

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(‘a.b@gmail.com’, ‘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(’a.b@gmail.com')
>
> 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…’);
}
}
});

44. SOME PHILOSOPHICAL QUESTIONS

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…

51. …use manual automation

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?
• andrew.eisenberg@gmail.com
• twitter: @werdnagreb
• https://github.com/aeisenberg/angular-app