Emulación de dispositivos

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

Steve Anthony Luzquiños Agama

student•

puppeteer.devices está obsoleto actualmente, ahora se debe usar: KnownDevices. Un ejemplo:

import { KnownDevices } from 'puppeteer'

const tablet = KnownDevices['iPad Pro']

await page.emulate(tablet)

Antonio Hernandez

student•

Steve hola, mira coloque el codigo y me salta error, podrias colocar como lo usaste, gracias

Steve Anthony Luzquiños Agama

student•

¿Puedes detallarme el error que tuviste? Esto debería funcionarte dentro de un describe que a su vez tiene una función it o test, asíncronas.

Luciano Marchese

student•

Les dejo la lista de devices porque no la veo en los recursos: https://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.ts

Javier Fuentes Mora

teacher•

Muchas gracias! lo agregaremos de todas maneras

Yelenith Natalia Ortiz Guerrero

student•

Comparto código funcional mayo 2024:

// Emular los dispositivos de forma manual
const puppeteer = require('puppeteer')

describe('Emulando dispositivos de forma manual', () => {

    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('Emular dispositivo móvil', async () => {
        await page.emulate({
            name: 'Mi dispositivo', 
            viewport:{
                width: 375,
                height: 667,
                deviceScaleFactor: 2, //propiedad para escalar el dispositivo
                isMobile: true,
                hasTouch: true, //tactil ?
                isLandscape: false //si está de forma horizontal
            },
            userAgent: 'Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36',
        })
        await new Promise((resolve) => setTimeout(resolve, 3000));
    },350000)  
    
//Emulando los sitios como si fuesen de escritorio

/test('Emulando un sitio de escritorio', async () => {

    await page.setViewport({
        width: 1500,
        height: 800,
    })

    await new Promise((resolve) => setTimeout(resolve, 3000));

}, 3500000)

//Emulando tablets de forma vertical

test('Emulando una tablet en modo vertical', async () => {
    
    const { KnownDevices } = require('puppeteer');
    
    const tablet = KnownDevices['iPad Pro']
    
    await page.emulate(tablet)

    await new Promise((resolve) => setTimeout(resolve, 3000));

}, 3500000)

test('Emulando un en una tablet en modo landscape - (horizontal)', async () => {
    
    const { KnownDevices } = require('puppeteer');
    
    const tablet = KnownDevices['iPad landscape']
    
    await page.emulate(tablet)

    await new Promise((resolve) => setTimeout(resolve, 3000));

}, 3500000)

//Emulando un celular

test('Emulando un sitio en un celular', async () => {
    const { KnownDevices } = require('puppeteer');

    const iphone = KnownDevices['iPhone X']

    await page.emulate(iphone)

    await new Promise((resolve) => setTimeout(resolve, 2000));

//}, 3500000)

})
})

Mario Alexander Vargas Celis

student•

Gracias por el aporte

Juan David Rojas Restrepo

student•

Comparto mi código con la configuración de mi celular.

const puppeteer = require('puppeteer');

describe('Emular dispositivos', () => {
    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' });
    }, 20000);

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

    test('Emular dispositivo móvil', async () => {
        await page.emulate({
            name: 'Galaxy J6',
            viewport: {
                width: 360,
                height: 740,
                deviceScaleFactor: 4,
                isMobile: true,
                hasTouch: true,
                isLandscape: false,
            },
            userAgent:
                'Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36',
        });
        await page.waitForTimeout(3000);
    }, 40000);

    //Emular de forma horizontal
    test('Emular dispositivo móvil horizontal', async () => {
        await page.emulate({
            name: 'Galaxy J6',
            viewport: {
                width: 740,
                height: 360,
                deviceScaleFactor: 4,
                isMobile: true,
                hasTouch: true,
                isLandscape: true,
            },
            userAgent:
                'Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36',
        });
        await page.waitForTimeout(3000);
    }, 40000);
});

JUAN DAVID ORTIZ CORREA

student•

