如何在 Puppeteer 中访问 Chrome 下载元素？答案

【问题标题】：How to access Chrome Downloads elements in Puppeteer?如何在 Puppeteer 中访问 Chrome 下载元素？
【发布时间】：2021-10-31 13:39:48
【问题描述】：

有谁知道使用 Puppeteer 访问 Chrome 下载列表中的项目并与之交互？

我尝试过的所有内容都不匹配任何元素并返回 null。

'use strict';

const CHROME_BINARY_PATH = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
const puppeteer = require('puppeteer');

(async () => {
    try {

        const browser = await puppeteer.launch({
      executablePath: CHROME_BINARY_PATH,
            defaultViewport: null,
            headless: false,
            devtools: false,
            isMobile: false,
            hasTouch: false,
            args: [
                '--window-size=1920,1080',
                '--disable-web-security',
                '--disable-features=IsolateOrigins,site-per-process'
            ],
            userDataDir: './user_data'
        });
        const page = (await browser.pages())[0]; // load an empty page
        await page.goto('chrome://downloads/',{ waitUntil: 'networkidle2', timeout: 30000 });

        console.log('getting downloads list element');
        await page.waitForSelector('#downloadsList',{ timeout: 5000 });
        let downloadsList = await page.$('#downloadsList');
        console.log(downloadsList);

    } catch (e) {
        console.log(e);
    }
})();

【问题讨论】：

这能回答你的问题吗？ puppeteer doesn't open a url without protocol
@theDavidBarton - 不，它可以正常打开 URL。
这很好（通常 puppeteer 不会打开没有协议的页面，例如 chrome:// pages）。那么shadow root里面不就是下载列表吗？这对 puppeteer 来说是一个棘手的动作。

标签： node.js puppeteer chromium

【解决方案1】：

这个页面使用DocumentFragment来生成内容，那么像往常一样查询DOM有点困难。但是你可以使用evaluateHandle 函数在页面上执行一个js脚本，然后可以通过这种方式查询#downloadsList：

await page.waitForSelector("body > downloads-manager", { timeout: 5000 });
const downloadsList = await page.evaluateHandle(`document.querySelector("body > downloads-manager").shadowRoot.querySelector("#downloadsList")`);
    console.log(downloadsList);

js sn-p如何获取？

【讨论】：