Medir performance: page load

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

Roberto Carlos González Castro

student•

En el minuto 11:27 el instructor hace uso del modulo fs, pero no muestra el import del mismo, por si llegan a encontrarse con el error ``` ReferenceError: fs is not defined

Solucion: **const fs = require('fs')**

Oscar Iboy

student•

Gracias

Jesus Cuadro

student•

Muchas gracias, justo me paso lo mismo

Roberto Carlos González Castro

student•

'disabled-by-default-devtools.screenshot'

CRISTIAN DAVID ARENAS GOMEZ

student•

Una consulta alguien sabe por que cuando corro una sola prueba con la extensión de Jest se corren todas las pruebas

Javier Fuentes Mora

teacher•

Debes de cambair la configuración para evitar eso

Mario Alexander Vargas Celis

student•

### ¿Que es y para que sirve page load?

El evento **page load** se refiere al momento en que una página web y todos sus recursos dependientes (como hojas de estilo, scripts, imágenes y marcos secundarios) se han cargado completamente. Este evento es crucial tanto en el desarrollo web como en la automatización de navegadores porque marca el punto en el que el contenido de la página está totalmente disponible y listo para la interacción del usuario o de un script automatizado.

### ¿Qué es el evento page load?

- **Definición**: El evento page load se dispara cuando el navegador ha terminado de cargar el documento HTML inicial y todos los recursos dependientes (como imágenes, estilos y scripts).

- **Momento de Activación**: Se activa cuando la propiedad readyState del documento cambia a complete, lo cual indica que todos los recursos de la página han sido completamente cargados.

### ¿Para qué sirve el evento page load?

- **Sincronización de Acciones**: En la automatización de navegadores y pruebas web, esperar a que se dispare el evento page load asegura que cualquier interacción con la página (como hacer clic en un botón o extraer información) se realiza solo después de que la página esté completamente cargada.

- **Medición de Rendimiento**: Este evento es útil para medir el rendimiento de carga de una página web. Los desarrolladores pueden medir el tiempo desde que se inicia la navegación hasta que se completa la carga para optimizar el rendimiento.

- **Evitar Errores**: Al asegurarse de que la página está completamente cargada antes de realizar cualquier acción, se reduce el riesgo de errores causados por elementos que aún no están disponibles o completamente renderizados.

- **Experiencia del Usuario**: Para los desarrolladores, este evento es útil para mejorar la experiencia del usuario, garantizando que las interacciones solo ocurran cuando todo el contenido esté disponible y no mientras se está cargando.

### Ejemplo de Uso en JavaScript

Aquí hay un ejemplo simple de cómo puedes usar el evento load en JavaScript para ejecutar código solo después de que la página haya terminado de cargar:


window.addEventListener('load', function() {

&#x20;   console.log('La página y todos los recursos están completamente cargados.');

&#x20;   // Aquí puedes ejecutar cualquier código que dependa de que la página esté completamente cargada

});

### Ejemplo de Uso en Puppeteer

En Puppeteer, un popular marco de automatización de navegadores, puedes esperar a que una página se cargue completamente antes de realizar acciones. Aquí hay un ejemplo:


const puppeteer = require('puppeteer');



(async () => {

&#x20;   const browser = await puppeteer.launch({ headless: false });

&#x20;   const page = await browser.newPage();



&#x20;   // Navegar a la página y esperar a que se cargue completamente

&#x20;   await page.goto('https://example.com', { waitUntil: 'load' });



&#x20;   // Realizar acciones después de que la página esté completamente cargada

&#x20;   const element = await page.$('selector');

&#x20;   const text = await page.evaluate(element => element.textContent, element);

&#x20;   console.log(text);



&#x20;   await browser.close();

})();

En el ejemplo de Puppeteer, el método goto con la opción { waitUntil: 'load' } asegura que el script espera hasta que el evento page load se dispare antes de proceder con las acciones subsecuentes. Esto garantiza que la página está completamente lista para cualquier interacción automatizada.

### Resumen

El evento page load es un indicador crucial en el ciclo de vida de una página web que marca el momento en que todo el contenido y los recursos de la página están completamente cargados y listos para ser utilizados. Este evento es especialmente importante en el desarrollo web y la automatización de pruebas para asegurar que las interacciones y mediciones se realicen solo cuando la página esté en su estado final y completamente preparada.

Mario Alexander Vargas Celis

student•

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

describe("Performance",()=>{

        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 de la automatizacion", async()=>{

        await page.waitForSelector("img");
        const metrics = await page.metrics();
        console.log(metrics);
    }, 35000);
    
    test("Medir el performance de la pagina", async()=>{

        await page.waitForSelector("img");
        const metrics2 = await page.evaluate(()=>JSON.stringify(window.performance));
        console.log(metrics2);
    }, 35000);*/

    test("Medir el performance del page load", async()=>{
        await page.tracing.start( {path: "profile.json"});
        await page.goto("https://google.com");
        await page.waitForSelector("img");
        await page.tracing.stop()
    }, 35000);

    test("Medir el performance del page load con screenshorts", async()=>{
        await page.tracing.start( {path: "profile.json", screenshots:true});
        await page.goto("https://platzi.com");
        await page.waitForSelector("img");
        await page.tracing.stop()
    }, 35000);

    test("Medir el performance del page load con screenshorts y extrayendolos", async()=>{
        const fs = require('fs')

        await page.tracing.start( {path: "profile.json", screenshots:true});
        await page.goto("https://platzi.com");
        await page.waitForSelector("img");
        await page.tracing.stop()
        const tracing = JSON.parse(fs.readFileSync("./profile.json", "utf8"))
        //Filtrar el 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'
        );

        //Iterar sobre este arreglo para crear la simagenes
        traceScreenShots.forEach(function(snap, index){
            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(err){
                if (err) {
                    console.log('No pude crear el archivo', err)
                };
            });           
        });

    }, 35000);
})
```const puppeteer = require("puppeteer");const {AxePuppeteer} = require("@axe-core/puppeteer")
describe("Performance",()=>{
        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 de la automatizacion", async()=>{
        await page.waitForSelector("img");        const metrics = await page.metrics();        console.log(metrics);    }, 35000);        test("Medir el performance de la pagina", async()=>{
        await page.waitForSelector("img");        const metrics2 = await page.evaluate(()=>JSON.stringify(window.performance));        console.log(metrics2);    }, 35000);\*/
    test("Medir el performance del page load", async()=>{        await page.tracing.start( {path: "profile.json"});        await page.goto("https://google.com");        await page.waitForSelector("img");        await page.tracing.stop()    }, 35000);
    test("Medir el performance del page load con screenshorts", async()=>{        await page.tracing.start( {path: "profile.json", screenshots:true});        await page.goto("https://platzi.com");        await page.waitForSelector("img");        await page.tracing.stop()    }, 35000);
    test("Medir el performance del page load con screenshorts y extrayendolos", async()=>{        const fs = require('fs')
        await page.tracing.start( {path: "profile.json", screenshots:true});        await page.goto("https://platzi.com");        await page.waitForSelector("img");        await page.tracing.stop()        const tracing = JSON.parse(fs.readFileSync("./profile.json", "utf8"))        //Filtrar el 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'        );
        //Iterar sobre este arreglo para crear la simagenes        traceScreenShots.forEach(function(snap, index){            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(err){                if (err) {                    console.log('No pude crear el archivo', err)                };            });                   });
    }, 35000);})

