Guide: Incorporating the Open Page Model Using JavaScript

Question

Guide: Incorporating the Open Page Model Using JavaScript

I am currently working on setting up a page object model for the login page in my automation project.

conf.js

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

spec.js

    describe('Test suite to verify the login functionality', function(){
    it('Verify browser settings', 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"
  },

If anyone has suggestions on how I can effectively implement the page object model on this login page, I would greatly appreciate it. Thank you!

javascript selenium testing selenium-webdriver automation

Answer 1

Answer №1

To begin, you should establish an object that contains a method for each action you wish to perform/test on the page. It's best to start with something basic and build upon it as your code progresses. For example, you could create a Page Object like this:

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();

For instance, you can include an additional method called login in your Page Object that takes both the username and password, and internally calls setName, setPassword, and submitLogin.

Once you have created the Page Object, you can easily utilize it in your test cases:

var LoginPage = require('./LoginPage');
describe('Test suite for validating login functionality', function(){
    it('Verify the browser', function(){
        browser.waitForAngularEnabled(false)
        LoginPage.get();
        LoginPage.setName('valid-login');
        LoginPage.setPassword('valid-password');
        LoginPage.submitLogin();
    });
})

If you have implemented the extra login() method in your Page Object, you can simply use it in your tests to reduce the amount of code written.

Now, whenever you need to perform a login operation in your tests, you can rely on your convenient abstraction layer of Page Objects. If the element IDs change, you only need to update them in one place. Life just became simpler ;-)

P.S. For more information, refer to the protractor docs at: https://github.com/angular/protractor/blob/master/docs/page-objects.md (I shamelessly borrowed my examples from there)

Answer 2

To begin, you should establish an object that contains a method for each action you wish to perform/test on the page. It's best to start with something basic and build upon it as your code progresses. For example, you could create a Page Object like this:

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();

For instance, you can include an additional method called login in your Page Object that takes both the username and password, and internally calls setName, setPassword, and submitLogin.

Once you have created the Page Object, you can easily utilize it in your test cases:

var LoginPage = require('./LoginPage');
describe('Test suite for validating login functionality', function(){
    it('Verify the browser', function(){
        browser.waitForAngularEnabled(false)
        LoginPage.get();
        LoginPage.setName('valid-login');
        LoginPage.setPassword('valid-password');
        LoginPage.submitLogin();
    });
})

If you have implemented the extra login() method in your Page Object, you can simply use it in your tests to reduce the amount of code written.

Now, whenever you need to perform a login operation in your tests, you can rely on your convenient abstraction layer of Page Objects. If the element IDs change, you only need to update them in one place. Life just became simpler ;-)

P.S. For more information, refer to the protractor docs at: https://github.com/angular/protractor/blob/master/docs/page-objects.md (I shamelessly borrowed my examples from there)

Guide: Incorporating the Open Page Model Using JavaScript

Answer №1

Similar questions

Choose all options within the optgroup group

Button react-native press following textInput within scroll view aware of keyboard movements

Modify the parent div's background color on mouseover of the child li

Retrieve data from a JSON file

In Firefox, the parent div's width is greater than the combined width of its children

How to identify an element based on the text content of the element that follows it using XPath

Nodejs: A function is expected in the instanceof check, but an undefined value was provided

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

The bootstrap function for showing the modal with the ID "myModal" is malfunctioning

Do you know if there is a setting in prettier that allows line breaks to be preserved?

python using selenium to locate the second element with xpath

Utilizing .show() and .hide() in conjunction with the opener

The error message keeps popping up in my Eclipse IDE whenever I try to utilize the Selenium JAR files

Tips on disregarding events within an html table

Maintaining original coordinates while merging meshes in three.js

Using webdriver selenium to extract information from various websites

Unable to start the project - the selected option is not able to be launched and there have been no recent launches

Expo is having trouble locating the module "color-convert" - such a frustrating problem

Retrieving the value of a JSON object within a nested response

Having trouble setting a value as a variable? It seems like the selection process is not functioning properly