Cursos Empresas Blog Live Conf Eventos Precios

0:0011:31

Capturas de pantalla

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 5 de 24

Clase 5 / 24

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

});