javascript - Puppeteer：获取不在初始 DOM 中的 DOM 元素

Question

我试图弄清楚如何在例如 JS 库中获取元素，该库在单击它们后加载其图像。

我以Viewer.js的演示为例。具有类的元素.viewer-move.viewer-transition不在初始 DOM 中。单击图像后，该元素可用，但如果我使用$eval该字符串为空。如果我在 Puppeteer 浏览器中打开控制台并执行，document.querySelector('.viewer-move.viewer-transition')我会得到元素，但在代码中该元素不可用。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://fengyuanchen.github.io/viewerjs/');
    await page.click('[data-original="images/tibet-1.jpg"]');
    let viewer = await page.$eval('.viewer-move.viewer-transition', el => el.innerHTML);
    console.log(viewer);
})();

标签： javascriptnode.jspuppeteer

Answer 1

您会得到空字符串，因为该元素没有内容，因此内部 HTML 是空的。outerHTML似乎工作：

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const [page] = await browser.pages();

    await page.goto('https://fengyuanchen.github.io/viewerjs/');

    await page.click('[data-original="images/tibet-1.jpg"]');
    await page.waitForSelector('.viewer-move.viewer-transition');

    const viewer = await page.$eval('.viewer-move.viewer-transition', el => el.outerHTML);
    console.log(viewer);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();