Medir performance: first contentful paint

Cursos Empresas Blog Live Conf Precios

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

Medir performance: first contentful paint

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)

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