Déboguer Puppeteer

Désactiver le mode sans interface graphique

Il est parfois utile de voir ce que le navigateur affiche. Au lieu de lancer le navigateur en mode sans interface graphique, lancez une version complète du navigateur à l'aide de headless: false:

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

Ralentir

L'option slowMo ralentit les opérations Puppeteer de la durée spécifiée en millisecondes. C’est une autre façon de vous aider à savoir ce qui se passe.

const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, // slow down by 250ms
});

Capturer la sortie de la console

Vous pouvez écouter l'événement console. Cette approche est également utile lors du débogage de code dans page.evaluate():

page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

Utiliser le débogueur dans le navigateur de code de l'application

Il existe deux contextes d'exécution: Node.js qui exécute le code de test et le navigateur exécutant le code de l'application en cours de test. Cela vous permet de déboguer le code dans le navigateur de code d'application, c'est-à-dire le code dans evaluate().

Utilisation de {devtools: true} lors du lancement de Puppeteer

const browser = await puppeteer.launch({ devtools: true });

Modifier le délai avant expiration par défaut du test

  • jest::jest.setTimeout(100000);
  • jasmine:jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha:this.timeout(100000); (n'oubliez pas de modifier le test pour utiliser la fonction et non '=>')

Ajoutez une instruction d'évaluation avec un débogueur à l'intérieur ou ajoutez un débogueur à une instruction d'évaluation existante:

await page.evaluate(() => {
  debugger;
});

Le test cesse ensuite de s'exécuter dans l'instruction d'évaluation ci-dessus et Chromium s'arrête en mode débogage.

Utiliser le débogueur dans Node.js

Cela vous permet de déboguer le code de test. Par exemple, vous pouvez passer à await page.click() dans le script Node.js et voir le clic se produire dans le navigateur de code d'application.

Vous ne pouvez pas exécuter await page.click() dans la console des outils de développement en raison du bug Chromium 833928. Si vous voulez essayer quelque chose, vous devez l'ajouter à votre fichier de test.

  1. Ajoutez un débogueur à votre test, par exemple : javascript debugger; await page.click('a[target=_blank]');
  2. Définissez "headless" (sans interface graphique) sur "false" (faux).
  3. Exécutez le nœud --inspect-brk, par exemple node --inspect-brk node_modules/.bin/jest tests.
  4. Dans Chrome, ouvrez chrome://inspect/#devices et cliquez sur inspect.
  5. Dans le navigateur de test nouvellement ouvert, saisissez F8 pour reprendre l'exécution du test.
  6. Vous avez lancé le débogueur, et vous pouvez le faire dans le navigateur de test.

Activer la journalisation détaillée

Le trafic du protocole DevTools interne est enregistré avec le module de débogage dans l'espace de noms Puppeteer.

# Basic verbose logging
env DEBUG="puppeteer:*" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network
# domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

Déboguer votre code Puppeteer (nœud)

Utilisez ndb:

  • npm install -g ndb (ou utilisez npx).
  • Ajoutez un débogueur à votre code (nœud) Puppeteer.
  • Ajoutez ndb (ou npx ndb) avant votre commande de test. Par exemple : ndb jest ou ndb mocha (ou npx ndb jest / npx ndb mocha).
  • Déboguer ton test dans Chromium comme un pro !