发射后如何无头打开？

Question

我想加载页面时不带头让我登录。

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

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

Answer 1

您无法在飞行中无头切换。但是您可以根据需要使用AJAX requests和cookies共享登录名。

我们将创建一个简单的类来保持代码的干净（或者我相信这些类型的工作，因为它们通常会在以后变得很大）。但是，您可以在没有所有这些复杂性的情况下执行此操作。另外，请确保Cookie已序列化。不要将数组传递给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阵列。这是您可以执行的操作，

setCookie

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函数来获取cookie。
• 您可以使用之类的扩展程序从常规浏览器中获取Cookie。
• 您可以使用setCookie设置从浏览器获取的任何一种cookie。