Cursos Empresas Blog Live Conf Eventos Precios

0:0014:26

Emulación de dispositivos

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 2 de 24

Clase 2 / 24

Mario Alexander Vargas Celis

Hace 2 años

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);
});

Comentarios (20)20 comentarios

Steve Anthony Luzquiños Agama

Hace 4 años

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

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

¿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

Hace 5 años

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

Profesor

Muchas gracias! lo agregaremos de todas maneras

Yelenith Natalia Ortiz Guerrero

Gracias por el aporte

Juan David Rojas Restrepo

JUAN DAVID ORTIZ CORREA

👋 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

Se rompió el link de la lista de dispositivos

Irving Juárez

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

CRISTIAN DAVID ARENAS GOMEZ

El repositorio no funciona

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

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

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

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

Jesus Cuadro

Hace 3 años

Julianny Caicedo

Hace 10 meses

describe('Emulando Dispositivos' , () => {

let browser

let page

beforeAll(async () => {

browser = await puppeteer.launch({

headless: false,

defaultViewport: null,

})

page = await browser.newPage()

await page.goto('http://platzi.com' , { waitUntil: 'networkidle0'})

},10000)

afterAll(async () => {

await browser.close()

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

await page.emulate({

name: 'Mi dispositivo' ,

viewport: {

width: 375,

height: 667,

deviceScaleFactor: 2,

isMobile: true,

hasTouch: true,

isLandscape: false

//userAgent:

await new Promise(resolve => setTimeout(resolve, 5000)); // espera 5s entre recargas

}, 50000);

});

Xavier Alberto Castillo varon

Hace un año

en esta url , estan actualizado los dispositivos que a la actualidad maneja puppeteer

Juan Morillo

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:

Jorge Emilio Granados Guzmán

JAVA GOOD

Ronald Riera Sanchez

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

MANUEL ALEJANDRO CUELLAR GUARIN

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

exxplicas my bien las clases

javier fuentes es un buen profesor

Manuel Ledezma

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

Samuel Espinoza Figueroa

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

Emulación de dispositivos

Progreso del curso

Para quién es este curso?

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

Conclusion del curso