CursosEmpresasBlogLiveConfPrecios

Configuración de nuestro ambiente

Clase 5 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
Introducción a la Automatización WEB
  • 2
    ¿Qué es el DOM?

    ¿Qué es el DOM?

    03:51
  • 3
    Atributos y selectores

    Atributos y selectores

    16:40
Introducción a Puppeteer
  • 4
    ¿Qué es Puppeteer?

    ¿Qué es Puppeteer?

    06:10
  • 5
    Configuración de nuestro ambiente

    Configuración de nuestro ambiente

    05:06
Conociendo Puppeteer
  • 6
    Abriendo y cerrando el navegador

    Abriendo y cerrando el navegador

    09:12
  • 7
    Opciones de lanzamiento

    Opciones de lanzamiento

    07:48
  • 8
    Navegación con Puppeteer

    Navegación con Puppeteer

    09:34
  • 9
    Interactuando con los elementos

    Interactuando con los elementos

    19:13
  • 10
    Esperar por los elementos

    Esperar por los elementos

    16:51
  • 11
    Esperando por funciones

    Esperando por funciones

    09:46
  • 12
    Extrayendo información

    Extrayendo información

    21:42
  • 13
    Timeouts

    Timeouts

    07:43
  • 14
    Hooks

    Hooks

    07:31
