如何使用 puppeteer 抓取网站，包括通过 $.val() 设置的输入字段？

【问题标题】：How to scrape a website using puppeteer, including input fields set via $.val()?如何使用 puppeteer 抓取网站，包括通过 $.val() 设置的输入字段？
【发布时间】：2018-06-07 11:00:29
【问题描述】：

我正在尝试使用 puppeteer 和类似的东西复制网站的 DOM

page = await this.createPage(browser);
page.setContent(await originalPage.content());

不幸的是，DOM 包含输入字段，其内容是使用 jquery 的val()（由 Backbone.Stickit）设置的。据我了解，val() 不会修改 DOM 属性 value="" 而是修改 DOM 属性 .value。

目前，当我复制它们时，这会导致输入字段为空。

如何复制页面内容，以便通过val() 设置的输入字段值实际出现在复制的 DOM 树中？

【问题讨论】：

标签： jquery html puppeteer

【解决方案1】：

如果该值是由jQuery.val 方法设置的，它不会自动反映到value 属性。您可以尝试像这样手动操作：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const originalPage = await browser.newPage();

  await originalPage.goto("https://duckduckgo.com/");

  await originalPage.evaluate(() => {
    // Say we have an input with ".value" set
    const $input = jQuery(".js-search-input");
    $input.val("some test value");

    alert(`property value: "${$input[0].value}", attribute value: "${$input.attr("value")}"`);

    // We could run something like this to reflect ".value" property
    // to "value" attribute
    // You can make the selector more specific. Something like ".myForm input, .myForm select ..."
    $("input, select, textarea").each(function() {
      if (this.value) {
        $(this).attr("value", this.value);
      }
    });

      alert(`property value: "${$input[0].value}", attribute value: "${$input.attr("value")}"`);
  });

  const clonedPage = await browser.newPage();
  await clonedPage.setContent(await originalPage.content());
})().catch(console.error);

查看克隆页面中的输入值。

【讨论】：