Configuración de nuestro ambiente

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

Caleb Ventura

student•

{
    "printWidth": 100,
    "singleQuote": false,
    "useTabs": true,
    "tabWidth": 2,
    "semi": false,
    "trailingComma": "es5",
    "bracketSameLine": true
}

Rolando Tarqui Benito

student•

tener node.js y npm
Por si quieres inicializar un repo con GIT→ git init
Inicializar el proyecto con todas las config por defecto→ npm init -y
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
agregar archivo .gitignore → para que git ignoré los archivos/carpetas que le indiquemos, en este caso ignoramos; node_modules
opcional: agregar archivo .prettierrc →

{
    "printWidth": 100,
    "singleQuote": true,
    "useTabs": true,
    "tabWidth": 2,
    "semi": false,
    "trailingComma": "es5",
    "bracketSameLine": true    
}

Alma Karina Vega Hernández

student•

Gracias

Javier Fuentes Mora

teacher•

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

Alexis Damián Pacheco Rivero

student•

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

student•

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

student•

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

Sergio Aguirre

student•

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

company_admin•

De donde se descarga el documento, para poder empezar ?

Javier Fuentes Mora

teacher•

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

Alex Padilla

student•

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

Javier Fuentes Mora

teacher•

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

teacher•

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

student•

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

student•

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

Daniel Martinez

student•

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

Instalar la versión de git (Te recomiendo mirar un video de instalación, cuenta con algunas casillas que deberás marcar)
Instalar Node.js (LTS), estas son las versiones mas seguras con soporte.
Recomiendo Visual Studio Code porque es el que él utiliza en el video, descárgalo.
Una vez descargado, crearas una carpeta en algún lugar de tu pc.
En esa carpeta, abrirás un folder en visual estudio code con esa ruta.
Cambia la terminal de VSC por cmd, a mi me funciono con cmd.
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á.
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

student••

Instalación de Git

Oscar Armando Fernández Reyes

student•

Vasti Gabriela Flores Zelaya

student•

alguien tiene el link del repositorio de este curso?

Bianca Menacho

student•

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

Paola Miers

student•

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

teacher•

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

EDUARDO JOSUE MARIN HERNANDEZ

student•

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

teacher•

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

Rolando Tarqui Benito

student•

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

Javier Fuentes Mora

teacher•

: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

student•

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

Manuel Ledezma

student•

A que se deberá este error?

Pablo Antipan Quiñenao

student•

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

teacher•

a veces son peer dependencies que no estan actualziadas

David Camilo Salas Muñoz

student•

<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

student•

me muestra este error no se que hice mal

Nathalia Beltran

student•

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

student•

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

Configuración de nuestro ambiente

Bienvenida al curso: ¿Qué vamos a aprender?

Automatización de pruebas con Puppeteer

Introducción a la Automatización WEB

¿Qué es el DOM?

Atributos y selectores

Introducción a Puppeteer

¿Qué es Puppeteer?

Configuración de nuestro ambiente

Conociendo Puppeteer

Abriendo y cerrando el navegador

Opciones de lanzamiento

Navegación con Puppeteer

Interactuando con los elementos

Esperar por los elementos

Esperando por funciones

Extrayendo información

Timeouts

Hooks

Conclusión del curso

Próximos pasos