Cursos Empresas Blog Live Conf Eventos Precios

0:0020:46

Visual Testing

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 6 de 24

Clase 6 / 24

const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot')
expect.extend ({ toMatchImageSnapshot })

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

        page = await browser.newPage()
        await page.goto('https://platzi.com', { waitUntil: 'networkidle0' });

    }, 10000);

    afterAll(async () => {
        await browser.close();
    });

    test ('Snapshot de toda la pagina', async () =>{

        await page.waitForSelector('img')

        const screenshot = await page.screenshot()

        expect(screenshot).toMatchImageSnapshot()
    
    },350000);
    
    })

Comentarios (7)7 comentarios

Roberto Carlos González Castro

Hace 4 años

Seria bueno, dejar conceptos claves a lo largo de todos los videos en la zona de recursos para poder guardarlos y tenerlos presente para futuras referencias.

Moises Abel Avila Garcia

es buena idea

Martín González

Si alguien mas tuvo problemas con las dependencias pueden usar el flag a al istalar de esta manera:

npm i --save-dev jest-image-snapshot --legacy-peer-deps

gracias

Oscar Iboy

Luis Jhordy Mamani Arias

**Para quien lo quiera, no olviden instalar la librería mencionada **

Aqui un poco mas de informacion sobre el uso de expect.extend: https://jestjs.io/es-ES/docs/expect#expectextendmatchers

Luis Campos

La mejor clase que he visto hasta ahora !

Hernan Dario Carvajal Robledo

Hace un año

El visual testing ayuda a detectar diferencias inesperadas en la interfaz de usuario, como cambios de estilo o disposición de elementos. Al comparar capturas de pantalla de la UI en diferentes estados o entornos, se asegura que los cambios de código no alteren negativamente la apariencia de la aplicación. Esto es crucial para mantener la consistencia visual y la experiencia del usuario.

exelente curso

Visual Testing

Progreso del curso

Para quién es este curso?

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

Conclusion del curso