时间戳

首页 > 解决方案 > Puppeteer：登录对话框上的访问字段

javascript - Puppeteer：登录对话框上的访问字段

问题描述

我正在尝试使用 Node.js 通过 Puppeteer / Headless Chrome 从我们的 Intranet 中的页面生成 .pdf。

从随机页面生成 .pdf 没有问题，但我正在努力处理打开页面时出现的登录框架。

它看起来像这样：

登录

我找不到访问“Nutzername”和“Passwort”这两个字段以登录的方法，因为 Chrome 的开发人员工具不显示字段名称。

打开此页面时生成的 .pdf 文件或屏幕截图始终显示“未经授权”，就好像 Headless Chrome 在此对话框中按下了 Abbrechen（中止）一样。

到目前为止我尝试的是这样的：

const puppeteer = require('puppeteer');

(async () => {
    let url = 'http://intranet...../'
    let browser = await puppeteer.launch()
    let page = await browser.newPage()
    await page.goto(url, {waitUntil: 'networkidle2' })

    await page.type('#Nutzername', '....'); // Error here, because the identifier is wrong.

    await page.keyboard.press("Tab");

    await page.type('#Passwort', '....');

    await page.type(String.fromCharCode(13)); // Enter

    await page.pdf({
        format:"A4",
        path:'./Speiseplan.pdf',
        displayHeaderFooter: false,
        printBackground:true
    })
    process.exit()
})();

不能将 Puppeteer 与那种登录对话框一起使用吗？

标签： javascriptnode.jspuppeteer

解决方案

Chrome 中的开发人员工具将无法挂钩这些字段，因为它们不是 DOM 的一部分；当服务器指示需要通过HTTP 基本身份验证进行身份验证时，它们是由 Chromium 本身本地生成的字段。

幸运的是，puppeteer它位于 DOM 和它生成的 Chromium 实例的本机层之上，并公开了page.authenticate()用于处理此类情况的方法。在导航到要求基本身份验证凭据的页面之前调用page.authenticate()以设置要使用的用户名/密码对：

const puppeteer = require('puppeteer');

(async () => {
    let url = 'http://intranet...../'
    let browser = await puppeteer.launch()
    let page = await browser.newPage()
    await page.authenticate({'username':'YOUR_BASIC_AUTH_USERNAME', 'password': 'YOUR_BASIC_AUTH_PASSWORD'});
    await page.goto(url, {waitUntil: 'networkidle2' })

    await page.pdf({
        format:"A4",
        path:'./Speiseplan.pdf',
        displayHeaderFooter: false,
        printBackground:true
    })
    process.exit()
})();

DEV.to 上的 Sony AK有一篇简短而有趣的文章，其中包含示例代码，说明了page.authenticate()的用法。

推荐阅读