CODEWITHSUNDEEP
javascriptnode.jstestingpuppeteer
MadCatm2
MadCatm2

Reputation: 1001

Page Object Mode with node, ES7, puppeteer

I recently started utilizing Puppeteer for e2e testing (I have some experience with Selenium Web Driver) and I could not find anything in the documentation discussing POM pattern. Are there any examples available how to implement this correctly in node/ES7 within Puppeteer?

Let us say I have a simple script that tests the login functionality of a page:

(async () => {
...

     await page.goto(url, {
        timeout: 5000
    });

    await page.waitFor('input[id=userId]');

    await page.type('input[id=userId]', 'John Doe');
    await page.type('input[id=password]', 'password1');
    await page.click('button[type="submit"]');
    await page.waitFor('p.success-msg');
...
}();

Typically, we would have a Page Object Model for the login page. How would I create a basic POM for the above page and integrate it with my script? How would you call the POM in my test script in this environment? Would I use import? I am just looking for a basic 'hello world' example.

Upvotes: 2

Views: 4244

Answers (1)

Christian Santos
Christian Santos

Reputation: 5456

At the most basic level, POM states that every page has its own class containing utility methods to interact with that page.

To achieve this with Puppeteer, we use ES6 classes to create the classes that contain utility methods for their respective pages.

Folder Structure

test/
  main.js
  pages/
    - HomePage.js
    - CartPage.js
    - ProductDetailPage.js

HomePage.js

export default class HomePage {

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

    async getTitle() {
        return this.page.title();
    }
}

main.js

import HomePage from "pages/HomePage";

const HP_URL = "https://google.com";

(async () => {

    await page.goto(HP_URL);

    const hp = new HomePage(page);

    const title = await hp.getTitle();

    console.log(title);

})();

Upvotes: 5

Related Questions