Roberto Carlos González Castro

student•

Me esta retornando el siguiente error ahora cuando intento correr los test: Could not find expected browser (chrome) locally. Run npm install to download the correct Chromium revision (982053).

Roberto Carlos González Castro

student•

Bueno, me auto respondi con la siguiente solucion para quienes se encuentren con el mensaje de error anterior:

Ir al directorio de puppeteer: cd ./node_modules/puppeteer
ejecutar: npm run install

Alberto Alejandro Foinquinos Benitez

student•

Estaba haciendo el test salia exitoso pero no devolvia las imagenes, encontre que el problema estaba aca

const traceScreenshots = tracing.traceEvents.filter((x) => {
            return (
                x.cat === 'disabled-by-default-devtools.screenshot' &&
                x.name === 'Screenshot' &&
                typeof x.args !== 'undefined' &&
                typeof x.args.snapshot !== 'undefined'
            );
        });

basicamente la funcion hacia el filtrado pero no devolvia nada, lo resolvi haciendo el return y colocando entre parentesis todo el contenido de la misma

Gabriel Cayoja

student•

muchas gracias por la solución

Julianny Caicedo

student•

Medir performance: page load

CODIGO ACTUALIZADO

jest.setTimeout(60000);

const puppeteer = require('puppeteer');

