Create Page Objects and Page Object Manager — Playwright Automation Scripting— Part 06

We have saved the Google search page locators in the centralized locator folder in Part 05. In this article, we will write the automation script using this set of locators. To access the past content, check this Medium List.

What is a PageObject?

The place that manages the methods of the script is called PageObject, and all actions are written here. PageObjects are also written based on the page to be automated. It is a JavaScript class containing the constructor and a set of methods used to perform various actions when the automation is running. Large test suites can be structured to simplify creation and maintenance. Page object models are one such approach to structuring the test suite.

PageObject Folder

Similar to the Locator folder, the PageObject folder is also located in the project's root directory.

pageobject folder is created

Renaming PageObjects

Normally, the PageObject file is named by capitalizing the first letter of the associated locator file. Let’s take the previous Google search page as an example.

Locator file -> googleSearchPage.js
Page object file -> GoogleSearchPage.js

PageObject file is created

Import the essentials to PageObject file

The Playwright library is one of the essentials for pageobject files. It can be imported using the following line. The static import declaration is used to import read-only live bindings that another module exports. So be sure to specify the required name of the exports to import, and here “test” and “expect” were imported.

import { test, expect } from '@playwright/test';

Import the Locator file to PageObject file

The locator file is the place where all the locators of the web page are stored. So it should be imported into the PageObject to write the automation script. The following line imports all locators as wildcard imports into the PageObject file. So the tester/developer can use the variable “elements” to access them inside the PageObject class.

import * as elements from '../locators/<locatorPageName>';

Import the essentials to the pageobject file

Declare the class

The class name should usually be the name of the PageObject file. This way, it will be easy to work with a large number of page objects when the framework is extended.

class GoogleSearchPage {
}
export default { GoogleSearchPage };

Pageobject class declaration

Declare the constructor

Constructor is the default method that runs with the class. We use it to define the locators and test data, if necessary. (The management of the test data will be discussed later)

class GoogleSearchPage {
   constructor(page) {
      
      this.page = page;
      
      //elements
      this.SEARCH_BOX = elements.SEARCH_BOX;
      this.SEARCH_BTN = elements.SEARCH_BTN;
   }
}
export default { GoogleSearchPage };

Constructor declaration

Page Object Manager file

This file manages all PageObject files stored in the pageobject folder. You must update this file each time you add a new PageObject file to the directory. We usually use the name “POManager.js” to name this file. All the exported individual page objects are returning in here.

Advantages of the Page Object Manager file: When it comes to creating the test runner file, the POManager file can be imported instead of importing all PageObject files individually.

const { GoogleSearchPage } = require('./GoogleSearchPage').default;
class POManager {
    constructor(page) {
        this.page = page;
        this.googleSearchPage = new GoogleSearchPage(this.page);
    }
    
    getGoogleSearchPage(){
        return this.googleSearchPage;
    }
}
module.exports = { POManager };

Create POManager file

Conclusion

So far, we have created the PageObject file that contains test methods and the PageObjectManager that helps return all PageObjectFiles in a single location. As mentioned above, the POManager file continuously updates with the additions of PageObject files.

What’s next?

Continuation of Scripting with the PageObject File — Playwright Automation Scripting — Part 07