Generando PDFs

Clase 7 de 24 • Curso Avanzado de Automatización de Pruebas con Puppeteer

Jose Alzugaray

student•

Si llegan a obtener este error: ProtocolError: Protocol error (Page.printToPDF): Printing is not available deben poner el headless en true

Javier Fuentes Mora

teacher•

muchas gracias de nuevo por el aporte son de mucha ayuda!

Hernan Camilo Jimenez Garcia

student•

Gracias, justamente tuve ese error!

Jesus Cuadro

student•

Con esta extension pueden visualizar PDF's en VSCODE 👌

Laura Ivonne Moreno

student•

gracias a todos los que comparten su codigo y anotaciones, los tqm

Luis Jhordy Mamani Arias

student•

El tema de las comas si es mucho muy importante ya me comí 2 xd

Luis Jhordy Mamani Arias

student•

const puppeteer = require('puppeteer');

describe('Capturas de pantalla', () => {
    let browser;
    let page;
    beforeAll(async () => {
        browser = await puppeteer.launch({
            headless: true,
            defaultViewport: null,
        });

        const context = await browser.createIncognitoBrowserContext();//MODO INCOGNITO comportamiento evadir modo incognito
        page = await context.newPage()
        //Aqui apuntamos la pantalla de la cual queremos apuntar
        await page.goto('https://www.google.com/', { waitUntil: 'networkidle0' });
    }, 10000);

    afterAll(async () => {
        await browser.close();
    });

    test('PDF de pantalla completa', async () => {

        let pdfCSS =[]
        pdfCSS.push('<style>')
        pdfCSS.push('h1{ font-size:10px; margin-left:30px;}')
        pdfCSS.push('</style>')

        const css = pdfCSS.join('')

        await page.pdf({
            path:'./google.pdf',
            format:'A4',
            printBackground : true,
            displayHeaderFooter: true,
            headerTemplate: css + '<h2>' + 'Mira El Script que realice PDF con pupeteer' + '</h2>',
            footerTemplate: css + '<h2> page <span class="pageNumber"></span> of <span class="totalPages"></span></h2>',
            
            margin:{
                top:'100px',
                botton:'200px',
                right:'30px',
                left: '30px'

            }
        
        })
    })

    test('PDF de pantalla completa en modo landscape', async () => {

        let pdfCSS =[]
        pdfCSS.push('<style>')
        pdfCSS.push('h1{ font-size:10px; margin-left:30px;}')
        pdfCSS.push('</style>')

        const css = pdfCSS.join('')

        await page.pdf({
            path:'./googleLandscape.pdf',
            format:'A4',
            printBackground : true,
            displayHeaderFooter: true,
            headerTemplate: css + '<h2>' + 'Mira El Script que realice PDF con pupeteer' + '</h2>',
            footerTemplate: css + '<h2> page <span class="pageNumber"></span> of <span class="totalPages"></span></h2>',
            
            margin:{
                top:'100px',
                botton:'200px',
                right:'30px',
                left: '30px'

            },
            lanscape: true
        })
    })

}, 350000)

Julianny Caicedo

student•

GOOGLELANDSCAPE

jest.setTimeout(60000); // aumenta el timeout por si la página tarda en cargar

const puppeteer = require('puppeteer');

describe('Generar PDF con Puppeteer', () => {

let browser;

let page;

beforeAll(async () => {

browser = await puppeteer.launch({

headless: 'new', // usa el modo headless moderno

args: ['--no-sandbox', '--disable-setuid-sandbox']

});

page = await browser.newPage();

await page.setViewport({ width: 1280, height: 800 });

await page.goto('https://google.com', { waitUntil: 'networkidle2' });

});

afterAll(async () => {

if (page) await page.close();

if (browser) await browser.close();

});

test('PDF de pantalla completa en modo landscape', async () => {

await page.pdf({

path: './googleLandscape.pdf',

format: 'A4',

landscape: true,

printBackground: true,

displayHeaderFooter: true,

headerTemplate: `

Mi primer PDF con Puppeteer

</div>`,

footerTemplate: `

Page <span class="pageNumber"></span> of <span class="totalPages"></span>

</div>`,

margin: {

top: '100px',

bottom: '100px',

left: '30px',

right: '30px'

}

});

console.log('PDF generado: google.pdf');

});

Julianny Caicedo

student•

codigo actualizado, Generando PDFs

jest.setTimeout(60000); // aumenta el timeout por si la página tarda en cargar

const puppeteer = require('puppeteer');

describe('Generar PDF con Puppeteer', () => {

let browser;

let page;

beforeAll(async () => {

browser = await puppeteer.launch({

headless: 'new', // usa el modo headless moderno

args: ['--no-sandbox', '--disable-setuid-sandbox']

});

page = await browser.newPage();

await page.setViewport({ width: 1280, height: 800 });

await page.goto('https://google.com', { waitUntil: 'networkidle2' });

});

afterAll(async () => {

if (page) await page.close();

if (browser) await browser.close();

});

test('Generar PDF de Google', async () => {

await page.pdf({

path: './google.pdf',

format: 'A4',

printBackground: true,

displayHeaderFooter: true,

headerTemplate: `

Mi primer PDF con Puppeteer

</div>`,

footerTemplate: `

Page <span class="pageNumber"></span> of <span class="totalPages"></span>

</div>`,

margin: {

top: '100px',

bottom: '100px',

left: '30px',

right: '30px'

}

});

console.log('PDF generado: google.pdf');

});

David steven Abril Pulecio

student•

FYI intente usar rem pero puppeteer solo permite px

Jhon Carlos Romo Ramirez

student•

Excelente curso!

Ismael David Angulo Andrade

student•

será posible también imprimir en el pdf la consola o el network?

Jesus Cuadro

student•

Interesante clase, muy funcional la verdad

Moises Abel Avila Garcia

student•

gracias x la explicacion es de mucha ayuda

const puppeteer = require('puppeteer');

describe('Capturas de pantalla', () => {
    let browser;
    let page;
    beforeAll(async () => {
        browser = await puppeteer.launch({
            headless: true,
            defaultViewport: null,
        });

        const context = await browser.createIncognitoBrowserContext();//MODO INCOGNITO comportamiento evadir modo incognito
        page = await context.newPage()
        //Aqui apuntamos la pantalla de la cual queremos apuntar
        await page.goto('https://www.google.com/', { waitUntil: 'networkidle0' });
    }, 10000);

    afterAll(async () => {
        await browser.close();
    });

    test('PDF de pantalla completa', async () => {

        let pdfCSS =[]
        pdfCSS.push('<style>')
        pdfCSS.push('h1{ font-size:10px; margin-left:30px;}')
        pdfCSS.push('</style>')

        const css = pdfCSS.join('')

        await page.pdf({
            path:'./google.pdf',
            format:'A4',
            printBackground : true,
            displayHeaderFooter: true,
            headerTemplate: css + '<h2>' + 'Mira El Script que realice PDF con pupeteer' + '</h2>',
            footerTemplate: css + '<h2> page <span class="pageNumber"></span> of <span class="totalPages"></span></h2>',
            
            margin:{
                top:'100px',
                botton:'200px',
                right:'30px',
                left: '30px'

            }
        
        })
    })

    test('PDF de pantalla completa en modo landscape', async () => {

        let pdfCSS =[]
        pdfCSS.push('<style>')
        pdfCSS.push('h1{ font-size:10px; margin-left:30px;}')
        pdfCSS.push('</style>')

        const css = pdfCSS.join('')

        await page.pdf({
            path:'./googleLandscape.pdf',
            format:'A4',
            printBackground : true,
            displayHeaderFooter: true,
            headerTemplate: css + '<h2>' + 'Mira El Script que realice PDF con pupeteer' + '</h2>',
            footerTemplate: css + '<h2> page <span class="pageNumber"></span> of <span class="totalPages"></span></h2>',
            
            margin:{
                top:'100px',
                botton:'200px',
                right:'30px',
                left: '30px'

            },
            lanscape: true
        })
    })

}, 350000)

Generando PDFs

Para quién es este curso?

¿Para quién es este curso?

Conceptos Avanzados

Emulación de dispositivos

Modo incógnito del navegador

Creando helpers de utilidad

Capturas de pantalla

Visual Testing

Generando PDFs

Geolocalización

Probando accesibilidad

Puppeteer con Firefox

Medir performance: page load

Medir performance: first contentful paint

Creando nuestro propio framework

Inicializando nuestro framework

Creando la Base Page

Page Object Model

Hacer un E2E

Agregar reporte

BDD

BDD y Gherkin

Configurando codeceptjs con Gherkin y BDD

Creando una Prueba con Gherkin

Creando un Scenario Outline

Generando reporte y agregando imágenes al reporte

CI/CD

Configurando Jenkins con nuestras pruebas y creando reportes

Conclusion del curso

Sigue aprendiendo