Page Object Model, also known as POM is a design pattern used to avoid code duplication and to enhance code reusability. The page object model wraps all the elements, actions and validations happening on a page in one single object. POM is an design approach that creates an object repository for storing all web elements(locators). In POM, consider each web page of an application as a class file. Each class file will contain only corresponding web page elements, actions and validations. These class file will be called through their objects in another test implementation class file. This way, the locators of the web elements will be centralized. Frequent UI changes will only impact the files that contains the locators, with minimal changes in test implementation. ​ It is a standard way to structure our test code and to enhance the overall ease of test case maintenance.

How to Implement Page Object Mode in Selenium JavaScript Using Mocha-Chai ?

By considering project folder 'PageObjectModel' as an example to represent implementation, let's go ahead. ​ To implement page object model follow these steps :

• Open VS code, go to the File, click on Open folder.

• Create a new folder(I named it as 'PageObjectModel') and name it.

• Install Selenium-JavaScript setup in this newly created project folder => Follow Guide

• Install mocha-chai in the same folder, i.e. PageObjectModel => Follow Guide

• Create a new folder as 'model' inside project folder PageObjectModel.

• Create two different folders as 'pages' and 'tests' inside the folder model.

• The project hierarchy will look like this now : ​

​ ​

• Create a new .js file as 'HomePage.js' under the folder pages.

  • Write mentioned code in the file HomePage.js :

​ ​

• Create a new .js file as 'HomeTest.js' under the folder tests.

  • Write below code in the file HomeTest.js :

​ ​

• Run the command "npx mocha --no-timeouts 'HomeTest.js' " to run HometTest.js. ​

​ ​ ​