How to implement Open Page Model in JavaScript

Question

I'm trying to implement a page object model for my login page.

conf.js

exports.config={
    seleniumAddress:'http://localhost:4444/wd/hub/',
    specs: ['spec.js']
}

spec.js

    describe('Test suite to check the login', function(){
    it('Check the browswer', function(){
        browser.waitForAngularEnabled(false)
        browser.get('http://some-login-page.com');
        element(by.id('ctrlLogin_UserName')).sendKeys("valid-login");
        element(by.id('ctrlLogin_Password')).sendKeys("valid-password");
        element(by.id('ctrlLogin_LoginButton')).click();
    }); 
})

package.json

  "name": "automation",
  "version": "1.0.0",
  "description": "My first automation project",
  "main": "conf.js",
  "dependencies": {
    "jasmine": "^3.5.0",
    "protractor": "^5.4.3"
  },

So, can I know how to implement the page object model on this login page? Thanks!

score 2 · Accepted Answer · answered Apr 14 '20 at 05:00

First you have to create an object that has a method for every action you want to do/test on the page. Start simple and iterate as you develop your code. For you something like this might work as Page Object:

var LoginPage = function() {
    var nameInput = element(by.id('ctrlLogin_UserName'));
    var PasswordInput = element(by.id('ctrlLogin_Password'));
    var LoginButton = element(by.id('ctrlLogin_LoginButton'));

    this.get = function() {
        browser.get('http://some-login-page.com');
    };

    this.setName = function(name) {
        nameInput.sendKeys(name);
    };

    this.setPassword = function(password) {
        PasswordInput.sendKeys(password);
    };

    this.submitLogin = function() {
        LoginButton.click();
    };
};
module.exports = new LoginPage();

e.g. you can add an extra method that is called login and takes both the username and the password, calls itself setName setPassword and submitLogin

After you have created the Page Object you simply use it in your test:

var LoginPage = require('./LoginPage');
describe('Test suite to check the login', function(){
    it('Check the browswer', function(){
        browser.waitForAngularEnabled(false)
        LoginPage.get();
        LoginPage.setName('valid-login');
        LoginPage.setPassword('valid-password');
        LoginPage.submitLogin();
    });
})

if you have the extra login() method in your page object you can of-course use it in the test and reduce the lines of code.

Now everywhere in your tests where you want to login, you can use your nice new abstraction layer of page objects. If your ids of the elements change, there is only one place to change them. Life got easier ;-)

P.S. see more details in the protractor docs: https://github.com/angular/protractor/blob/master/docs/page-objects.md (I've stole my examples shamelessly from there)

Thanks a lot @INDIVIDUAL-IT can you please let me know the significance fo this piece of code? module.exports = new LoginPage(); The part that I don't understand is "module.export" — okkadu, Apr 14 '20 at 06:55
it exposes `LoginPage` to the rest of the system. Please have a look at https://www.sitepoint.com/understanding-module-exports-exports-node-js/ & https://stackoverflow.com/questions/5311334/what-is-the-purpose-of-node-js-module-exports-and-how-do-you-use-it — INDIVIDUAL-IT, Apr 14 '20 at 08:34

How to implement Open Page Model in JavaScript

1 Answers1