javascript - 启动后如何打开无头？

Question

我想加载无头页面让我登录。

登录后我想隐藏它，打开无头并让它做它必须做的事情。

启动后如何打开/关闭无头？

Answer 1

你不能在飞行中切换无头。但是您可以根据需要使用cookie和setCookie共享登录信息。

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

将有三个主要功能。

1.init()

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

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;
}

如果您可以手动提供 cookie，则不需要此功能。您可以使用 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. 创建我们自己很棒的 puppeteer 实例

// 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功能获取 cookie。
• 您可以使用Edit This Cookie 之类的扩展程序从您的普通浏览器中获取 cookie。
• 您可以使用setCookie设置从浏览器获得的任何类型的 cookie。