Playwright: Implementing Page Object Patter into Framework

Question

Recently I have been asking questions regarding Playwright and so far the community has been very helpful. I hope that my question and answers provided will be in use for people who are just starting with Playwright.

I have been working on the framework set up in Playwright. Framework consists of Mocha, Chai and uses Node.js. While reading https://playwright.dev/ I came a cross a section about using Page Objects approach. However the example which was posted is different from the ones which I am used and currently would like to implement in my solution. I am new to Playwright and Node.js so maybe someone who has more experience or maybe already worked with Page Object Pattern in Playwright will help. I am placing the code which was an example in the documentation and below the code my way of how I would like to have. I am open for any suggestions/improvements/comments from your side.

Example in documentation -> https://playwright.dev/docs/pom

-- Page Object Class set up--

    // models/Search.js
    class SearchPage {
      constructor(page) {
        this.page = page;
      }
      async navigate() {
        await this.page.goto('https://bing.com');
      }
      async search(text) {
        await this.page.fill('[aria-label="Enter your search term"]', text);
        await this.page.press('[aria-label="Enter your search term"]', 'Enter');
      }
    }
    module.exports = { SearchPage };

-- Test implementation --

    // search.spec.js
    const { SearchPage } = require('./models/Search');
    
    // In the test
    const page = await browser.newPage();
    const searchPage = new SearchPage(page);
    await searchPage.navigate();
    await searchPage.search('search query');

-- My (if possible) implementation of the Page Object Class --

    // models/Search.js

        class SearchPage {
          constructor(page) {
            this.page = page;
          }
          
    // Separate URL with Locators
            
        const bingUrl = "https://bing.com";
        const searchField = '[aria-label="Enter your search term"]';
          
          async navigate() {
            await this.page.goto(bingUrl);
          }
          async search(text) {
            await this.page.fill(searchField, text);
            await this.page.press(searchField, 'Enter');
          }
        }
        module.exports = new SearchPage();

-- My (if possible) implementation of the test --

    // search.spec.js
        const { SearchPage } = require('./models/Search');
        
        // In the test
        await SearchPage.navigate();
        await SearchPage.search('search query');

If the solution is good, then I am planning on adding new automated test which will for sure reuse the existing page objects. A part from the mentioned questions above, if my solution is good then is it possible to use it with other future tests? From what I heard, when you export modules as new instance of classes you can run into cashed issues. If that so then what would be the correct approach? Also if you see any better suggestions on how I can implement Page Object Patter in Node.js let me know.

Thanks in advance and as always or help is welcomed.

Answer 1

Have you tried to run it?

constructor(page) {
    this.page = page;
}

and later:

module.exports = new SearchPage();

What about that missing page? this.page in the object will be undefined, so none of the methods will actually work and you will get some sort of exception at runtime.

A solution could be to send page to every method:

async search(page, text) {
    await page.fill(searchField, text);
    await page.press(searchField, 'Enter');
}

and in test:

await SearchPage.search(page, 'search query');

EDIT:

Another problem seems to be in that export/import-require. If you do this:

module.exports = new SearchPage();

and later:

const { SearchPage } = require('./models/Search');

SearchPage will end up undefined.

Perhaps you wanted to do:

const searchPage = require('./models/Search');

that is without destructuring.

Or:

const { navigate } = require('./models/Search');

that is getting concrete properties out of the exported object. But then you'd need to change the methods to arrow functions:

navigate = async () => {
    // something
}

in order to be able to use:

const { navigate } = require('./models/Search');
navigate();

Answer 2

You want to export a class:

    module.exports =  { SearchPage };

not an object of that class:

    module.exports = new SearchPage();

If you export a class, you can instantiate new objects as required however if you just export an created object, then you cannot create more objects out of it, if required.

Answer 3

But you don't need to pass page in every function of a class. Instead you can pass the page object from test class while creating the object of the class.

const searchPage = new SearchPage(page)

This will work.

Answer 4

Introduction:

In the realm of test automation, the Page Object Model (POM) is a widely adopted design pattern for enhancing code maintainability, readability, and reusability. When combined with a powerful automation tool like playwright, it forms a robust framework that empowers you to write efficient and scalable automated tests.

Understanding the Page Object Model (POM):

The Page Object Model is a design pattern that encourages the separation of test code from the UI details of a web application. It achieves this by representing each web page as a separate class, encapsulating the page’s elements and interaction methods. This abstraction layer shields test scripts from UI changes, promoting easier maintenance and reducing code duplication.

Implementing POM into Playwright:

1. Create Page Object: Define a separate class for each page or component of your application. These classes should encapsulate the page’s elements and interactions using Playwright’s APIs.

(LoginPageObjectModel)

2. Write Test Scripts: Develop your test scripts by utilizing the page object created in the previous step. Test scripts should focus on describing test scenarios and invoking methods from page objects to interact with the application under test.

(loginPageTest)

3. Run Tests: Execute your tests using Playwright's test runner or any other testing framework integrated with Playwright. Monitor test results and iterate on your tests as needed to ensure the reliability of your automated testing suite.

Conclusion:

Implementing the Page Object Model in the Playwright framework offers numerous benefits for automated testing projects. By organizing test code into reusable page objects, testers can create more maintainable and scalable test suites while reducing the impact of UI changes on their tests. Combined with Playwright's powerful automation capabilities, POM provides a robust foundation for achieving efficient and reliable test automation. Embrace the Page Object Model in your Playwright projects to streamline your testing efforts and deliver high-quality web applications with confidence.