Как очистить сайт с помощью кукловода, включая поля ввода, установленные с помощью $ .val ()?

Question

Я пытаюсь скопировать DOM веб-сайта, используя puppeteer и что-то вроде

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

Проверьте значение ввода на клонированной странице.