👋 Hola, la lista de dispositivos al parecer ya no está en git hub, así que les comparto la que está en la documentación oficial de puppeteer https://pptr.dev/next/api/puppeteer.knowndevices , salu✌.

Alan Riveros

student•

Se rompió el link de la lista de dispositivos

Irving Juárez

student•

Te aparece un intellisense que te enseña todos los devices disponibles en el vscode

CRISTIAN DAVID ARENAS GOMEZ

student•

El repositorio no funciona

Javier Fuentes Mora

teacher•

que parte no funciona? hay una rama por cada clase , estas en la rama correcta?

Antonio Hernandez

student•

A alguno le esta dando este error tengo todo el dia tratando de solucionarlo y no doy con el modo de arreglarlo

Javier Fuentes Mora

teacher•

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

Javier Fuentes Mora

teacher•

parece ser qu eno configuraste bien babel , y no te permite ese tipo de imports intenta con el require

Jesus Cuadro

student•

CODIGO DE LA CLASE 👌

    // Emular los dispositivos de forma manual

    test('Emulando dispositivos de forma manual', async () => {

        await page.emulate({
            name: "Dispositivo",
            viewport:{
                width: 375,
                height: 667,
                deviceScaleFactor: 2,
                isMobile: true,
                hasTouch: true,
                isLandscape: false
            },
            userAgent: 'Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36',
        })

        await new Promise((resolve) => setTimeout(resolve, 2000));

    }, 3500000)

    //Emulando los sitios comos si fuesen de escritorio

    test('Emulando un sitio de escritorio', async () => {

        await page.setViewport({
            width: 1500,
            height: 800,
        })

        await new Promise((resolve) => setTimeout(resolve, 2000));

    }, 3500000)

    //Emulando tablets de forma horizontal

    test('Emulando un en una tablet en modo horizontal', async () => {

        const tablet = puppeteer.devices['iPad landscape']

        await page.emulate(tablet)

        await new Promise((resolve) => setTimeout(resolve, 2000));

    }, 3500000)

    //Emulando un celular

    test('Emulando un sitio en un celular', async () => {

        const iphone = puppeteer.devices['iPhone X']

        await page.emulate(iphone)

        await new Promise((resolve) => setTimeout(resolve, 2000));

    }, 3500000)

})

Xavier Alberto Castillo varon

student•

en esta url https://pptr.dev/api/puppeteer.knowndevices, estan actualizado los dispositivos que a la actualidad maneja puppeteer

Mario Alexander Vargas Celis

student•

Mi codigo

const puppeteer = require("puppeteer")
const { KnownDevices } = require('puppeteer');

