CursosEmpresasBlogLiveConfPrecios

Abriendo y cerrando el navegador

Clase 6 de 15 • Curso de Automatización de Pruebas con Puppeteer

Clase anteriorSiguiente clase

Contenido del curso

Bienvenida al curso: ¿Qué vamos a aprender?

  • 1
    Automatización de pruebas con Puppeteer

    Automatización de pruebas con Puppeteer

    02:00 min

Introducción a la Automatización WEB

  • 2
    ¿Qué es el DOM?

    ¿Qué es el DOM?

    03:51 min
  • 3
    Atributos y selectores

    Atributos y selectores

    16:40 min

Introducción a Puppeteer

  • 4
    ¿Qué es Puppeteer?

    ¿Qué es Puppeteer?

    06:10 min
  • 5
    Configuración de nuestro ambiente

    Configuración de nuestro ambiente

    05:06 min

Conociendo Puppeteer

  • 6
    Abriendo y cerrando el navegador

    Abriendo y cerrando el navegador

    Viendo ahora
  • 7
    Opciones de lanzamiento

    Opciones de lanzamiento

    07:48 min
  • 8
    Navegación con Puppeteer

    Navegación con Puppeteer

    09:34 min
  • 9
    Interactuando con los elementos

    Interactuando con los elementos

    19:13 min
  • 10
    Esperar por los elementos

    Esperar por los elementos

    16:51 min
  • 11
    Esperando por funciones

    Esperando por funciones

    09:46 min
  • 12
    Extrayendo información

    Extrayendo información

    21:42 min
  • 13
    Timeouts

    Timeouts

    07:43 min
  • 14
    Hooks

    Hooks

    07:31 min

