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.
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 DÃas
4 Hrs
51 Min
21 Seg
Medir performance: first contentful paint
12/24Recursos
Aportes 3
Preguntas 0
Ordenar por:
```js
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)   Â
  }, 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);
})
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)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?