Question

我正在尝试使用puppeteer复制网站的DOM以及

的内容

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

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

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

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

Answer 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);

在克隆的页面中签出输入值。

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

1 个答案: