Playwright with Javascript | Page Object Model Pattern | POM | Part 34

Summary

The video explains how to apply the Page Object Model (POM) pattern in Playwright with JavaScript. POM separates page-specific locators and actions from test scripts, making tests easier to reuse and maintain.

Why Use POM?

Without POM, tests may locate the same elements and repeat the same actions. This can lead to:

• Duplicated code: The same locators and interactions appear in multiple tests.
• Harder maintenance: If a locator or element attribute changes, every test that uses it may need updating.

With POM, each application page has a dedicated page-object class containing its locators and related methods. Tests call those methods instead of interacting with page elements directly.

Demonstration Workflow

The example uses an e-commerce application and a test that:

1. Logs in.
2. Selects a product on the home page and adds it to the cart.
3. Opens the cart and checks that the product is present.

The test uses three page objects: Login Page, Home Page, and Cart Page.

POM Implementation

• Create a pages folder and a separate JavaScript file for each page.
• Define a class for each page:
  • Its constructor receives the Playwright page fixture from the test and stores it for use in the class’s methods.
  • Store the page’s relevant locators as class properties.
• Add page-specific methods that use those locators:
  • Login page: Opens the application and provides a method to click the login link, fill in the username and password, and submit the form.
  • Home page: Accepts a product name, checks the text of each product, and selects the matching one. It then handles the confirmation alert and clicks Add to cart. A separate method opens the cart.
  • Cart page: Checks the product names in the cart against the expected product name and returns true if it finds a match.
• Export each page-object class so the test can use it.
• Import the classes into the test, create an instance of each with the page fixture, and call their methods in sequence.
• Store the cart-check result and assert that it is true.

The test does not need to contain individual locators or element actions; the page objects handle them.

Results and Benefits

The instructor runs the test in headed Chromium mode, fixes an initial issue caused by forgetting to import the cart-page class, and then shows the test passing. A Playwright report is also opened to review the executed steps and recorded video.

Page objects can be reused across multiple tests. When a locator changes, it can be updated in its page-object class rather than in every test that uses it. Page objects can also be expanded over time as new tests require additional locators and methods.

Speakers and Sources

• Speaker: An unnamed instructor and narrator presenting the tutorial on the SDET-QA channel.
• Demonstration sources: An e-commerce application in a browser, JavaScript page-object and test files in a code editor, and Playwright execution and report output.