describe("Emulando informacion",()=>{
    let browser
    let page

    beforeAll(async()=>{
        browser = await puppeteer.launch({
            headless:false,
            defaultViewport: null, 
            //slowMo: 500
        });

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

    },10000);

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

    test("Emulando dispositivos de forma manual", async()=>{
        await page.emulate({
            name: "Mi dispositivo",
            viewport: {
                width:375,
                height: 667,
                deviceScalaFactor:2,
                isMobile: true,
                hasTouch: true,
                isLandscape:false

            },
            userAgent: "Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36",
        });

        await new Promise((resolve) => setTimeout(resolve, 5000));

    },35000);

    test("Emulando sitio de escritorio", async()=>{

        await page.setViewport({
            width:1280,
            height:800
        })
        await new Promise((resolve) => setTimeout(resolve, 5000));

    },35000);

    test("Emulando sitio en una tablet", async()=>{

        const tablet = KnownDevices['iPad Pro'];
        await page.emulate(tablet);

        await new Promise((resolve) => setTimeout(resolve, 5000));

    },35000);

    test("Emulando sitio en una tablet en modo landscape", async()=>{

        const tablet = KnownDevices["iPad landscape"];
        await page.emulate(tablet);

        await new Promise((resolve) => setTimeout(resolve, 5000));

    },35000);

    test("Emulando sitio en un celular", async()=>{

        const iPhone = KnownDevices['iPhone X']
        await page.emulate(iPhone);
        await new Promise((resolve) => setTimeout(resolve, 5000));

    },35000);

});
```const puppeteer = require("puppeteer")const { KnownDevices } = require('puppeteer');
describe("Emulando informacion",()=>{    let browser    let page
    beforeAll(async()=>{        browser = await puppeteer.launch({            headless:false,            defaultViewport: null,             //slowMo: 500        });
        page = await browser.newPage();        await page.goto("https://platzi.com", {waitUntil: "networkidle2"});
    },10000);
    afterAll(async ()=>{         await browser.close();    })
    test("Emulando dispositivos de forma manual", async()=>{        await page.emulate({            name: "Mi dispositivo",            viewport: {                width:375,                height: 667,                deviceScalaFactor:2,                isMobile: true,                hasTouch: true,                isLandscape:false
            },            userAgent: "Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36",        });
        await new Promise((resolve) => setTimeout(resolve, 5000));
    },35000);
    test("Emulando sitio de escritorio", async()=>{
        await page.setViewport({            width:1280,            height:800        })        await new Promise((resolve) => setTimeout(resolve, 5000));
    },35000);
    test("Emulando sitio en una tablet", async()=>{        //const { KnownDevices } = require('puppeteer');        const tablet = KnownDevices\['iPad Pro'];        await page.emulate(tablet);
        await new Promise((resolve) => setTimeout(resolve, 5000));
    },35000);
    test("Emulando sitio en una tablet en modo landscape", async()=>{
        //const { KnownDevices } = require('puppeteer');        const tablet = KnownDevices\["iPad landscape"];        await page.emulate(tablet);
        await new Promise((resolve) => setTimeout(resolve, 5000));
    },35000);
    test("Emulando sitio en un celular", async()=>{
        //const { KnownDevices } = require('puppeteer');        const iPhone = KnownDevices\['iPhone X']        await page.emulate(iPhone);        await new Promise((resolve) => setTimeout(resolve, 5000));
    },35000);
});

Juan Morillo

student•

Para todos los que estan tomando el curso en el 2024, la forma de llamar el dispositivo cambio y ahora se utilizaconst tabla = KnowDevices['iPad Pro']

const dispositivoX = KnowDevices['iPad Pro']

Les dejo el link con todos los dispositivos disponibles en la Documentacion de puppeteer:

https://pptr.dev/next/api/puppeteer.knowndevices

Jorge Emilio Granados Guzmán

student•

JAVA GOOD

Ronald Riera Sanchez

student•

Pages NotFound, el link esta caído amigo...!

MANUEL ALEJANDRO CUELLAR GUARIN

student•

it('Emulando dispositivos de forma manual ihpone 11 pro', async () => { const browser = await puppeteer.launch({ headless: false, slowMo: 0, devtools: false, /* defaultViewport:{ width: 2100, height: 1080 }*/ defaultViewport: null }); const page = await browser.newPage(); await page.goto('https://www.comfama.com/');

    await page.emulate({
        name: 'Mi dispositivo iphone 11 pro',
        viewport:{
            width: 375,
            height: 812,
            deiveSacaleFactor: 2,
            isMobile: true,
            hasTouch: true,
            isLandscape: false
        },
        userAgent:
            'Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J600G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.1 Chrome/71.0.3578.99 Mobile Safari/537.36',
    })

    await page.waitForTimeout(3000)
    await browser.close()
}, 30000);

Moises Abel Avila Garcia

student•

exxplicas my bien las clases

Moises Abel Avila Garcia

student•

javier fuentes es un buen profesor

Manuel Ledezma

student•

Muy buena clase, me sirvió para un proyecto personal perfectamente.

Samuel Espinoza Figueroa

student•

Si quieren el link de los dispositivos es el siguiente

KnownDevices variable | Puppeteer (pptr.dev)

const {KnownDevices} = require('puppeteer')

it('Emular el sitio de un iphone', async () => { const iPhone = KnownDevices['iPhone 6']; await page.emulate(iPhone); await page.goto('https://www.google.com'); })

de esa forma pueden hacer sus dispositivos