Conclusión del curso
  • 15
    Próximos pasos

    Próximos pasos

    01:09
    Caleb Ventura

    Caleb Ventura

    student•
    hace 4 años
    { "printWidth": 100, "singleQuote": false, "useTabs": true, "tabWidth": 2, "semi": false, "trailingComma": "es5", "bracketSameLine": true }
    Rolando Tarqui Benito

    Rolando Tarqui Benito

    student•
    hace 4 años
    1. tener node.js y npm
    2. Por si quieres inicializar un repo con GIT→ git init
    3. Inicializar el proyecto con todas las config por defecto→ npm init -y
    4. Instalar puppeteer y jest; permite gestionar las pruebas → npm i puppeteer jest (si no funciona, instalar por separado)
      1. Opcional: dependencia de desarrollo; da formato al código y se acomoda solo → npm i -D prettier
    5. agregar archivo .gitignore → para que git ignoré los archivos/carpetas que le indiquemos, en este caso ignoramos; node_modules
    6. opcional: agregar archivo .prettierrc →
    { "printWidth": 100, "singleQuote": true, "useTabs": true, "tabWidth": 2, "semi": false, "trailingComma": "es5", "bracketSameLine": true }
      Alma Karina Vega Hernández

      Alma Karina Vega Hernández

      student•
      hace 3 años

      Gracias

    Javier Fuentes Mora

    Javier Fuentes Mora

    teacher•
    hace 4 años

    Tuve un pequeño error quise decir "y" no "w" 😅

      Alexis Damián Pacheco Rivero

      Alexis Damián Pacheco Rivero

      student•
      hace 3 años

      No se si tienen un tutorial o como puedo hacer para hacer li de inicializar git, y de ahi en adelante como inicializar lo de nom, o sea me refiero a si hay que hacer algo antes para que esta inicialización pueda funcionar.

      Alexis Damián Pacheco Rivero

      Alexis Damián Pacheco Rivero

      student•
      hace 3 años

      npm : El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si escribió correctamente el nombre o, si incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo. En línea: 1 Carácter: 1

      • npm init -y
      • + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

      me sale ese error tanto para git, como npm.

    Yhover Graig Ticona Donaires

    Yhover Graig Ticona Donaires

    student•
    hace 2 años

    Es necesario tener: Git, npm y node.js, antes de iniciar con todo lo que el profe dijo

    Sergio Aguirre

    Sergio Aguirre

    student•
    hace 2 años

    Estimado, por políticas de mi empresa no puedo hacer las instalaciones requeridas para este curso, que alternativa tengo para continuar con el estudio?

    Catalina Marin

    Catalina Marin

    company_admin•
    hace 3 años

    De donde se descarga el documento, para poder empezar ?

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 3 años

      https://github.com/javierfuentesm/Puppeteer-platzi

    Alex Padilla

    Alex Padilla

    student•
    hace 4 años

    Puppeteer y jest también son dependencias de desarrollo? Si es así por qué no se las instaló como tal?

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 4 años

      Hola Alex, las dependencias de desarrollo normalmente son cosas que no usaremos en producción o cuando desplegamos nuestra aplicación , en este caso si esto lo llegamos a subir a un CI/CD necesitaremos jest y puppeteer ya que son dependencias clave que si necesitaremos , si tu lo estas integrando a un proyecto ya existente y tus pruebas solo serán locales entonces yo te recomendaría instalarlas como dependencias de desarrollo

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 3 años

      las devDepencies sirve para que no se instalen en un CI pero si quieres ejecutar tus pruebas lo vas a ncesitar

    Jose Ricardo Pinza Palechor

    Jose Ricardo Pinza Palechor

    student•
    hace un año

    Lo malo de estos cursos es que no muestran bien como hacer el proceso de configuración inicial de todo el ambiente y para los que estamos iniciando nos queda algo complejo, toco dejar el curso a medias porque esta clase no la logre completar

    Sol Galarza

    Sol Galarza

    student•
    hace 2 años

    Se me complica mucho hacer esta clase, no puedo descargar todo lo que se requiere

    Daniel Martinez

    Daniel Martinez

    student•
    hace 8 meses

    Hola, para los nuevos que quieran saber que se necesita en este punto para avanzar en el curso.

    1. Instalar la versión de git (Te recomiendo mirar un video de instalación, cuenta con algunas casillas que deberás marcar)
    2. Instalar Node.js (LTS), estas son las versiones mas seguras con soporte.
    3. Recomiendo Visual Studio Code porque es el que él utiliza en el video, descárgalo.
    4. Una vez descargado, crearas una carpeta en algún lugar de tu pc.
    5. En esa carpeta, abrirás un folder en visual estudio code con esa ruta.
    6. Cambia la terminal de VSC por cmd, a mi me funciono con cmd.
    7. Esto se hace colocando el comando ctrl + ñ, dentro del VSC. powershell o zhs me solicitaban cambiar directivas de windows y aun no conozco hasta allá.
    8. dentro de VSC siguiendo los pasos del profe, iniciara git, luego npm y los demas pasos, te saldrán con normalidad.

    Espero que estos datos te puedan ayudar si eres nuevo/a como yo. :)

      Oscar Armando Fernández Reyes

      Oscar Armando Fernández Reyes

      student•
      hace 2 meses
      •
      editado

      Instalación de Git https://youtu.be/fFNvZZy73jA?si=Xt32aCMt_uRzEC0x

      Oscar Armando Fernández Reyes

      Oscar Armando Fernández Reyes

      student•
      hace 2 meses

      https://git-scm.com/downloads/win

      https://nodejs.org/es/download

    Vasti Gabriela Flores Zelaya

    Vasti Gabriela Flores Zelaya

    student•
    hace 2 años

    alguien tiene el link del repositorio de este curso?

    Bianca Menacho

    Bianca Menacho

    student•
    hace 3 años

    disculpa, que extension usas para el autocompletado del codigo en visual

    Paola Miers

    Paola Miers

    student•
    hace 3 años

    De donde se descarga el documento para poder empezar? o el link que dice en el video que debe proveer para el git?

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 3 años

      https://github.com/javierfuentesm/Puppeteer-platzi

    EDUARDO JOSUE MARIN HERNANDEZ

    EDUARDO JOSUE MARIN HERNANDEZ

    student•
    hace 3 años

    Estimados les consulto ¿antes de inicializar el repositorio de git y descargar las librerías debo hacer algún paso previo? es que no me permite avanzar de ese paso.

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 3 años

      como que no te permite avanzar? pues debes de tener node y git

    Rolando Tarqui Benito

    Rolando Tarqui Benito

    student•
    hace 4 años

    Me salto este error :/ . q puede estar pasando?

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 4 años

      :o nunca había visto ese error , te recomiendo que en la carpeta donde inicialices tu proyecto tengas los permisos correspondientes, intentalo en otra carpeta para descartar que no sea un problema de permisos

      Luis Sosa

      Luis Sosa

      student•
      hace 3 años

      Trata de poner el nombre del folder sin espacios ni caracteres. Ejemplo: PlatziPuppeteer

    Manuel Ledezma

    Manuel Ledezma

    student•
    hace 4 años

    A que se deberá este error?

    Captura de pantalla de 2022-01-24 18-56-43.png

      Pablo Antipan Quiñenao

      Pablo Antipan Quiñenao

      student•
      hace 4 años

      Hola!

      Lo que dice la consola más que un error es un warning, son advertencias sobre vulnerabilidades que tienen los paquetes que instalaste, puedes leer más aquí. Y lo de packages are looking lor funding es que le puedes donar a los desarrolladores de estos paquetes.

      Saludos!

      Javier Fuentes Mora

      Javier Fuentes Mora

      teacher•
      hace 3 años

      a veces son peer dependencies que no estan actualziadas

    David Camilo Salas Muñoz

    David Camilo Salas Muñoz

    student•
    hace un año

    <img height="224" width="202" src="file:///C:/Users/spidy/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png" />Para los que no les funcionen, primero deben instalar ubuntu por medio de la terminal, tambien esta en el curso de la terminal si no estoy mal. Luego intenten con lo siguiente. A mi me funciono.

    CONFIGURACIÓN DE NUESTRO AMBIENTE

    Visual Studio Code, accedemos a la Terminal y en Ubuntu. Se debe crear previamente la carpeta donde vamos a crear e instalar nuestras bibliotecas.

    1. Inicializamos con: git init

    2. Iniciamos con todas las configuraciones por defecto: npm init -y

    3. Instalamos Jest: npm install –-save-dev jest

    A la derecha se crearan los archivos, packase,json package-lock.json – node_modules

    4. Instalar Prettier como una dependencia de desarrollo usando una alternativa más explícita o simplificada, dependiendo de tus preferencias.

    npm install --save-dev prettier

    <img height="88" width="140" src="file:///C:/Users/spidy/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png" />Se recomienda crear una propia configuración en nuestro proyecto: .gitignore

    lo cual nos va ayudar a poderle decir a git, cuales son las carpetas que quiero que ignore. Donde se encuentra node modules.

    Sergio EnriquePinilla

    Sergio EnriquePinilla

    student•
    hace un año

    me muestra este error no se que hice mal

    Nathalia Beltran

    Nathalia Beltran

    student•
    hace un año

    Definitivamente debo tomar cursos previos para configurar el Visual Studio, es una lastima pero no puedo avanzar mas, volveré cuando tenga mejores bases

    Luis Sosa

    Luis Sosa

    student•
    hace 3 años

    Recuerden instalar git y node.js con puppeteer para estar listos para la proxima clase

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