Marionnettiste: passer la variable dans .evaluate ()

J'essaie de passer une variable dans une page.evaluate()fonction dans Puppeteer , mais lorsque j'utilise l'exemple très simplifié suivant, la variable evalVarn'est pas définie.

Je suis nouveau sur Puppeteer et je ne trouve aucun exemple sur lequel s'appuyer, j'ai donc besoin d'aide pour transmettre cette variable dans la page.evaluate()fonction afin de pouvoir l'utiliser à l'intérieur.

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

  }

})();

Vous devez passer la variable comme argument à pageFunctionceci:

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

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

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

Les arguments peuvent également être sérialisés: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args .

Je vous encourage à vous en tenir à ce style, car il est plus pratique et plus lisible .

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

Variable unique:

Vous pouvez passer une variable à l' page.evaluate()aide de la syntaxe suivante:

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

Remarque: vous n'avez pas besoin de placer la variable dans (), sauf si vous allez passer plusieurs variables.

Variables multiples:

Vous pouvez transmettre plusieurs variables à l' page.evaluate()aide de la syntaxe suivante:

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

Remarque: il {}n'est pas nécessaire d' inclure vos variables à l'intérieur .

Il m'a fallu un certain temps pour comprendre que console.log()dans evaluate()ne peut pas s'afficher dans la console du nœud.

Réf: https://github.com/GoogleChrome/puppeteer/issues/1944

tout ce qui est exécuté dans la fonction page.evaluate se fait dans le contexte de la page du navigateur. Le script s'exécute dans le navigateur et non dans node.js, donc si vous vous connectez, il affichera dans la console du navigateur que si vous utilisez headless, vous ne verrez pas. Vous ne pouvez pas non plus définir un point d'arrêt de nœud dans la fonction.

J'espère que cela peut vous aider.

Pour passer a function, il y a deux façons de le faire.

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

Vous pouvez ajouter devtools: trueaux options de lancement pour le test

J'ai un exemple dactylographié qui pourrait aider quelqu'un de nouveau en tapuscrit.

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

Avec page. $$ eval

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

[voir aussi à la page. $ eval pour un seul sélecteur]