Step-by-Step Playwright Page Object Model Implementation Tutorial

Although Selenium is the most popular open-source tool for the automation testing of web applications, Playwright has been gaining much popularity as well. As the Page Object Model approach is widely used while creating test automation frameworks, we wanted to write an easy guide that can help everyone with the Playwright Page Object Model implementation. Being an experienced automation testing company, we started our test automation journey with Selenium. Since we’re always focused on being ahead of the curve, we have successfully implemented Playwright in numerous of our projects as well. So we will be exploring how to use Playwright effectively by applying Pages creation, Method implementation, and Locators.

Before heading to the Playwright Page Object Model Implementation, let’s see a brief intro of what it is, how it works, and the benefits it brings to the table.

What is the Page Object Model (POM)?

Page Object Model can be simply termed a design pattern that is used to improve the maintainability and reusability of your test automation scripts. It is achieved by encapsulating UI elements and interactions into separate classes called Page Objects.

How Does POM Work?

1.Page Objects: Each web page or component is represented by a Page Object, which contains the methods to interact with the elements on that page.

2.Reusable Components: Page Objects are designed for reuse across multiple test cases, reducing redundancy and promoting code efficiency.

3.Readability and Maintainability: Test scripts become more readable as they interact with the application through the methods provided by Page Objects. Additionally, maintenance becomes easier as changes to the UI are isolated within the corresponding Page Objects.

Benefits of Page Object Model:

Let’s take a look at the benefits we can reap by implementing the Page Object Model in Playwright or in general with any tool.

1. The Page Object Model facilitates the scaling of test suites by providing a structured approach to organizing test code.

2. By encapsulating UI interactions within Page Objects, changes to the UI can be made without impacting the entire test suite.

3. Page Objects can be reused across different test cases, promoting code efficiency and reducing duplication.

4. If there are any changes to the UI or even the functionality of a page, you only need to update the corresponding page object instead of modifying multiple test scripts, making maintenance easier.

Playwright Page Object Model Implementation:

To enable easy understanding, we have broken down the full process into small steps that you can follow. You can also quickly navigate through the blog by clicking on the specific step you need help with.

• Step 1: Install Node JS
• Step 2: Install the Required Libraries
• Step 3: Install Cucumber
• Step 4: Create the Configuration File
• Step 5: Create a New Feature File
• Step 6: Create a Step Definition
• Step 7: Playwright POM Implementation

Step 1: Install Node JS

1. Download Node.js and install it by following the specified instructions.

2. Once installed, open a terminal or command prompt.

3. Type node -v and press Enter to check if Node.js is installed correctly. If it has been installed correctly, you should see the version number.

Step 2: Install the Required Libraries

As a next step in our Playwright Page Object Model implementation, you have to install the following libraries using Node Package Manager.

npm i -D @playwright/test
npm i -D playwright 
npx playwright install

Note: Make sure to run this command in your project root directory.

Step 3: Install Cucumber

We generally follow the BDD approach as we’ve always found it to be the most effective while collaborating with our clients. And the BDD tool of our choice is Cucumber. You can install it using the below command.

npm i -D @cucumber/[email protected] @cucumber/pretty-formatter

After executing this command, the ‘package.json’ file will be updated to include the dependencies as shown below.

Note: Extensions such as ‘Cucumber’, ‘Cucumber (Gherkin)’, and ‘Playwright tests’ for VS Code need to be added. Please refer to the attached screenshot below.

Step 4: Create the Configuration File

Now that all the setup and prerequisite steps of the Playwright Page Object Model implementation are done, let’s see how to create the configuration file. The configuration file named cucumber.conf.js at the root level of the project is required to run our test script using Cucumber. You can use the below code to create it.

Code:

const { Before, BeforeAll, AfterAll, After, setDefaultTimeout } = require("@cucumber/cucumber");
const { chromium } = require("playwright");
const fs = require('fs');
setDefaultTimeout(60000); //Default timeout
// Launch the browser
BeforeAll(async function () {
    global.browser = await chromium.launch({
        headless: false,
        slowMo: 1000,
        browserContextOptions: {
            viewport: null,
        },
    });
    const context = await browser.newContext();
    page = await context.newPage();
});


// Quit the browser
AfterAll(async function () {
    await global.browser.close();
});


// Take a screenshot for each scenario
After(async function (testCase) {
    const screenshotPath = `screenshots/${Date.now()}_${testCase.result.status}.png`;
    await global.page.screenshot({ path: screenshotPath });
});

In the provided code snippet, we’ve implemented the browser configuration setup along with hook concepts. By using the ‘BeforeAll’ annotation, the browser will be launched and made available for the entire execution. Once the execution is complete, the browser will be closed according to the configuration set in the ‘AfterAll’ hooks.

Step 5: Creating a New Feature File

The next step in our Playwright Page Object Model implementation is to create a new feature file. First, you have to create a file named DemoLogin.feature within the ‘tests/acceptance/features’ directory as shown below.

Since we’re following the BDD approach, we’ll start by creating a feature file in the Gherkin language.

Here’s a simple syntax example of what a feature file looks like:

Step 6: Creating a Step Definition

Next up, we have to create a Step Definition in our Playwright Page Object Model implementation process. We need to create a Context file named DemoLoginSteps.js inside the tests/acceptance/stepDefinitions directory using the below command,

npm run test:e2e tests/acceptance/features/DemoLogin.feature

Note: It will be generate the step definition

Using above-mentioned snippet, we will add steps in the DemoLoginStep.js file

We have to create a context file named DemoLoginSteps.js inside the tests/acceptance/stepDefinitions directory and add it to the following script in your package.json file.

“–require tests/acceptance/stepdefinitions/*.js” specifies that the test should require all JavaScript files (*.js) in the tests/acceptance/stepdefinitions/ directory. These are the likely step definition files that define the behavior of the steps in the Cucumber scenarios.

Step 7: Playwright POM Implementation

Now we’re at the final stage of the Playwright Page Object Model implementation process.

• First up, create a folder named “pages” at the project level.
• Use this folder to store classes or modules that represent various web pages or components within an application.
• Inside this “pages” folder, create .js files named loginPage.js, and homePage.js for better clarity.
• These files encapsulate the functionality and elements specific to the respective pages, facilitating easier interaction and testing of the functionality.

Define the web elements and Methods for the two pages we’ve created (i.e.) LoginPage and HomePage.

In the above snippet, we are maintaining the web elements in the Loginpage.js file.

We’ve created test scripts as functions and now we want to use these functions in our step definitions. We’ve also defined our web pages using the ‘require’ keyword in Step definition. Additionally, we’re using a page instance to ensure that the browser instance is shared across all pages.

So we have implemented the Playwright Page Object Model for the Login and Home Page by specifying the methods and objects in the js files.

Execute the test scripts specifically for a feature file named DemoLogin.feature, which is located in the tests/acceptance/features/ directory by using the below-mentioned command.

<npm run test:e2e tests/acceptance/features/DemoLogin.feature

Note: The browser will open and execute all the scenarios defined in the feature file.

Conclusion:

We hope you now have a clear understanding of the Playwright Page Object Model implementation by adhering to best practices and design patterns. We’ve additionally explored the advantages of utilizing the Page Object Model (POM). If the process of adding new scripts is time-consuming, it could indicate a lack of reusable scripts or that you’re in the initial stages of implementing automation testing for your project. Being a leading test automation service provider, we always implement the Page Object Model in our projects and hope you will do so as well.