Medir performance: first contentful paint

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

Angel Hernandez

student•

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

student•

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

Jesus Cuadro

student•

Medir el performance con Page Load

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

Medir el performance con First Contentful Paint

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)