Depurar o Puppeteer

Desativar o modo headless

Às vezes, é útil ver o que o navegador está exibindo. Em vez de iniciar no modo headless, inicie uma versão completa do navegador usando headless: false:

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

Desacelerar

A opção slowMo reduz a velocidade das operações do Puppeteer no valor especificado de milissegundos. É outra forma de saber o que está acontecendo.

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

Capturar saída do console

É possível detectar o evento console. Isso também é útil ao depurar o código em page.evaluate():

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

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

Usar o depurador no navegador de código do aplicativo

Há dois contextos de execução: o node.js que está executando o código de teste e o navegador executando o código do aplicativo que está sendo testado. Isso permite depurar o código no navegador de código do aplicativo, o código dentro de evaluate().

Usar {devtools: true} ao iniciar o Puppeteer

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

Alterar o tempo limite padrão do teste

  • jest::jest.setTimeout(100000);
  • jasmim:jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha:this.timeout(100000);. Não se esqueça de mudar o teste para usar a função, e não '=>'

Adicione uma instrução de avaliação com o depurador dentro ou adicione o depurador a uma instrução de avaliação:

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

Em seguida, o teste para a execução na instrução de avaliação acima, e o Chromium para no modo de depuração.

Usar o depurador no node.js

Isso permite depurar o código de teste. Por exemplo, é possível ignorar await page.click() no script node.js e ver o clique acontecer no navegador do código do aplicativo.

Não é possível executar await page.click() no console do DevTools devido ao bug 833928 do Chromium (link em inglês). Portanto, se quiser testar algo, é preciso adicioná-lo ao arquivo de teste.

  1. Adicione o depurador ao teste, por exemplo: javascript debugger; await page.click('a[target=_blank]');
  2. Defina headless como "false".
  3. Execute o nó --inspect-brk, por exemplo, node --inspect-brk node_modules/.bin/jest tests.
  4. No Chrome, abra chrome://inspect/#devices e clique em inspect.
  5. No navegador de teste recém-aberto, digite F8 para retomar a execução do teste.
  6. Agora o depurador está pronto e você pode depurar no navegador de teste

Ativar o registro detalhado

O tráfego de protocolo interno do DevTools é registrado com o módulo de depuração no namespace do 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'

Depurar o código do Puppeteer (nó)

Use ndb:

  • npm install -g ndb (ou use npx).
  • Adicione um depurador ao código do Puppeteer (nó).
  • Adicione ndb (ou npx ndb) antes do comando de teste. Por exemplo: ndb jest ou ndb mocha (ou npx ndb jest / npx ndb mocha).
  • depure seu teste dentro do Chromium sem parar!