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.

Better End-to-End Testing with Page Objects Model using Protractor


Published on

This presentation focuses on implementing Page Objects Model using Protractor for AngularJS apps for more maintainable, reusable and flexible end-to-end testing for your project. The presentations was done at 99X Technology as a Tech Talk session done by Team Finale.

Published in: Software
  • Be the first to comment

Better End-to-End Testing with Page Objects Model using Protractor

  1. 1. Better End-to-End Testing With Page Object Model Using Protractor Kasun Kodagoda | Team Finale Trainee Software Engineer | 99X Technology
  2. 2. Overview • Protractor • What is it? • Getting Up and Running • Basic Requirements • Page Objects • What is it? • Why Use it? • A Deeper Dive.. • Demo
  3. 3. Protractor
  4. 4. What Is It? “Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would” Source: Official Protractor Website
  5. 5. What Is It? • Combination of powerful technologies and tools for testing Node.js, Selenium, Jasmine, WebDriver, Cucumber, Mocha • Wrapper for Selenium, made for Angular.js • Uses angular specific constructs for capturing elements Model, bindings, repeaters etc. • Runs on real browsers as well as headless browsers
  6. 6. Get Up And Running.. • Install Node.js • Install Protractor npm install –g protractor • Install WebDriver webdriver-manager update • Start WebDriver webdriver-manager start // do this before you run the tests
  7. 7. Basic Requirements • You’ll need 2 basic files to start, • A Test/Spec file Contains the element references, assertions • The Configuration File Contains the configuration options for running protractor • Use your preferred test framework to write tests • Jasmine – Fully Supported • Mocha – Limited Support • Cucumber – Limited Support
  8. 8. Sample Config File exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome' }, specs: [ 'specs/*Spec.js' ], jasmineNodeOpts: { showColors: true } };
  9. 9. Sample Test describe('Test Home Page', function () { it("Should display the text typed in to the input field.", function () { browser.get('http://localhost:8080/#/'); // Type in a value to input field var textInput = element(by.model('sampleInput')); textInput.sendKeys('The KVK Blog'); // Check if the same value is displayed var displayField = element(by.binding('sampleInput')); expect(displayField.getText()).toEqual('The KVK Blog'); }); });
  10. 10. Conventional UI Tests • Element references are inside tests • Test are cluttered • Less readable • Very fragile
  11. 11. Page Objects Pattern
  12. 12. What Is A Page Object? “A page object is an object-oriented class that serves as an interface to a page of your AUT” • Wraps a HTML page/fragment • Provide Application Specific API • Hides the underlying complexity • Used to manipulate elements on page
  13. 13. Why Use Page Objects? • Reduce Code Duplication • Reusable Page Objects • More Readable Tests • Less Vulnerable to Break • More Maintainable Tests Especially in Agile Based Projects
  14. 14. A Deeper Dive… Return Types • Methods in Page Objects should return fundamental types Strings, Dates, Booleans • It can return other complex types as well Promises, other Page Objects
  15. 15. A Deeper Dive… • Method names can be much closer to what the user is actually doing. var inputField = element(by.model(‘first_name’); inputField.sendKeys(‘Kasun’); Or element(by.model(‘first_name’)).sendKeys(‘Kasun’); Instead We can use somePage.addFirstName(‘Kasun’);
  16. 16. A Deeper Dive… The Dilemma • Use of assertions • Include Assertions inside Page Objects • Not Include Assertions inside Page Objects • It’s Subjective and the Choice is yours…
  17. 17. A Deeper Dive… No Assertions in Page Objects for Us. Why?? • Separation of Responsibility • Page Objects should only provide access to HTML pages • Page Objects become longer
  18. 18. A Deeper Dive… What We Believe “If what we test changes, The assertions and the tests should change” “If the HTML page changes, The Page Object should change” This, • Allows us to easily modify the tests/specs when functionality or underlying HTML pages change overtime
  19. 19. Demo
  20. 20. You Have NO Questions… Right?... ;)
  21. 21. Thank You For Not Throwing Rocks At Me ^_^