How to access Chrome Downloads elements in Puppeteer?

Question

Does anyone know to access and interact with items in the Chromes downloads list using Puppeteer?

Everything I've tried doesn't match any elements and returns 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);
    }
})();

user_5196394 · Answer

This page use DocumentFragment to generate the content, then it is a little hard to query the DOM as normally. But you can use evaluateHandle function to execute a js script on the page, then you can query the #downloadsList by this way:

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

How to get the js snippet?

How to access Chrome Downloads elements in Puppeteer?

1 Answers