CODEWITHSUNDEEP
javascriptnode.jsecmascript-6puppeteer
Jeflopo
Jeflopo

Reputation: 2262

Puppeteer Page Object Model with browser and page put apart from main

I'm trying to put in a class the puppeter call, the browser object, and the page object. But I'm being unable to use it when using the Page Object Model. Page members are undefined.

In every example that I've found I always seen the call to puppeteer and the browser and page object within the main function. I guess that's a problem with context access.

But it's possible to archieve what I'm looking for and still be able to use at least the page object within Page Object files ?

main.mjs

import Browser from './browser.mjs'
import HomePage from './HomePage.mjs'

async function main () {
    const browser = new Browser();
    const homePage = new HomePage(browser.page);
    await homePage.open();
    console.log(await homepage.getTitle());
    await browser.close();
}
main();

browser.mjs

class Browser {
    constructor() {
        return this.main(); // I know, that's ugly
    }

    async main() {
        this.browser = await puppeteer.launch({
            headless: false,
        });

        this.page = await browser.newPage();
        return this.browser,this.page
    }
}

export default Browser

homepage.mjs

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

    async open() {
        this.page.goto('http://www.contoso.com');
    }

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

export default HomePage

Upvotes: 0

Views: 1806

Answers (1)

Md. Abu Taher
Md. Abu Taher

Reputation: 18836

return this.browser,this.page

This returns the browser. If you want to access browser and page, you should return this only. Your code should look like below.

return this

You can access browser, page and everything between from that object.

Upvotes: 1

Related Questions