Puppeteer: tracing.start no parece generar capturas de pantalla

Creado en 18 oct. 2017 · 3Comentarios · Fuente: puppeteer/puppeteer

Estoy tratando de obtener un ejemplo de rastreo básico con la opción de capturas de pantalla habilitada, sin embargo, produce trace.json, pero no capturas de pantalla.

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

¿Cuál es el resultado esperado?

Produce capturas de pantalla de la línea de tiempo junto con trace.json

¿Qué sucede en su lugar?

Produce solo trace.json. No se generaron capturas de pantalla.

Usando lo siguiente

Versión del titiritero: 0.12.0
Versión de plataforma/SO: Mac OSX 10.13
URL (si corresponde): google.com

Fuente

kesava

Comentario más útil

Si desea exportar las capturas de pantalla de rastreo, este ejemplo rápido basado en el ejemplo de @Everettss en el problema 1368 parece funcionar para mí.

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 en 14 dic. 2017

👍3 ❤2

Todos 3 comentarios

Las capturas de pantalla de @kesava están incrustadas en el seguimiento: intente arrastrar y soltar el archivo trace.json en el panel de rendimiento de devtools.

aslushnikov en 31 oct. 2017

Si desea exportar las capturas de pantalla de rastreo, este ejemplo rápido basado en el ejemplo de @Everettss en el problema 1368 parece funcionar para mí.

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 en 14 dic. 2017

👍3 ❤2

@QmarkC Creo que falla cuando Chrome falla.
¿Cómo puedo implementar esto, de modo que pueda saber en qué punto se bloquea Chrome?