Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
-
Upload
codemotion -
Category
Technology
-
view
627 -
download
1
Transcript of Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
![Page 1: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/1.jpg)
E2E Testing & Best Practices with Protractor
@CarmenPopoviciu
![Page 2: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/2.jpg)
![Page 3: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/3.jpg)
Agenda● E2E Testing
● Protractor
● Best Practices
![Page 4: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/4.jpg)
E2E Testing
![Page 5: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/5.jpg)
WHAT?
E2E testing is a means of verifying that all units of
an application interact as expected with each other
and that the system as a whole works as intended
![Page 6: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/6.jpg)
What?● Testing from the user perspective
![Page 7: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/7.jpg)
What?● Testing from the user perspective
● Main user interaction flows
![Page 8: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/8.jpg)
What?● Testing from the user perspective
● Main user interaction flows
● Major subpages or routes in the site
![Page 9: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/9.jpg)
What?● Testing from the user perspective
● Main user interaction flows
● Major subpages or routes in the site
● Essential elements on a page
![Page 10: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/10.jpg)
WHY?
E2E testing will give you the confidence that
everything works OK
![Page 11: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/11.jpg)
Why?● Prevents production incidents
![Page 12: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/12.jpg)
Why?● Prevents production incidents
● Manual testing takes too much time
![Page 13: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/13.jpg)
Why?● Prevents production incidents
● Manual testing takes too much time
● E2E tests are documentation
![Page 14: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/14.jpg)
Why?● Prevents production incidents
● Manual testing takes too much time
● E2E tests are documentation
● Makes us better devs
![Page 15: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/15.jpg)
Protractor
![Page 16: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/16.jpg)
Protractor is an end-to-end testing framework for AngularJS applications
![Page 17: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/17.jpg)
Protractor● Wrapper around WebdriverJS
● Adds Angular-specific locator strategies
● Runs tests against real browsers
● node.js program
![Page 18: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/18.jpg)
Everything clear?
![Page 19: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/19.jpg)
Let’s dive in a little deeper
![Page 20: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/20.jpg)
Selenium WebDriver
¯\_(ツ)_/¯
![Page 21: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/21.jpg)
Test Browser
Selenium WebDriver
¯\_(ツ)_/¯
![Page 22: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/22.jpg)
Test Browser
WebDriverClient
Libraries
![Page 23: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/23.jpg)
Test Browser
WebDriverClient
Librarieslanguage specific bindings for Selenium WebDriver API
![Page 24: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/24.jpg)
Test Browser
language specific bindings for Selenium WebDriver API
JAVA
Ruby
Python
JS
![Page 25: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/25.jpg)
Test Browser
JAVA
Ruby
Python
JS
WebDriverBrowser Drivers
![Page 26: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/26.jpg)
Test Browser
WebDriver implementations specific to various browsers
JAVA
Ruby
Python
JS
WebDriverBrowser Drivers
![Page 27: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/27.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
JAVA
Ruby
Python
JS
WebDriver implementations specific to various browsers
![Page 28: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/28.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
JAVA
Ruby
Python
JS
![Page 29: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/29.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
JAVA
Ruby
Python
JS
Real browsers that can connect to anything internet can connect to, including the application under test
![Page 30: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/30.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE DriverJS
Python
Ruby
JAVA
Angular apps are written in JS, so we’ll use the JavaScript bindings for the Selenium WebDriver API
![Page 31: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/31.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
WebdriverJSJavaScript bindings for WebDriver
![Page 32: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/32.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
WebdriverJS- findElement()- getText()- click()...
JavaScript bindings for WebDriver
![Page 33: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/33.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
driver.get(url);
var el = driver.findElement( webdriver.By.name('greet'));el.sendKeys('Hi!');el.click();
Test Code
WebdriverJS- findElement()- getText()- click()...
![Page 34: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/34.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
Test Code
WebdriverJS- findElement()- getText()- click()...
Webdriver Wire Protocol
/session/:sessionId/element/:id/text/session/:sessionId/element/:id/click/session/:sessionId/keys….
![Page 35: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/35.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
Test Code
WebdriverJS- findElement()- getText()- click()...
Selenium Server
![Page 36: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/36.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
Test Code
WebdriverJS- findElement()- getText()- click()...
Selenium ServerProtractor
![Page 37: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/37.jpg)
Test Browser
Chrome Driver
Firefox Driver
IE Driver
Test Code
WebdriverJS- findElement()- getText()- click()...
Selenium ServerProtractor
NodeJS
![Page 38: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/38.jpg)
Still confused?
![Page 39: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/39.jpg)
That’s OK. It will take another few attempts to get it right
![Page 40: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/40.jpg)
(flashy green) Demo!
![Page 41: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/41.jpg)
Control Flow
![Page 42: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/42.jpg)
Control Flow● Non blocking API
![Page 43: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/43.jpg)
Control Flow● Non blocking API
● WebdriverJS/Protractor APIs are purely
asynchronous
![Page 44: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/44.jpg)
Control Flow● Non blocking API
● WebdriverJS/Protractor APIs are purely
asynchronous
● Every function returns a promise
![Page 45: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/45.jpg)
Control Flowit('should greet’, function() {
browser.get('#/hello-world’);
var name = element(by.model(‘name’));
var greetBtn = element(by.tagName(‘button’));
var greeting = element(by.binding(‘greeting’));
name.sendKeys('DevfestRo');
greetBtn.click();
expect(greeting.getText()).toEqual('Hi DevfestRo!');
// ¯\_(ツ)_/¯
});
![Page 46: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/46.jpg)
Control Flow● WebDriverJS maintains a queue of scheduled tasks
(pending promises), called the control flow
![Page 47: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/47.jpg)
Control Flow● WebDriverJS maintains a queue of scheduled tasks
(pending promises), called the control flow
● Each task is executed once the one before it in the
queue is finished
![Page 48: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/48.jpg)
Control Flow● WebDriverJS maintains a queue of scheduled tasks
(pending promises), called the control flow
● Each task is executed once the one before it in the
queue is finished
● Protractor adapts Jasmine so that each spec
automatically waits until the control flow is empty
before exiting
![Page 49: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/49.jpg)
That was a LOT of text for one slide
![Page 50: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/50.jpg)
Ready for another quick dive?
![Page 51: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/51.jpg)
ControlFlow Class
Instancewebdriver.promise.controlFlow()
Task1
Task4
Task3
Task2
Queue
Task4
Task3
Task2
Task1
.execute(..)
![Page 52: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/52.jpg)
Control Flowflow.execute(function() {
console.log('a');
});
flow.execute(function() {
console.log('b');
});
flow.execute(function() {
console.log('c');
});
// a
// b
// c
![Page 53: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/53.jpg)
Control Flowflow.execute(function() {
console.log('a');
}).then(function() {
flow.execute(function() {
console.log('c');
});
});
flow.execute(function() {
console.log('b');
});
// a
// c
// b
![Page 54: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/54.jpg)
(two seemingly random) Demos!
![Page 55: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/55.jpg)
Best Practices
![Page 56: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/56.jpg)
Use Page Objects to interact with the page under test
WHY?
Encapsulate information about the elements on the page under test
They can be reused across multiple tests
Decouple the test logic from implementation details
![Page 57: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/57.jpg)
// avoid/* question.spec.js */
describe('Question page', function() { it('should answer any question', function() { var question = element(by.model('question.text')); var answer = element(by.binding('answer')); var button = element(by.css('.question-button'));
question.sendKeys('What is the purpose of life?'); button.click(); expect(answer.getText()).toEqual("Chocolate!"); });});
![Page 58: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/58.jpg)
// recommended/* question.spec.js */
var QuestionPage = require('./question.page');
describe('Question page', function() { var question = new QuestionPage();
it('should ask any question', function() { question.ask('What is the purpose of meaning?'); expect(question.answer.getText()).toEqual('Chocolate'); });});
![Page 59: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/59.jpg)
// recommended/* question.page.js */
var QuestionPage = function() { this.question = element(by.model('question.text')); this.answer = element(by.binding('answer')); this.button = element(by.className('question-button'));
this.ask = function(question) { this.question.sendKeys(question); this.button.click(); };};module.exports = QuestionPage;
![Page 60: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/60.jpg)
Declare functions for operations that require more than one step
WHY?
Most elements are exposed by the Page Object and can be used directly in the test
Doing otherwise adds unnecessary complexity
![Page 61: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/61.jpg)
Don't make any assertions in your Page Objects
WHY?
It is the responsibility of the test to do all the assertions
Reader of the test should be able to understand the behavior of the application by
looking at the test only
![Page 62: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/62.jpg)
Prefer protractor locators when possible
WHY?
Access elements easier
Code is less likely to change than markup
More readable locators
![Page 63: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/63.jpg)
<ul class="red"> <li>{{color.name}}</li> <li>{{color.shade}}</li> <li>{{color.code}}</li></ul>
/* avoid */var nameElem = element.all(by.css('.red li')).get(0);
/* recommended */var nameElem = element(by.binding('color.name'));
![Page 64: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/64.jpg)
Prefer by.id and by.css when no protractor locators are available
WHY?
Access elements easier
Select markup that is less likely to change
More readable locators
![Page 65: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/65.jpg)
NEVER use xpath
WHY?
Markup is very easily subject to change
xpath has performance issues
Unreadable locator
![Page 66: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/66.jpg)
more athttps://github.com/CarmenPopoviciu/protractor-styleguide
https://goo.gl/1SmXer
![Page 67: Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015](https://reader033.fdocuments.us/reader033/viewer/2022042706/589f47991a28ab490c8b7533/html5/thumbnails/67.jpg)
THANK YOU!https://goo.gl/1SmXer