google-chrome - 如何从控制台调用 Chrome 节点截图

Question

我知道您可以通过命令提示符捕获单个 html 节点，但是是否可以从类似于 Puppeteer 的控制台以编程方式执行此操作？我想循环页面上的所有元素并为偶尔的一次性项目捕获它们，我不想在 puppeteer 中设置完整的身份验证过程。

我指的是这个功能:


但是从控制台执行，例如在 foreach 或类似的过程中。

See the puppeteer reference here.

有这样的效果:$x("//*[contains(@class, 'special-class-name')]").forEach((el)=> el.screenshot())

Answer 1

我刚刚制作了一个脚本，它对谷歌主页中的每个提交按钮进行截图。只需看看并从中汲取一些灵感。

const puppeteer = require('puppeteer')

;(async () => {
    const browser = await puppeteer.launch({
        headless:false,
        defaultViewport:null,
        devtools: true,
        args: ['--window-size=1920,1170','--window-position=0,0']
    })

    const page = (await browser.pages())[0]

    const open = await page.goto ( 'https://www.google.com' )

    const submit = await page.$$('input[type="submit"]')

    const length = submit.length

    let num = 0

    const shot = submit.forEach( async elemHandle => {
        num++
        await elemHandle.screenshot({
            path : `${Date.now()}_${num}.png`
        })
    })

})()