时间戳

首页 > 解决方案 > 带有浏览器和页面的 Puppeteer 页面对象模型与主页面分开

javascript - 带有浏览器和页面的 Puppeteer 页面对象模型与主页面分开

问题描述

我正在尝试将 puppeter 调用、浏览器对象和页面对象放入一个类中。但是在使用页面对象模型时我无法使用它。页面成员未定义。

在我发现的每个示例中，我总是在主函数中看到对 puppeteer 以及浏览器和页面对象的调用。我想这是上下文访问的问题。

但是有可能归档我正在寻找的内容并且仍然能够至少使用页面对象文件中的页面对象吗？

主要的.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();

浏览器.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

主页.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

标签： javascriptnode.jsecmascript-6puppeteer

解决方案

return this.browser,this.page

这将返回browser. 如果你想访问浏览器和页面，你应该this只返回。您的代码应如下所示。

return this

您可以从该对象访问浏览器、页面以及介于两者之间的所有内容。

推荐阅读