describe('Performance', () => {

let browser;

let page;

beforeEach(async () => {

browser = await puppeteer.launch({

headless: false,

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

});

page = await browser.newPage();

});

afterEach(async () => {

await browser.close();

});

test('Medir el performance de la automatizacion', async () => {

await page.goto('https://www.platzi.com/');

await page.waitForSelector('img');

const metrics = await page.metrics();

console.log(metrics);

});

test('Medir el performance de la pagina', async () => {

await page.goto('https://www.platzi.com/');

await page.waitForSelector('img');

const metrics2 = await page.evaluate(() => JSON.stringify(window.performance));

console.log(metrics2);

});

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

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

await page.goto('https://www.platzi.com/');

await page.tracing.stop();

});

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

await page.tracing.start({ path: 'trace-load-screenshots.json', screenshots: true });

await page.goto('https://www.platzi.com/');

await page.tracing.stop();

});

const fs = require('fs');

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

await page.tracing.start({ path: 'trace-load-screenshots.json', screenshots: true });

await page.goto('https://www.platzi.com/');

await page.tracing.stop();

const tracing = JSON.parse(await fs.promises.readFile('trace-load-screenshots.json', 'utf8'));

const traceScreenshots = tracing.traceEvents.filter(event =>

event.cat === 'disabled-by-default-devtools.screenshot' &&

event.name === 'Screenshot' &&

event.args.snapshot

);

for (let i = 0; i < traceScreenshots.length; i++) {

const snap = traceScreenshots[i];

await fs.promises.writeFile(trace-screenshot-${i}.png, snap.args.snapshot, 'base64');

console.log(Imagen trace-screenshot-${i}.png creada);

}

});

Antonio Hernandez

student•

test('Medir performance load pagina con screenshots y extraccion', async () => {

        await page.tracing.start({path: 'profile.json', screenshot: true})
        await page.goto('https://platzi.com')
        await page.tracing.stop()
        const tracing = JSON.parse(fs.readFileSync('./profile.json','utf8'))
        //filtrar el 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'
            

        )

        //iterar sobre este arrglo para crear las imagenes

        traceScreenShots.forEach(function(snap, index){

            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(err){})

            if (err) {
                console.log('No pude crear el archivo', err)
            }

        })

    }, 350000)

Si alguno me puede decir que estoy haciendo mal

Javier Fuentes Mora

teacher•

https://github.com/javierfuentesm/Puppeteer-platzi/tree/performance

Javier Fuentes Mora

teacher•

Creo que ya lo resolvimos por twitter https://github.com/javierfuentesm/Puppeteer-platzi/tree/performance

Hernan Camilo Jimenez Garcia

student•

Buenas profe,

Estoy teniendo este error al ejecutar el código:

ReferenceError: fs is not defined

Debo importar alguna libreria?

Javier Fuentes Mora

teacher•

