Я пытаюсь передать переменную в функцию page.evaluate () в Puppeteer, но когда я использую следующий очень упрощенный пример, переменная evalVar не определено.

Я новичок в Puppeteer и не могу найти никаких примеров для развития, поэтому мне нужна помощь в передаче этой переменной в функцию page.evaluate (), чтобы я мог использовать ее внутри.

const puppeteer = require('puppeteer');

(async() => {

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

  const evalVar = 'WHUT??';

  try {

    await page.goto('https://www.google.com.au');
    await page.waitForSelector('#fbar');
    const links = await page.evaluate((evalVar) => {

      console.log('evalVar:', evalVar); // appears undefined

      const urls = [];
      hrefs = document.querySelectorAll('#fbar #fsl a');
      hrefs.forEach(function(el) {
        urls.push(el.href);
      });
      return urls;
    })
    console.log('links:', links);

  } catch (err) {

    console.log('ERR:', err.message);

  } finally {

    // browser.close();

  }

})();

Ответы (7)

Вы должны передать переменную в качестве аргумента функции pageFunction следующим образом:

const links = await page.evaluate((evalVar) => {

  console.log(evalVar); // 2. should be defined now
  …

}, evalVar); // 1. pass variable as an argument

Вы можете передать несколько переменных, передав дополнительные аргументы в page.evaluate ():

await page.evaluate((a, b c) => { console.log(a, b, c) }, a, b, c)

Аргументы должны быть либо сериализуемыми как JSON, либо JSHandles объектов в браузере: https://pptr.dev/#? Show = api-pageevaluatepagefunction-args

Мне потребовалось довольно много времени, чтобы понять, что console.log () in Assessment () не может отображаться в консоли узла.

Ссылка: https://github.com/GoogleChrome/puppeteer/issues/1944

все, что выполняется внутри функции page.evaluate, выполняется в контексте страницы браузера. Сценарий выполняется в браузере, а не в node.js, поэтому, если вы зарегистрируетесь, он отобразится в консоли браузера, которую вы не увидите, если вы работаете без головы. Вы также не можете установить точку останова внутри функции.

Надеюсь, это поможет.

У меня есть пример машинописного текста, который может помочь кому-то, кто новичок в машинописном тексте.

const hyperlinks: string [] = await page.evaluate((url: string, regex: RegExp, querySelect: string) => {
.........
}, url, regex, querySelect);

Я рекомендую вам придерживаться этого стиля, потому что он более удобный и читаемый.

let name = 'jack';
let age  = 33;
let location = 'Berlin/Germany';

await page.evaluate(({name, age, location}) => {

    console.log(name);
    console.log(age);
    console.log(location);

},{name, age, location});

Для передачи функцииэто можно сделать двумя способами.

// 1. Defined in evaluationContext
await page.evaluate(() => {
  window.yourFunc = function() {...};
});
const links = await page.evaluate(() => {
  const func = window.yourFunc;
  func();
});


// 2. Transform function to serializable(string). (Function can not be serialized)
const yourFunc = function() {...};
const obj = {
  func: yourFunc.toString()
};
const otherObj = {
  foo: 'bar'
};
const links = await page.evaluate((obj, aObj) => {
   const funStr = obj.func;
   const func = new Function(`return ${funStr}.apply(null, arguments)`)
   func();

   const foo = aObj.foo; // bar, for object
   window.foo = foo;
   debugger;
}, obj, otherObj);

Вы можете добавить devtools: true к параметрам запуска для теста

Версия немного отличается от ответа @wolf выше. Сделайте код более удобным для повторного использования в разных контекстах.

// служебные функции
экспорт const pipe = (... fns) => initialVal => fns.reduce ((acc, fn) => fn (acc), initialVal)
экспорт const pluck = key => obj => obj [key] || нулевой
экспорт const map = fn => item => fn (элемент)
// эти переменные будут преобразованы в строку, посмотрите ниже на fn.toString ()
const updatedAt = await page.evaluate (
  ([селектор, утилита]) => {
    let {pipe, map, pluck} = util
    pipe = новая функция (`return $ {pipe}`) ()
    map = новая функция (`return $ {map}`) ()
    pluck = новая функция (`return $ {pluck}`) ()

    обратная труба (
      s => document.querySelector (s),
      pluck ('textContent'),
      карта (текст => текст.trim ()),
      map (date => Date.parse (дата)),
      карта (timeStamp => Promise.resolve (timeStamp))
    ) (селектор)
  },
  [
    '# table-announcements tbody td: nth-child (2) .d-none',
    {pipe: pipe.toString (), map: map.toString (), pluck: pluck.toString ()},
  ]
)

Также не то, что функции внутри канала не могут использовать что-то вроде этого

// неверно, я не знаю почему
труба (document.querySelector)

// должно быть
труба (s => document.querySelector (s))

Одиночная переменная:

Вы можете передать одну переменную в page.evaluate (), используя следующий синтаксис:

await page.evaluate(example => { /* ... */ }, example);

Примечание: Вам не нужно заключать переменную в (), если вы не собираетесь передавать несколько переменных.

Несколько переменных:

Вы можете передать несколько переменных в page.evaluate (), используя следующий синтаксис:

await page.evaluate((example_1, example_2) => { /* ... */ }, example_1, example_2);

Примечание: Заключение переменных в {} не обязательно.

2022 WebDevInsider