Puppeteer: tracing.start parece não gerar capturas de tela

Criado em 18 out. 2017 · 3Comentários · Fonte: puppeteer/puppeteer

Estou tentando obter um exemplo básico de rastreamento com o trabalho ativado com a opção de capturas de tela, no entanto, ele produz trace.json, mas não capturas de tela.

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.tracing.start({screenshots: true, path: 'trace.json'});  
  await page.goto('https://www.google.com');
  await page.tracing.stop();  
  await browser.close();
})();

Qual é o resultado esperado?

Produza capturas de tela da linha do tempo junto com trace.json

O que acontece em vez disso?

Produz apenas trace.json. Nenhuma captura de tela foi exibida.

Usando o seguinte

Versão do marionetista: 0.12.0
Versão da plataforma/SO: Mac OSX 10.13
URLs (se aplicável): google.com

Fonte

kesava

Comentários muito úteis

Se você deseja exportar as capturas de tela de rastreamento, este exemplo rápido baseado no exemplo @Everettss na edição 1368 parece funcionar para mim.

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.tracing.start({ screenshots: true, path: 'trace.json' });
  await page.goto('https://www.google.com', { timeout: 60000 });
  await page.tracing.stop();

  // --- extracting data from trace.json ---
  const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
  const traceScreenshots = tracing.traceEvents.filter(x => (
      x.cat === 'disabled-by-default-devtools.screenshot' &&
      x.name === 'Screenshot' &&
      typeof x.args !== 'undefined' &&
      typeof x.args.snapshot !== 'undefined'
  ));
  traceScreenshots.forEach(function(snap, index) {
    fs.writeFile('trace-screenshot-'+index+'.png', snap.args.snapshot, 'base64', function(err) {
      if (err) {
        console.log('writeFile error', err);
      }
    });
  });
  // --- end extracting data from trace.json ---

  await page.close();
})();

QmarkC em 14 dez. 2017

👍3 ❤2

Todos 3 comentários

@kesava As capturas de tela são incorporadas ao rastreamento: tente arrastar e soltar o arquivo trace.json no painel de desempenho do devtools.

aslushnikov em 31 out. 2017

Se você deseja exportar as capturas de tela de rastreamento, este exemplo rápido baseado no exemplo @Everettss na edição 1368 parece funcionar para mim.

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.tracing.start({ screenshots: true, path: 'trace.json' });
  await page.goto('https://www.google.com', { timeout: 60000 });
  await page.tracing.stop();

  // --- extracting data from trace.json ---
  const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
  const traceScreenshots = tracing.traceEvents.filter(x => (
      x.cat === 'disabled-by-default-devtools.screenshot' &&
      x.name === 'Screenshot' &&
      typeof x.args !== 'undefined' &&
      typeof x.args.snapshot !== 'undefined'
  ));
  traceScreenshots.forEach(function(snap, index) {
    fs.writeFile('trace-screenshot-'+index+'.png', snap.args.snapshot, 'base64', function(err) {
      if (err) {
        console.log('writeFile error', err);
      }
    });
  });
  // --- end extracting data from trace.json ---

  await page.close();
})();

QmarkC em 14 dez. 2017

👍3 ❤2

@QmarkC Acho que falha quando o chrome trava.
Como posso implementar isso, para que eu possa saber em que ponto o chrome está travado?