Conclusión del curso

  • 15
    Próximos pasos

    Próximos pasos

    01:09 min
  • Tomar el examen del curso
    • Guillermo Castaño Vèlez

      Guillermo Castaño Vèlez

      student•
      hace 4 años

      Alguien de el Platzi team que pueda poner los recursos de los que habla el profesor? ya van carios videos que promete recursos y no están en la ventana. Gracias

      Junior Mosquera Mosquera

      Junior Mosquera Mosquera

      student•
      hace 3 años

      A la fecha de publicar este aporte la prueba falla cuando se implementa el método waitForTimeout, según vs este método ya está deprecado. Les comparto mi código. ![](

      code.png

        Kath Bonilla

        Kath Bonilla

        student•
        hace 3 años

        Método Page.waitForTimeout() Advertencia: esta API ahora está obsoleta.

        Reemplazar con new Promise(r => setTimeout(r, milliseconds));.

        Hace que su secuencia de comandos espere el número dado de milisegundos.

        Jesus Cuadro

        Jesus Cuadro

        student•
        hace 2 años

        Tambien se puede usar para definir el tiempo:

        await new Promise((resolve) => setTimeout(resolve, 5000))
      Carlos Rodríguez

      Carlos Rodríguez

      student•
      hace 4 años

      Aquí el código del proyecto:

      const puppeteer = require('puppeteer'); describe('Mi primer test en puppeteer', () => { it('Debe abrir y cerrar el navegador', async () => { const browser = await puppeteer.launch({ headless: false, }); const page = await browser.newPage(); await page.goto('https://www.google.com'); await page.waitForTimeout(5000); await browser.close(); }, 10000); });

      Si les da error del navegador solo deben instalar el chromium desde la carpeta de node_modules

      cd ./node_modules/puppeteer npm run install
      primqt n/a

      primqt n/a

      student•
      hace 4 años

      el responsable de los cursos que ponga los recursos que faltan aqui por dios es cierto que ya van varios videos y no pone nada y uno que esta aprendiendo se pierde yo al menos ya me perdi

      Yan Harold Muñoz Dominguez

      Yan Harold Muñoz Dominguez

      student•
      hace un año

      En la nueva versión de Puppeteer ya no está disponible la función de waitForTimeout en 2024

      await page.waitForTimeout(5000); -> En la documentación actual ya se trabaja con promesas

      await new Promise(resolve => setTimeout(resolve, 5000)); -> Versión actual

        Laura Guadalupe Basto Moreno

        Laura Guadalupe Basto Moreno

        student•
        hace un año

        Gracias por tu comentario, precisamente algo así me estaba imaginando cuando me fallo esa linea.

        Eduardo Renderos

        Eduardo Renderos

        student•
        hace un año

        Gracias por la aclaracion

      Rolando Tarqui Benito

      Rolando Tarqui Benito

      student•
      hace 4 años

      en que min pusiste el :

      it('Debe abrir y cerrar el navegador', async () => { ...... }, 10000);

      1000 ?

        Jair Israel Avilés Eusebio

        Jair Israel Avilés Eusebio

        student•
        hace 3 años

        No lo muestra en la clase pero sale un error de timeout durante la ejecucion de la prueba. Un segundo es sufieciente.

      ingri sepulveda

      ingri sepulveda

      student•
      hace 3 años

      😊

      //importar puppeteer const puppeteer = require('puppeteer') //escribir la prueba describe(' Mi primer test en puppeteer',()=>{ it('Debe de abrir y cerrar el navagador', async() =>{ const browser = await puppeteer.launch({ headless: false }) const page = await browser.newPage() / await page.goto('https://es.wikipedia.org/wiki/Wikipedia:Portada') //el navegador.. navega a.... await page.waitForTimeout(1000) await browser.close() }) })
      reto 1.png
      OSCAR RICO

      OSCAR RICO

      student•
      hace 2 años
      A la fecha esta obsoleta la funcion para hacer un delay: await page.waitForTimeout(5000); se pruede reemplazar por estas 2 opciones: new Promise(r => setTimeout(r, 5000)) /// otra solucion await page.evaluate(() => { return new Promise((resolve) => { setTimeout(resolve, 5000); }); });
      Erick Alberto Avilés Méndez

      Erick Alberto Avilés Méndez

      student•
      hace 2 años
      1. Tiempo de espera para visualizar la página
      2. Tiempo máximo que se le asigna a la prueba

      Si 2 es menor que el tiempo que toma la prueba para ejecutarse aparece “failed”. Si por ejemplo 1 es mayor que 2, sucede este escenario ya que se está programando que el tiempo de espera tarde mas que el tiempo máximo asignado para la prueba.

      aporte.png
      Nancy Julieth Mancera Gutierrez

      Nancy Julieth Mancera Gutierrez

      student•
      hace 3 años

      Acabe de realizar el código y así me funciono.

      const puppeteer=require('puppeteer'); describe('Mi primer test en puppeteer', ()=>{ it('Debe abrir y cerrar el navegador', async () => { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.goto('https://www.google.com'); await browser.close(); }, 20000); });

      Gustavo Adolfo Torres Quintana

      Gustavo Adolfo Torres Quintana

      student•
      hace 2 años

      Platzi team que pueda poner los recursos de los que habla el profesor? ya van carios videos que promete recursos y no están en la ventana. Gracias

      Jonathan Rivera

      Jonathan Rivera

      student•
      hace 2 años

      Buen día tengo este error : PS C:\Users\Jc Rivera\Documents\pyton> npm run test

      pyton@1.0.0 test C:\Users\Jc Rivera\Documents\pyton jest --forceExit

      C:\Users\Jc Rivera\AppData\Roaming\npm\node_modules\jest\node_modules\jest-cli\build\run.js:129 if (error?.stack) { ^

      SyntaxError: Unexpected token . at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (C:\Users\Jc Rivera\AppData\Roaming\npm\node_modules\jest\node_modules\jest-cli\build\index.js:18:12) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! pyton@1.0.0 test: jest --forceExit npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the pyton@1.0.0 test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

      npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Jc Rivera\AppData\Roaming\npm-cache_logs\2023-07-22T16_58_51_134Z-debug.log PS C:\Users\Jc Rivera\Documents\pyton>

      Jeferson Andrés Cruz Herrera

      Jeferson Andrés Cruz Herrera

      student•
      hace 2 años

      Publicar una pregunta en esta plataforma es como complicado. En fin, estoy obteniendo este error luego de ejcutar npm run test:

      issue_puppeteer.png

      Me podrian ayudar porfavor, indicandome el por que se presenta este error?, muchas gracias!

        Jose Miguel Lopez

        Jose Miguel Lopez

        student•
        hace 2 años

        bro te falta el ; linea 3

        Luis José Hernández

        Luis José Hernández

        student•
        hace 2 años

        Buenas tardes amigo, espero que todo este muy bien, yo tengo el mismo error y no es cuestión de un ; aun no se que puede ser, si ya lo resolviste seria genial conocer la solución.

        Saludos.

      andres medina

      andres medina

      student•
      hace 4 años

      No tests found, exiting with code 1 Run with --passWithNoTests to exit with code 0 In C:\Users\User\Documents\curso de automatizacion puppeteer 3 files checked. testMatch: /tests//.[jt]s?(x), **/?(.)+(spec|test).[tj]s?(x) - 1 match testPathIgnorePatterns: \node_modules\ - 3 matches testRegex: - 0 matches Pattern: forceExit - 0 matches

      Ami me genera este error... Alguien sabe por que??

        Javier Fuentes Mora

        Javier Fuentes Mora

        teacher•
        hace 4 años

        probablemente estas poniendo mal la ruta hacia tus tests desde el package json , o has olvidado agregarle la terminación .spec a tu archivo de prueba

        Javier Fuentes Mora

        Javier Fuentes Mora

        teacher•
        hace 3 años

        al parecer no tienes las pruebas donde deberias

      david alvarez

      david alvarez

      student•
      hace 4 años

      no veo el link en la sección de recursos para lo de cambiar de chromium a Chrome. gracias

        Javier Fuentes Mora

        Javier Fuentes Mora

        teacher•
        hace 4 años

        Hola! aqui estan https://github.com/puppeteer/puppeteer/issues/2757 https://developers.google.com/web/tools/puppeteer/get-started

        Javier Fuentes Mora

        Javier Fuentes Mora

        teacher•
        hace 3 años

        Una disculpa no se porque no los agregaron https://github.com/puppeteer/puppeteer/issues/2757. https://developers.google.com/web/tools/puppeteer/get-started

      Yhover Graig Ticona Donaires

      Yhover Graig Ticona Donaires

      student•
      hace 2 años

      He sufrido para realizar el primer test, pero con la ayuda de IA, la documentación para hacer una buena instalación de Puppeteer y Chrome en WSL, logré terminar, les paso mi código:

      Yan Harold Muñoz Dominguez

      Yan Harold Muñoz Dominguez

      student•
      hace un año

      En la nueva versión de Puppeteer ya no está disponible la función de waitForTimeout en 2024

      await page.waitForTimeout(5000); -> En la documentación actual ya se trabaja con promesas

      await new Promise(resolve => setTimeout(resolve, 5000)); -> Versión actual

      const puppeteer = require('puppeteer'); describe('Mi test en Puppeteer', () => { it('Debe visitar la página de Wikipedia', async () => { const browser = await puppeteer.launch({ headless:false }); const page = await browser.newPage(); await page.goto('https://es.wikipedia.org/wiki/Juli%C3%A1n_Andr%C3%A9s_Qui%C3%B1ones'); await new Promise(resolve => setTimeout(resolve, 5000)); await browser.close(); }, 10000); }); ```const puppeteer = require('puppeteer'); describe('Mi test en Puppeteer', () => {    it('Debe visitar la página de Wikipedia', async () => {        const browser = await puppeteer.launch({            headless:false        });        const page = await browser.newPage();        await page.goto('https://es.wikipedia.org/wiki/Juli%C3%A1n\_Andr%C3%A9s\_Qui%C3%B1ones');        await new Promise(resolve => setTimeout(resolve, 5000));        await browser.close();    }, 10000);});
      Luca Cussino

      Luca Cussino

      student•
      hace 2 años

      Si tienen problemas con esta linea de código:

      await page.waitForTimeout(5000); ```*await* new Promise((resolve) => setTimeout(resolve, 5000))await page.waitForTimeout(5000); reemplazarla con esta: ```js await new Promise((resolve) => setTimeout(resolve, 5000))
      Cristian Rubio

      Cristian Rubio

      student•
      hace 3 años

      Aún no cargan los recursos...

      Erick Vicentin

      Erick Vicentin

      student•
      hace 3 años

      A alguien mas le sale el siguiente error?

      /Users/erick.vicentin/dev/puppeteer-ui/node_modules/jest/node_modules/jest-cli/build/cli/index.js:161 if (error?.stack) { ^ SyntaxError: Unexpected token '.'
        Javier Fuentes Mora

        Javier Fuentes Mora

        teacher•
        hace 3 años

        puedes compartir tu código ?

    Escuelas

    • Desarrollo Web
      • Fundamentos del Desarrollo Web Profesional
      • Diseño y Desarrollo Frontend
      • Desarrollo Frontend con JavaScript
      • Desarrollo Frontend con Vue.js
      • Desarrollo Frontend con Angular
      • Desarrollo Frontend con React.js
      • Desarrollo Backend con Node.js
      • Desarrollo Backend con Python
      • Desarrollo Backend con Java
      • Desarrollo Backend con PHP
      • Desarrollo Backend con Ruby
      • Bases de Datos para Web
      • Seguridad Web & API
      • Testing Automatizado y QA para Web
      • Arquitecturas Web Modernas y Escalabilidad
      • DevOps y Cloud para Desarrolladores Web
    • English Academy
      • Inglés Básico A1
      • Inglés Básico A2
      • Inglés Intermedio B1
      • Inglés Intermedio Alto B2
      • Inglés Avanzado C1
      • Inglés para Propósitos Específicos
      • Inglés de Negocios
    • Marketing Digital
      • Fundamentos de Marketing Digital
      • Marketing de Contenidos y Redacción Persuasiva
      • SEO y Posicionamiento Web
      • Social Media Marketing y Community Management
      • Publicidad Digital y Paid Media
      • Analítica Digital y Optimización (CRO)
      • Estrategia de Marketing y Growth
      • Marketing de Marca y Comunicación Estratégica
      • Marketing para E-commerce
      • Marketing B2B
      • Inteligencia Artificial Aplicada al Marketing
      • Automatización del Marketing
      • Marca Personal y Marketing Freelance
      • Ventas y Experiencia del Cliente
      • Creación de Contenido para Redes Sociales
    • Inteligencia Artificial y Data Science
      • Fundamentos de Data Science y AI
      • Análisis y Visualización de Datos
      • Machine Learning y Deep Learning
      • Data Engineer
      • Inteligencia Artificial para la Productividad
      • Desarrollo de Aplicaciones con IA
      • AI Software Engineer
    • Ciberseguridad
      • Fundamentos de Ciberseguridad
      • Hacking Ético y Pentesting (Red Team)
      • Análisis de Malware e Ingeniería Forense
      • Seguridad Defensiva y Cumplimiento (Blue Team)
      • Ciberseguridad Estratégica
    • Liderazgo y Habilidades Blandas
      • Fundamentos de Habilidades Profesionales
      • Liderazgo y Gestión de Equipos
      • Comunicación Avanzada y Oratoria
      • Negociación y Resolución de Conflictos
      • Inteligencia Emocional y Autogestión
      • Productividad y Herramientas Digitales
      • Gestión de Proyectos y Metodologías Ágiles
      • Desarrollo de Carrera y Marca Personal
      • Diversidad, Inclusión y Entorno Laboral Saludable
      • Filosofía y Estrategia para Líderes
    • Diseño de Producto y UX
      • Fundamentos de Diseño UX/UI
      • Investigación de Usuarios (UX Research)
      • Arquitectura de Información y Usabilidad
      • Diseño de Interfaces y Prototipado (UI Design)
      • Sistemas de Diseño y DesignOps
      • Redacción UX (UX Writing)
      • Creatividad e Innovación en Diseño
      • Diseño Accesible e Inclusivo
      • Diseño Asistido por Inteligencia Artificial
      • Gestión de Producto y Liderazgo en Diseño
      • Diseño de Interacciones Emergentes (VUI/VR)
      • Desarrollo Web para Diseñadores
      • Diseño y Prototipado No-Code
    • Contenido Audiovisual
      • Fundamentos de Producción Audiovisual
      • Producción de Video para Plataformas Digitales
      • Producción de Audio y Podcast
      • Fotografía y Diseño Gráfico para Contenido Digital
      • Motion Graphics y Animación
      • Contenido Interactivo y Realidad Aumentada
      • Estrategia, Marketing y Monetización de Contenidos
    • Desarrollo Móvil
      • Fundamentos de Desarrollo Móvil
      • Desarrollo Nativo Android con Kotlin
      • Desarrollo Nativo iOS con Swift
      • Desarrollo Multiplataforma con React Native
      • Desarrollo Multiplataforma con Flutter
      • Arquitectura y Patrones de Diseño Móvil
      • Integración de APIs y Persistencia Móvil
      • Testing y Despliegue en Móvil
      • Diseño UX/UI para Móviles
    • Diseño Gráfico y Arte Digital
      • Fundamentos del Diseño Gráfico y Digital
      • Diseño de Identidad Visual y Branding
      • Ilustración Digital y Arte Conceptual
      • Diseño Editorial y de Empaques
      • Motion Graphics y Animación 3D
      • Diseño Gráfico Asistido por Inteligencia Artificial
      • Creatividad e Innovación en Diseño
    • Programación
      • Fundamentos de Programación e Ingeniería de Software
      • Herramientas de IA para el trabajo
      • Matemáticas para Programación
      • Programación con Python
      • Programación con JavaScript
      • Programación con TypeScript
      • Programación Orientada a Objetos con Java
      • Desarrollo con C# y .NET
      • Programación con PHP
      • Programación con Go y Rust
      • Programación Móvil con Swift y Kotlin
      • Programación con C y C++
      • Administración Básica de Servidores Linux
    • Negocios
      • Fundamentos de Negocios y Emprendimiento
      • Estrategia y Crecimiento Empresarial
      • Finanzas Personales y Corporativas
      • Inversión en Mercados Financieros
      • Ventas, CRM y Experiencia del Cliente
      • Operaciones, Logística y E-commerce
      • Gestión de Proyectos y Metodologías Ágiles
      • Aspectos Legales y Cumplimiento
      • Habilidades Directivas y Crecimiento Profesional
      • Diversidad e Inclusión en el Entorno Laboral
      • Herramientas Digitales y Automatización para Negocios
    • Blockchain y Web3
      • Fundamentos de Blockchain y Web3
      • Desarrollo de Smart Contracts y dApps
      • Finanzas Descentralizadas (DeFi)
      • NFTs y Economía de Creadores
      • Seguridad Blockchain
      • Ecosistemas Blockchain Alternativos (No-EVM)
      • Producto, Marketing y Legal en Web3
    • Recursos Humanos
      • Fundamentos y Cultura Organizacional en RRHH
      • Atracción y Selección de Talento
      • Cultura y Employee Experience
      • Gestión y Desarrollo de Talento
      • Desarrollo y Evaluación de Liderazgo
      • Diversidad, Equidad e Inclusión
      • AI y Automatización en Recursos Humanos
      • Tecnología y Automatización en RRHH
    • Finanzas e Inversiones
      • Fundamentos de Finanzas Personales y Corporativas
      • Análisis y Valoración Financiera
      • Inversión y Mercados de Capitales
      • Finanzas Descentralizadas (DeFi) y Criptoactivos
      • Finanzas y Estrategia para Startups
      • Inteligencia Artificial Aplicada a Finanzas
      • Domina Excel
      • Financial Analyst
      • Conseguir trabajo en Finanzas e Inversiones
    • Startups
      • Fundamentos y Validación de Ideas
      • Estrategia de Negocio y Product-Market Fit
      • Desarrollo de Producto y Operaciones Lean
      • Finanzas, Legal y Fundraising
      • Marketing, Ventas y Growth para Startups
      • Cultura, Talento y Liderazgo
      • Finanzas y Operaciones en Ecommerce
      • Startups Web3 y Blockchain
      • Startups con Impacto Social
      • Expansión y Ecosistema Startup
    • Cloud Computing y DevOps
      • Fundamentos de Cloud y DevOps
      • Administración de Servidores Linux
      • Contenerización y Orquestación
      • Infraestructura como Código (IaC) y CI/CD
      • Amazon Web Services
      • Microsoft Azure
      • Serverless y Observabilidad
      • Certificaciones Cloud (Preparación)
      • Plataforma Cloud GCP

    Platzi y comunidad

    • Platzi Business
    • Live Classes
    • Lanzamientos
    • Executive Program
    • Trabaja con nosotros
    • Podcast

    Recursos

    • Manual de Marca

    Soporte

    • Preguntas Frecuentes
    • Contáctanos

    Legal

    • Términos y Condiciones
    • Privacidad
    • Tyc promociones
    Reconocimientos
    Reconocimientos
    Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
    Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
    Logo reconocimientoPrimera Startup EdTech · 2018
    Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
    Logo reconocimientoCEO Mejor Emprendedor del año · 2024
    De LATAM conpara el mundo
    YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads