Medir performance: first contentful paint

Curso Avanzado de Automatización de Pruebas con Puppeteer

Contenido del curso

Para quién es este curso?

1
¿Para quién es este curso?
04:07 min

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

23
Configurando Jenkins con nuestras pruebas y creando reportes
16:33 min

Conclusion del curso

24
Sigue aprendiendo
02:07 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:22

Medir performance: first contentful paint

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 12 de 24

Clase 12 / 24

const puppeteer = require("puppeteer");
const {AxePuppeteer} = require("@axe-core/puppeteer")

describe("first paint y first contentful paint",()=>{

        let browser
        let page
    
        beforeAll(async()=>{
            browser = await puppeteer.launch({
                headless:true,
                defaultViewport: null, 
                //slowMo: 500
            });

            page = await browser.newPage();
            //await page.goto("https://platzi.com", {waitUntil: "networkidle2"});

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

        });

    test("Medir el performance del first paint y first contentful paint", async()=>{

        const navigationPromise = page.waitForNavigation();
        await page.goto("https://platzi.com");
        await navigationPromise

        const firstPaint = JSON.parse(
            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-paint")))
        );

        const firstContentfulPaint=JSON.parse(
            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-contentful-paint")))
        );
        console.log('firstPaint ', firstPaint[0].startTime)
        console.log('firstContentfulPaint ', firstContentfulPaint[0].startTime)
        

    }, 15000);

    test("Medir el performance frames por segundos", async()=>{

        const devtoolsProtocolClient = await page.target().createCDPSession();
        await devtoolsProtocolClient.send("Overlay.setShowFPSCounter",{show:true});
        await page.goto("https://platzi.com");

        await page.screenshot({path:"framesPorSegundo.jpg", type:"jpeg"})       

    }, 15000);

})
```const puppeteer = require("puppeteer");const {AxePuppeteer} = require("@axe-core/puppeteer")
describe("first paint y first contentful paint",()=>{
        let browser        let page            beforeAll(async()=>{            browser = await puppeteer.launch({                headless:true,                defaultViewport: null,                 //slowMo: 500            });
            page = await browser.newPage();            //await page.goto("https://platzi.com", {waitUntil: "networkidle2"});
        },10000);            afterAll(async ()=>{             await browser.close();
        });
    test("Medir el performance del first paint y first contentful paint", async()=>{
        const navigationPromise = page.waitForNavigation();        await page.goto("https://platzi.com");        await navigationPromise
        const firstPaint = JSON.parse(            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-paint")))        );
        const firstContentfulPaint=JSON.parse(            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-contentful-paint")))        );        console.log('firstPaint ', firstPaint\[0].startTime)        console.log('firstContentfulPaint ', firstContentfulPaint\[0].startTime)       &#x20;
    }, 15000);
    test("Medir el performance frames por segundos", async()=>{
        const devtoolsProtocolClient = await page.target().createCDPSession();        await devtoolsProtocolClient.send("Overlay.setShowFPSCounter",{show:true});        await page.goto("https://platzi.com");
        await page.screenshot({path:"framesPorSegundo.jpg", type:"jpeg"}) &#x20;
       &#x20;
    }, 15000);
})

// Importante importar FS para sacar screenshots y extraerlos
const fs = require('fs')

it('Medir el performance de la automatizacion', async () => {
        await page.waitForSelector('img')
        const metrics = await page.metrics()
        console.log(metrics)
    }, 350000)

    it('Medir el performance de la pagina', async () => {
        await page.waitForSelector('img')
        const metrics2 = await page.evaluate(() =>
            JSON.stringify(window.performance)
        )
        console.log(metrics2)
    }, 350000)

    it('Medir el performance del page load', async () => {

        await page.tracing.start({ path: 'profile.json' })

        await page.goto('https://google.com/')

        await page.tracing.stop()

    }, 350000)

    it('Medir el performance del page load con screenshots', async () => {

        await page.tracing.start({ path: 'profile.json', screenshots: true })

        await page.goto('https://google.com/')

        await page.tracing.stop()

    }, 350000)

    it('Medir el performance del page load con screenshots y extrayendolos', async () => {

        await page.tracing.start({ path: 'profile.json', screenshots: true })

        await page.goto('https://google.com/')

        await page.tracing.stop()

        const tracing = JSON.parse(fs.readFileSync('./profile.json', 'utf8'))
        
        //Filtrar en JSON

        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'
        )

        // Iteramos sobre este arreglo para obtener las imagenes

        traceScreenShots.forEach(function (snap, index) {
            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(error){
                if (error) {
                    console.error('No pude crear el achivo', error);
                }
            })
        });

    }, 350000)

it('Medir el performance del first paint y first contentful paint', async () => {
        const navigationPromise = page.waitForNavigation()

        await page.goto('https://google.com/')

        await navigationPromise

        const firstPaint = JSON.parse(
            await page.evaluate(() =>
                JSON.stringify(performance.getEntriesByName('first-paint'))
            )
        )

        const firstContentfulPaint = JSON.parse(
            await page.evaluate(() =>
                JSON.stringify(
                    performance.getEntriesByName('first-contentful-paint')
                )
            )
        )
        console.log('firstPaint ', firstPaint[0].startTime)
        console.log('firstContentfulPaint ', firstContentfulPaint[0].startTime)
    }, 350000)

    it('Medir el performance de los frames por segundo', async () => {
        
        const devtoolsProtocolClient = await page.target().createCDPSession()
        await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true })

        await page.goto('https://google.com/')

        await page.screenshot({ path: 'framesPorSegundo.jpg', type: 'jpeg' })

    }, 350000)

const puppeteer = require("puppeteer");
const {AxePuppeteer} = require("@axe-core/puppeteer")

describe("first paint y first contentful paint",()=>{

        let browser
        let page
    
        beforeAll(async()=>{
            browser = await puppeteer.launch({
                headless:true,
                defaultViewport: null, 
                //slowMo: 500
            });

            page = await browser.newPage();
            //await page.goto("https://platzi.com", {waitUntil: "networkidle2"});

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

        });

    test("Medir el performance del first paint y first contentful paint", async()=>{

        const navigationPromise = page.waitForNavigation();
        await page.goto("https://platzi.com");
        await navigationPromise

        const firstPaint = JSON.parse(
            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-paint")))
        );

        const firstContentfulPaint=JSON.parse(
            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-contentful-paint")))
        );
        console.log('firstPaint ', firstPaint[0].startTime)
        console.log('firstContentfulPaint ', firstContentfulPaint[0].startTime)
        

    }, 15000);

    test("Medir el performance frames por segundos", async()=>{

        const devtoolsProtocolClient = await page.target().createCDPSession();
        await devtoolsProtocolClient.send("Overlay.setShowFPSCounter",{show:true});
        await page.goto("https://platzi.com");

        await page.screenshot({path:"framesPorSegundo.jpg", type:"jpeg"})       

    }, 15000);

})
```const puppeteer = require("puppeteer");const {AxePuppeteer} = require("@axe-core/puppeteer")
describe("first paint y first contentful paint",()=>{
        let browser        let page            beforeAll(async()=>{            browser = await puppeteer.launch({                headless:true,                defaultViewport: null,                 //slowMo: 500            });
            page = await browser.newPage();            //await page.goto("https://platzi.com", {waitUntil: "networkidle2"});
        },10000);            afterAll(async ()=>{             await browser.close();
        });
    test("Medir el performance del first paint y first contentful paint", async()=>{
        const navigationPromise = page.waitForNavigation();        await page.goto("https://platzi.com");        await navigationPromise
        const firstPaint = JSON.parse(            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-paint")))        );
        const firstContentfulPaint=JSON.parse(            await page.evaluate(()=>JSON.stringify(performance.getEntriesByName("first-contentful-paint")))        );        console.log('firstPaint ', firstPaint\[0].startTime)        console.log('firstContentfulPaint ', firstContentfulPaint\[0].startTime)       &#x20;
    }, 15000);
    test("Medir el performance frames por segundos", async()=>{
        const devtoolsProtocolClient = await page.target().createCDPSession();        await devtoolsProtocolClient.send("Overlay.setShowFPSCounter",{show:true});        await page.goto("https://platzi.com");
        await page.screenshot({path:"framesPorSegundo.jpg", type:"jpeg"}) &#x20;
       &#x20;
    }, 15000);
})

// Importante importar FS para sacar screenshots y extraerlos
const fs = require('fs')

it('Medir el performance de la automatizacion', async () => {
        await page.waitForSelector('img')
        const metrics = await page.metrics()
        console.log(metrics)
    }, 350000)

    it('Medir el performance de la pagina', async () => {
        await page.waitForSelector('img')
        const metrics2 = await page.evaluate(() =>
            JSON.stringify(window.performance)
        )
        console.log(metrics2)
    }, 350000)

    it('Medir el performance del page load', async () => {

        await page.tracing.start({ path: 'profile.json' })

        await page.goto('https://google.com/')

        await page.tracing.stop()

    }, 350000)

    it('Medir el performance del page load con screenshots', async () => {

        await page.tracing.start({ path: 'profile.json', screenshots: true })

        await page.goto('https://google.com/')

        await page.tracing.stop()

    }, 350000)

    it('Medir el performance del page load con screenshots y extrayendolos', async () => {

        await page.tracing.start({ path: 'profile.json', screenshots: true })

        await page.goto('https://google.com/')

        await page.tracing.stop()

        const tracing = JSON.parse(fs.readFileSync('./profile.json', 'utf8'))
        
        //Filtrar en JSON

        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'
        )

        // Iteramos sobre este arreglo para obtener las imagenes

        traceScreenShots.forEach(function (snap, index) {
            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(error){
                if (error) {
                    console.error('No pude crear el achivo', error);
                }
            })
        });

    }, 350000)

it('Medir el performance del first paint y first contentful paint', async () => {
        const navigationPromise = page.waitForNavigation()

        await page.goto('https://google.com/')

        await navigationPromise

        const firstPaint = JSON.parse(
            await page.evaluate(() =>
                JSON.stringify(performance.getEntriesByName('first-paint'))
            )
        )

        const firstContentfulPaint = JSON.parse(
            await page.evaluate(() =>
                JSON.stringify(
                    performance.getEntriesByName('first-contentful-paint')
                )
            )
        )
        console.log('firstPaint ', firstPaint[0].startTime)
        console.log('firstContentfulPaint ', firstContentfulPaint[0].startTime)
    }, 350000)

    it('Medir el performance de los frames por segundo', async () => {
        
        const devtoolsProtocolClient = await page.target().createCDPSession()
        await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true })

        await page.goto('https://google.com/')

        await page.screenshot({ path: 'framesPorSegundo.jpg', type: 'jpeg' })

    }, 350000)

Comentarios (3)3 comentarios

Angel Hernandez

Hace 3 años

Increible me gusto mucho ver como se podia hacer el test de los frames por segundo! No sabia que se podian testear ese tipo de cosas.

Mario Alexander Vargas Celis

Hace 2 años

Jesus Cuadro

Medir el performance con Page Load

Medir el performance con First Contentful Paint

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

Medir performance: first contentful paint

Progreso del curso

Para quién es este curso?

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

Conclusion del curso

Recursos

Recursos