Ляльковий: передати змінну в .evaluate ()

Я намагаюся передати змінну у 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();

  }

})();

Ви повинні передати змінну як аргумент pageFunctionподібному:

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

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

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

Аргументи також можна серіалізувати: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args .

Я закликаю вас дотримуватися цього стилю, адже це зручніше і читабельніше .

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

Єдина змінна:

Ви можете передати одну змінну до page.evaluate()наступного синтаксису:

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

Примітка: Вам не потрібно вкладати змінну в (), якщо ви не збираєтеся передавати кілька змінних.

Кілька змінних:

Можна передати кілька змінних за page.evaluate()допомогою наступного синтаксису:

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

Примітка. Закривати змінні {}не потрібно.

Ми зайняли досить багато часу, щоб зрозуміти, що console.log()в evaluate()консолі вузла не відображається.

Довідка: https://github.com/GoogleChrome/puppeteer/isissue/1944

все, що виконується всередині сторінки. Функція оцінювання виконується в контексті сторінки браузера. Сценарій працює в браузері не в node.js, тому, якщо ви ввійдете в систему, він відобразиться на консолі браузера, який, якщо ви працюєте без голови, ви не побачите. Ви також не можете встановити точку розриву вузла всередині функції.

Сподіваюся, що це може допомогти.

Для передачі a functionє два способи зробити це.

// 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до параметрів запуску тесту

У мене є приклад машинопису, який може допомогти комусь новому в машинописі.

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

Зі сторінкою. $$ eval

//..
const page = await browser.newPage();
const hrefs = await page.$$eval('#fbar #fsl a', as => as.map(a => a.href));
console.log(hrefs);
//..

[див. також на сторінці. $ eval для одного селектора]