Better End-to-End Testing with Page Objects Model using Protractor
Download as PPTX, PDF3 likes2,280 views
The document provides an overview of using Protractor, an end-to-end test framework for AngularJS applications, emphasizing the Page Object Model. It describes how to set up Protractor, creates basic test configurations, and discusses the benefits of using page objects to enhance test readability and maintainability. Furthermore, it highlights best practices concerning assertions within page objects and the separation of responsibilities in testing.
![Sample Config File
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome'
},
specs: [
'specs/*Spec.js'
],
jasmineNodeOpts: {
showColors: true
}
};](https://image.slidesharecdn.com/protractor-pageobjectspattern-150828143042-lva1-app6892/85/Better-End-to-End-Testing-with-Page-Objects-Model-using-Protractor-8-320.jpg)
More Related Content
Similar to Better End-to-End Testing with Page Objects Model using Protractor (20)
Better End-to-End Testing with Page Objects Model using Protractor
- 1. Better End-to-End Testing With Page Object Model Using Protractor Kasun Kodagoda | Team Finale Trainee Software Engineer | 99X Technology
- 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. Protractor
- 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. 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. 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. 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. Sample Config File exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome' }, specs: [ 'specs/*Spec.js' ], jasmineNodeOpts: { showColors: true } };
- 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. Conventional UI Tests âą Element references are inside tests âą Test are cluttered âą Less readable âą Very fragile
- 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. 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. 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. 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. 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. 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. 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
- 20. You Have NO Questions⊠Right?... ;)
- 21. Thank You For Not Throwing Rocks At Me ^_^