启动后如何打开无头？

How to turn headless on after launch?

我想在无头关闭的情况下加载页面让我登录。

登录后我想隐藏它，打开headless让它做它该做的事。

如何在启动后将 on/off 变成无头？

您不能即时切换无头模式。但如果需要，您可以使用 cookies and setCookie 共享登录信息。

我们将创建一个简单的 class 来保持代码干净（或者这就是我对这类工作的看法，因为它们通常会在以后变大）。不过，您可以在没有所有这些复杂性的情况下做到这一点。另外，确保 cookie 是序列化的。不要将数组传递给 setCookie 函数。

主要有3个功能

1。 init()

创建页面对象。主要是为了确保 headless 和 headful 版本具有相似的浏览风格、相同的用户代理等。注意，我没有包含设置用户代理的代码，它只是为了展示这个概念。

async init(headless) {
    const browser = await puppeteer.launch({
        headless
    });
    const page = await browser.newPage();
    // do more page stuff before loading, ie: user agent and so on
    return {
        page,
        browser
    };
}

2。 getLoginCookies()

显示如何从浏览器获取 cookie 的示例。

// will take care of our login using headful
async getLoginCookies() {
    const {
        page,
        browser
    } = await this.init(false)

    // asume we load page and login here using some method
    // and the website sets some cookie
    await page.goto('http://httpbin.org/cookies/set/authenticated/true')

    // store the cookie somewhere
    this.cookies = await page.cookies() // the cookies are collected as array

    // close the page and browser, we are done with this
    await page.close();
    await browser.close();
    return true;
}

如果您可以手动提供cookies，您就不需要这样的功能。您可以使用 EditThisCookie 或任何 cookie 编辑工具。您将获得该站点所有 cookie 的 数组。这是你如何做到这一点，

3。 useHeadless()

显示如何为浏览器设置 cookie 的示例。

// continue with our normal headless stuff
async useHeadless() {
    const {
        page,
        browser
    } = await this.init(true)

    // we set all cookies we got previously
    await page.setCookie(...this.cookies) // three dots represents spread syntax. The cookies are contained in a array.

    // verify the cookies are working properly
    await page.goto('http://httpbin.org/cookies');
    const content = await page.$eval('body', e => e.innerText)
    console.log(content)

    // do other stuff
    // close the page and browser, we are done with this
    // deduplicate this however you like
    await page.close();
    await browser.close();
    return true;
}

4。创建我们自己的真棒木偶师实例

// let's use this

(async () => {
    const loginTester = new myAwesomePuppeteer()
    await loginTester.getLoginCookies()
    await loginTester.useHeadless()
})()

完整代码

浏览代码以更好地理解它。都评论了

const puppeteer = require('puppeteer');

class myAwesomePuppeteer {
    constructor() {
        // keeps the cookies on the class scope
        this.cookies;
    }

    // creates a browser instance and applies all kind of setup
    async init(headless) {
        const browser = await puppeteer.launch({
            headless
        });
        const page = await browser.newPage();
        // do more page stuff before loading, ie: user agent and so on
        return {
            page,
            browser
        };
    }

    // will take care of our login using headful
    async getLoginCookies() {
        const {
            page,
            browser
        } = await this.init(false)

        // asume we load page and login here using some method
        // and the website sets some cookie
        await page.goto('http://httpbin.org/cookies/set/authenticated/true')

        // store the cookie somewhere
        this.cookies = await page.cookies()

        // close the page and browser, we are done with this
        await page.close();
        await browser.close();
        return true;
    }

    // continue with our normal headless stuff
    async useHeadless() {
        const {
            page,
            browser
        } = await this.init(true)

        // we set all cookies we got previously
        await page.setCookie(...this.cookies)

        // verify the cookies are working properly
        await page.goto('http://httpbin.org/cookies');
        const content = await page.$eval('body', e => e.innerText)
        console.log(content)

        // do other stuff
        // close the page and browser, we are done with this
        // deduplicate this however you like
        await page.close();
        await browser.close();
        return true;
    }
}

// let's use this
(async () => {
    const loginTester = new myAwesomePuppeteer()
    await loginTester.getLoginCookies()
    await loginTester.useHeadless()
})()

这是结果，

➜  node app.js
{
  "cookies": {
    "authenticated": "true"
  }
}

简而言之，

  • 您可以使用cookies函数获取cookies。
  • 您可以使用 Edit This Cookie 等扩展程序从普通浏览器获取 cookie。
  • 您可以使用 setCookie 设置您从浏览器获得的任何类型的 cookie。