Page Object Model in Selenium and JavaScript

Can you imagine the simplest method to maintain your code in test automation? 

It is structuring your test code. Using design patterns in automation framework helps structure your code. One of many Javascript design patterns is the Page object model (POM). As the name says, this method deals with pages, which include pure JavaScript classes. It is recommended to resolve several issues, such as discovering performance issues, complex transactions, etc.

What is a Page Object Model?

The page object model is the design pattern in Selenium that is used in test automation methods which creates an object repository for all web UI elements. In this model, there is one corresponding page class that will contain all the web elements and Page methods of that web page. To further simplify the structure, names are given according to the action they are performing. 

Advantages of using the Page Object Model

• POM in Selenium increases the code reusability. You do not have to then repeat the same code ever. For example, if your application has a contact form on each webpage, then you can create a common method and use it for each page class. 
• It increases the code maintainability. Going with the above example, if you want to update the contact form, you just have to bring the change in the common code, and it will get reflected everywhere.
• Using this method, you can make your code more readable as there is an individual class for each element and method that your webpage contains.

In this tutorial, let us set up our project from scratch to learn Page Object models using JavaScript. Let’s create a basic JavaScript selenium automation test, which will perform a google search, to check if the test is working. 

Prerequisites for Selenium Page Model

•  Node.js: You must install NodeJS in your system. You can download it from its official website. Also, install the latest version of NPM if it does not install automatically with your NodeJs package.

•  IDE: It includes a code editor, which is used to write and maintain your project’s code. In this example, let’s use VS Code.

Writing Script in Selenium JavaScript using POM

Step 1: Setting up the project and installing dependencies

Create a folder for your project and follow the command to create a package.json file.

npm init

Install the Selenium Webdriver from the CLI with the following command.

npm install selenium-webdriver

After this, let’s install the browser driver. For example, Chrome Webdriver.

npm install chromedriver

Then, install mocha from CLI that will install the required node modules.

npm install mocha

After performing the above installations, let us edit the scripts section in the package.json file.

"scripts": {
    "test": "mocha --timeout 60000"
  }

Step 2: Structuring folder using POM

The Project folder structure will look something like this after using the Page Object Model. You can follow this approach to create classes in the basepage.js and use them dynamically on the homepage.js. As you can see here, by using POM in the project, the readability of the code has increased.

Step 3: Creating basepage.js

In this page, you can create elements that you can also use in other project pages.

var webdriver = require('selenium-webdriver');
const {By} = require('selenium-webdriver');
var driver = new webdriver.Builder().forBrowser('chrome').build();
driver.manage().setTimeouts({implicit: (10000)});

class BasePage{
    constructor(){
        global.driver = driver;
    }
    async go_to_url(theURL){
        await driver.get(theURL);
    }
    async enterTextByCss(css, searchText){
        await driver.findElement(By.css(css)).sendKeys(searchText);
    }
    async clickById(id){
        await driver.findElement(By.id(id)).click();
    }
    async closeBrowser(){
        await driver.quit();
    }
}

module.exports = BasePage;

Step 4: Creating homepage.js

In our homepage, let’s use the basepage.js classes without having to rewrite the entire code again. This is a practical example of the reusability of code.

const {Key} = require('selenium-webdriver');
var BasePage = require ('../Page/basepage');

class HomePage extends BasePage{

   
    async enter_url(theURL){
        await this.go_to_url(theURL);
    }

    async enter_search(searchText){
        var searchField = 'input[name=q]';
        await this.enterTextByCss(searchField, searchText);
        await this.enterTextByCss(searchField, Key.RETURN);
    }
}
module.exports = new HomePage();

Step 5: Creating Test Script

Now create the test script with the same approach, using basepage.js classes to save re-writing of code. Add the following test script in Test / homepage-test.js.

const homepage = require('../Page/homepage');

describe('Describe', function(){
    this.timeout(50000);
   
    beforeEach(function(){
     
    });

    it('POM Test Check', async function(){
        var baseurl = 'https://www.google.com/';
        await homepage.enter_url(baseurl);
        await homepage.enter_search('Browserstack selenium javascript pom');
    })

    afterEach(async function(){
        await homepage.closeBrowser();
    });

})

Talk to an Expert

Step 6: Executing the test script 

To run your test, open the terminal in VS code and type in the following command. You can use a shortcut, ctrl + shift + ` in windows to launch the terminal. However, if you’re not following this tutorial with VS code, make sure that when you open the terminal, you must navigate to your current project folder, however, IDE does this automatically.

npm test ./Test/homepage-test.js

After running the test, the browser will perform an automated google search, which will state that the test script is working fine. 

Step 7: Editing

Now that all the code has been done, if you want to make any change in the script, you just have to do it at the method level. In simple words, if you want to update any method that is present in the entire project, just update your basepage.js. All the changes will be reflected automatically throughout the project.

This tutorial explains the page object model design patterns thoroughly and how efficient this technique is when it comes to code reusability and readability.  

Using Browserstack Integration, you can seamlessly integrate your Selenium tests and make automation testing easier through page object model using JavaScript. Not just that, you can speed up your tests by 30x with parallel testing to expand your test and browser coverage without compromising on build times.

Start testing now