Page Object Model in Selenium and JavaScript

Page Object Model (POM) is a wide employ design figure in Selenium automation that simplify trial maintenance and amend code reusability. By separating locators and methods into consecrate page classes, it makes test playscript clear, more clear, and easier to care.

This guide not entirely explain thePage Object Model in JavaScriptbut also walks you through setup, implementation, and execution, shew how it makes Selenium testing faster, cleaner, and more maintainable.

What is a Page Object Model?

The page object model is the 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 family that will bear all the web elements and Page methods of that web page. To further simplify the structure, names are afford according to the activeness they are performing.

Advantages of use the Page Object Model

• POM in increase the code reusability. You do not have to then repeat the like code ever. For example, if your application has a contact form on each webpage, then you can make a common method and use it for each page grade.
• It increases the codification maintainability. Going with the above model, if you want to update the contact variety, you but 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 single class for each element and method that your webpage contains.

In this tutorial, let us set up our project from scratch to discover Page Object models utilize JavaScript. Let ’ s create a basic JavaScript selenium automation test, which will perform a google search, to see if the exam is work.

Prerequisites for Selenium Page Model

•  Node.js: You must instal NodeJS in your system. You candownloadit from its official website. Also, install the late version of NPM if it does not install automatically with your NodeJs packet.

•  IDE: It includes a codification editor, which is utilise to write and hold your project & # 8217; s codification. In this representative, let ’ s use VS Code.

Writing Script in Selenium JavaScript utilize POM

Step 1: Setting up the project and installation dependencies

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

npm init

Install the 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, instal mocha from CLI that will instal the required node modules.

npm install mocha

After performing the above facility, 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 family in the basepage.js and use them dynamically on the homepage.js. As you can see hither, by using POM in the project, the readability of the code has increased.

Step 3: Creating basepage.js

In this page, you can make constituent that you can also use in other projection Page.

var webdriver = require ('selenium-webdriver '); const {By} = require ('selenium-webdriver '); var driver = new webdriver.Builder () .forBrowser ('chrome ') .build (); driver.manage () .setTimeouts ({implicit: (10000)}); form 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 assort without having to rewrite the entire code again. This is a practical example of the reusability of codification.

const {Key} = require ('selenium-webdriver '); var BasePage = require (' .. /Page/basepage '); class HomePage run 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 book 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 (part () {}); it ('POM Test Check ', async use () {var baseurl = 'https: //www.google.com/ '; look homepage.enter_url (baseurl); await homepage.enter_search ('Browserstack selenium javascript pom ');}) afterEach (async purpose () {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 cutoff, ctrl + shift + ` in windows to launch the terminus. However, if you ’ re not following this tutorial with VS code, make sure that when you open the terminus, you must navigate to your current project brochure, however, IDE does this automatically.

npm test ./Test/homepage-test.js

After scarper the examination, the browser will perform an machine-driven google lookup, which will state that the test script is working amercement.

Step 7: Editing

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

This tutorial explains the page object model plan 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 examination and create mechanization prove easygoing through page object model apply JavaScript. Not merely that, you can speed up your trial by 30x with to expand your test and browser reportage without compromise on build clip.

Related Guides