Kuklacı: .evaluate () içindeki değişkeni geçirin

Puppeteer'da bir değişkeni bir page.evaluate()işleve geçirmeye çalışıyorum , ancak aşağıdaki çok basitleştirilmiş örneği kullandığımda, değişken tanımsız.evalVar

Puppeteer'da yeniyim ve üzerine inşa edilecek herhangi bir örnek bulamıyorum, bu page.evaluate()yüzden içeride kullanabilmek için bu değişkeni işleve geçirmede yardıma ihtiyacım var.

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

  }

})();

Değişkeni aşağıdaki gibi bir argüman olarak iletmelisiniz pageFunction:

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

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

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

Argümanlar ayrıca serileştirilebilir: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args .

Bu stile bağlı kalmanızı tavsiye ederim çünkü daha rahat ve okunaklı .

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

Tek Değişken:

Sen geçebilir bir değişken için page.evaluate()aşağıdaki sözdizimini kullanarak:

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

Not:() Birden çok değişkeni aktarmayacaksanız değişkeni içine almanız gerekmez .

Çoklu Değişkenler:

Sen geçebilir birden çok değişkeni için page.evaluate()aşağıdaki sözdizimini kullanarak:

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

Not: Değişkenlerinizi içine almak {}gerekli değildir.

O anlamaya bana oldukça zaman aldı console.log()içinde evaluate()düğüm konsolunda gösteremez.

Referans: https://github.com/GoogleChrome/puppeteer/issues/1944

page.evaluate işlevi içinde çalıştırılan her şey tarayıcı sayfası bağlamında yapılır. Komut dosyası node.js'de değil tarayıcıda çalışıyor, bu nedenle oturum açarsanız tarayıcı konsolunda görünecek ve başsız çalıştırıyorsanız göremeyeceksiniz. Ayrıca, işlevin içinde bir düğüm kesme noktası ayarlayamazsınız.

Umarım bu yardımcı olabilir.

Geçiş a functioniçin bunu yapmanın iki yolu vardır.

// 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: trueTest için başlatma seçeneklerine ekleyebilirsiniz

Daktilo konusunda yeni birine yardımcı olabilecek bir typcript örneğim var.

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

İle sayfa. $$ eval

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

[ayrıca . tek bir seçici için $ eval sayfasına bakın ]