Capturas de pantalla

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

Luis Jhordy Mamani Arias

student•

**Aquí les comparto el código para que los prueben, que se realizaron sin embargo me queda la duda apuntando en Google no existe un SELECTOR es como si tomara una captura de pantalla general **

const puppeteer = require('puppeteer');

describe('Capturas de pantalla', () => {
    let browser;
    let page;
    beforeAll(async () => {
        browser = await puppeteer.launch({
            headless: false,
            defaultViewport: null,
        });

        const context = await browser.createIncognitoBrowserContext();//MODO INCOGNITO comportamiento evadir modo incognito
        page = await context.newPage()
        //Aqui apuntamos la pantalla de la cual queremos apuntar
        await page.goto('https://www.google.com/', { waitUntil: 'networkidle0' });
    }, 10000);

    afterAll(async () => {
        await browser.close();
    });
    // Esta sección es para realizar la captura de pantalla general
    test ('Captura de pantalla Completa',async () => {
        
        await page.screenshot({
            path:'./capturaDePantalla.png',
            fullPage:true
        })
    },350000)

    // Esta sección es para realizar la captura de pantalla de una area por ellos la declaración de x-y, width y height
    test ('Captura de pantalla seleccionando un area',async () => {
        
        await page.screenshot({
            path:'./capturaDePantallaSeleccionandoUnArea.png',
            clip:{
                x: 0,
                y: 0,
                width:500,
                height:500
            }
        })
    },350000)
    // Esta sección es para realizar la captura de pantalla pero transparente
    test ('Captura de pantalla con fondo transparente',async () => {
        
        await page.evaluate(()=>(document.body.style.background = 'transparent'))    
        await page.screenshot({
            path:'./capturaDePantallaTransparente.png',
            omitBackground: true
        })
    },350000)

    // Esta sección es para realizar la captura de pantalla a un elemento en especifico copiando un "SELECTOR"
    test ('Captura de pantalla a un elemento',async () => {
        
        const element = await page.waitForSelector('body > div.L3eUgb > div.o3j99.LLD4me.yr19Zb.LS8OJ > div > img')
        await page.screenshot({
            path:'./capturaDePantallaDeUnElemento.png',
        })
    },350000)

});

Gabriel Cayoja

student•

hola Luis lo del screenshot del selector solo se debe a que el await del screenshot dice "page" en lugar de "element"

Agustin Cammarota Muti

student•

Para evitar problemas de time out por Jest:

1- Crear un fichero jest.config.js en la raiz del proyecto. 2- Poner la siguiente configuración:

module.exports = {
  testTimeout: 30000
};

Jesus Cuadro

student•

Muchas gracias

David steven Abril Pulecio

student•

Por que varias de estas funciones no son automaticamente agregadas?

ejemplo:

No deberia auto sugerir el omitBackground? me obliga a escribirlo por completo

Laura Ivonne Moreno

student•

muchas gracias!! que chulada

Moises Abel Avila Garcia

student•

saludos

Moises Abel Avila Garcia

student•

exelente

Moises Abel Avila Garcia

student•

esta clase es muy recomendada aprendes mucho