si! ``` const fs = require('fs');

Oscar Iboy

student•

En el minuto 9 para dar formato al archivo profile.json con prettier es con el comando ctrl + shift + i

Antonio Hernandez

student•

Me esta saliendo bien la prueba pero no me aparecen los screenshots en el menu de la izquierda

Waldemar Mezquita

student•

a mi me sucede lo mismo, el test finaliza exitoso pero no veo los screenshots

window.addEventListener('load', function() {

&#x20;   console.log('La página y todos los recursos están completamente cargados.');

&#x20;   // Aquí puedes ejecutar cualquier código que dependa de que la página esté completamente cargada

});

const puppeteer = require('puppeteer');

(async () => {

&#x20;   const browser = await puppeteer.launch({ headless: false });

&#x20;   const page = await browser.newPage();

&#x20;   // Navegar a la página y esperar a que se cargue completamente

&#x20;   await page.goto('https://example.com', { waitUntil: 'load' });

&#x20;   // Realizar acciones después de que la página esté completamente cargada

&#x20;   const element = await page.$('selector');

&#x20;   const text = await page.evaluate(element => element.textContent, element);

&#x20;   console.log(text);

&#x20;   await browser.close();

})();

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

describe("Performance",()=>{

        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 de la automatizacion", async()=>{

        await page.waitForSelector("img");
        const metrics = await page.metrics();
        console.log(metrics);
    }, 35000);
    
    test("Medir el performance de la pagina", async()=>{

        await page.waitForSelector("img");
        const metrics2 = await page.evaluate(()=>JSON.stringify(window.performance));
        console.log(metrics2);
    }, 35000);*/

    test("Medir el performance del page load", async()=>{
        await page.tracing.start( {path: "profile.json"});
        await page.goto("https://google.com");
        await page.waitForSelector("img");
        await page.tracing.stop()
    }, 35000);

    test("Medir el performance del page load con screenshorts", async()=>{
        await page.tracing.start( {path: "profile.json", screenshots:true});
        await page.goto("https://platzi.com");
        await page.waitForSelector("img");
        await page.tracing.stop()
    }, 35000);

    test("Medir el performance del page load con screenshorts y extrayendolos", async()=>{
        const fs = require('fs')

        await page.tracing.start( {path: "profile.json", screenshots:true});
        await page.goto("https://platzi.com");
        await page.waitForSelector("img");
        await page.tracing.stop()
        const tracing = JSON.parse(fs.readFileSync("./profile.json", "utf8"))
        //Filtrar el 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'
        );

        //Iterar sobre este arreglo para crear la simagenes
        traceScreenShots.forEach(function(snap, index){
            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(err){
                if (err) {
                    console.log('No pude crear el archivo', err)
                };
            });           
        });

    }, 35000);
})
```const puppeteer = require("puppeteer");const {AxePuppeteer} = require("@axe-core/puppeteer")
describe("Performance",()=>{
        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 de la automatizacion", async()=>{
        await page.waitForSelector("img");        const metrics = await page.metrics();        console.log(metrics);    }, 35000);        test("Medir el performance de la pagina", async()=>{
        await page.waitForSelector("img");        const metrics2 = await page.evaluate(()=>JSON.stringify(window.performance));        console.log(metrics2);    }, 35000);\*/
    test("Medir el performance del page load", async()=>{        await page.tracing.start( {path: "profile.json"});        await page.goto("https://google.com");        await page.waitForSelector("img");        await page.tracing.stop()    }, 35000);
    test("Medir el performance del page load con screenshorts", async()=>{        await page.tracing.start( {path: "profile.json", screenshots:true});        await page.goto("https://platzi.com");        await page.waitForSelector("img");        await page.tracing.stop()    }, 35000);
    test("Medir el performance del page load con screenshorts y extrayendolos", async()=>{        const fs = require('fs')
        await page.tracing.start( {path: "profile.json", screenshots:true});        await page.goto("https://platzi.com");        await page.waitForSelector("img");        await page.tracing.stop()        const tracing = JSON.parse(fs.readFileSync("./profile.json", "utf8"))        //Filtrar el 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'        );
        //Iterar sobre este arreglo para crear la simagenes        traceScreenShots.forEach(function(snap, index){            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(err){                if (err) {                    console.log('No pude crear el archivo', err)                };            });                   });
    }, 35000);})

const traceScreenshots = tracing.traceEvents.filter((x) => {
            return (
                x.cat === 'disabled-by-default-devtools.screenshot' &&
                x.name === 'Screenshot' &&
                typeof x.args !== 'undefined' &&
                typeof x.args.snapshot !== 'undefined'
            );
        });

test('Medir performance load pagina con screenshots y extraccion', async () => {

        await page.tracing.start({path: 'profile.json', screenshot: true})
        await page.goto('https://platzi.com')
        await page.tracing.stop()
        const tracing = JSON.parse(fs.readFileSync('./profile.json','utf8'))
        //filtrar el 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'
            

        )

        //iterar sobre este arrglo para crear las imagenes

        traceScreenShots.forEach(function(snap, index){

            fs.writeFile(`trace-screenshot-${index}.png`, snap.args.snapshot, 'base64', function(err){})

            if (err) {
                console.log('No pude crear el archivo', err)
            }

        })

    }, 350000)

Medir performance: page load

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