Playwright y Typescript | QA Ep. 7 | Un comando, 7 archivos: instala Playwright y entiende TODO

Un comando crea siete archivos. En este episodio los entendemos TODOS, uno por uno. Nada de "esto vino solo": al terminar vas a poder explicar qué hace cada archivo del proyecto. Playwright instalado, navegadores descargados, la suite de ejemplo corriendo y tu primer commit en GitHub. Arranca el Bloque B y arranca tu portafolio. ━━━━━━━━━━━━━━━━━━━━━━ 💻 COMANDOS (Mac y Windows) 1) CREAR LA CARPETA Y ENTRAR Mac / Linux: mkdir Typescript-Automation-Practice && cd Typescript-Automation-Practice Windows (PowerShell): mkdir Typescript-Automation-Practice ; cd Typescript-Automation-Practice Windows (CMD): mkdir Typescript-Automation-Practice && cd Typescript-Automation-Practice 2) INSTALAR PLAYWRIGHT (igual en los tres) npm init playwright@latest 3) EJECUTAR LOS TESTS npx playwright test → corre todo npx playwright test --headed → con el navegador visible npx playwright test --ui → modo interactivo npx playwright test --project=chromium → solo un navegador npx playwright show-report → abre el reporte HTML 4) TU PRIMER COMMIT git init git add . git commit -m "Ep 7: proyecto base" git remote add origin {URL-de-tu-repo} git branch -M main git push -u origin main ⚠️ Antes del push: abre el .gitignore y confirma que dice node_modules. Si subes esa carpeta, tu repo pasa de 200 KB a 400 MB y GitHub te lo va a reclamar. ━━━━━━━━━━━━━━━━━━━━━━ 📦 ¿QUÉ ES UN "PROYECTO DE NODE"? Una carpeta con un archivo package.json dentro. Nada más. • package.json — la ficha del proyecto: nombre, qué librerías usa y qué comandos tiene • node_modules/ — donde npm deja las librerías descargadas. Pesa mucho y NUNCA se sube a Git • package-lock.json — la versión exacta de cada librería. Esto SÍ se sube: garantiza que a todos les baje lo mismo ━━━━━━━━━━━━━━━━━━━━━━ 🧩 npm VS npx (la que casi nadie explica) npm → instala. Trabaja de forma global, en toda tu máquina. npx → ejecuta. Corre lo que está en node_modules, dentro de TU proyecto. Por eso todos los comandos de Playwright empiezan con npx. ━━━━━━━━━━━━━━━━━━━━━━ 📁 LOS SIETE ARCHIVOS QUE APARECIERON 1. tests/ — acá van tus tests. Organízala como quieras (login/, checkout/…) 2. tests-examples/ — los tests de ejemplo que trae la instalación 3. playwright.config.ts — el cerebro. Navegadores y opciones. Todo el Ep. 8 va sobre este archivo 4. package.json — la ficha del proyecto 5. package-lock.json — las versiones exactas 6. node_modules/ — las librerías descargadas 7. .github/workflows/ — el pipeline de CI en un archivo YAML. Lo dejamos hasta el Ep. 31 ━━━━━━━━━━━━━━━━━━━━━━ ⏱️ CAPÍTULOS 00:00 Bienvenida: arranca el Bloque B 00:51 Repaso del Episodio 6 02:25 Qué te llevas de este video 03:17 ¿Qué es un proyecto de Node? 03:20 package.json, node_modules y package-lock.json 04:37 El comando que crea todo 04:43 mkdir y cd: crear la carpeta del proyecto 07:22 npm init playwright@latest: el asistente 08:29 TypeScript o JavaScript 08:42 El workflow de GitHub Actions 08:59 npm vs npx: la diferencia 09:36 Instalación terminada 11:13 Los siete archivos, uno por uno 11:27 La carpeta tests/ 12:28 playwright.config.ts: el cerebro 13:01 .github/workflows: el pipeline de CI 13:36 Tu primera ejecución: npx playwright test 14:43 ¿Por qué no viste el navegador? --headed 15:15 npx explicado 15:26 Tu primer commit 16:14 Crear el repositorio en GitHub 16:52 git init y git add . 18:09 git status 18:25 git commit -m 19:16 git remote add origin 20:06 git branch -M main y git push 20:46 Proyecto subido a GitHub 21:18 Lo que casi todos hacen mal 21:40 Tres cosas para quedarte 22:17 Próximo episodio ━━━━━━━━━━━━━━━━━━━━━━ 🔥 LO QUE CASI TODOS HACEN MAL 1. Instalar dentro de OneDrive o Google Drive. La nube sincronizando node_modules produce errores imposibles de diagnosticar. Usa una carpeta local. 2. Subir node_modules al repositorio. Cientos de MB de algo que se regenera con npm install. Revisa el .gitignore antes del primer push. 3. Elegir JavaScript por error en el asistente. Si te pasó: borra la carpeta y empieza de nuevo. Toma dos minutos y te ahorra confusión toda la serie. ━━━━━━━━━━━━━━━━━━━━━━ 📌 TRES COSAS PARA QUEDARTE 1️⃣ Un comando crea todo. npm init playwright@latest instala, configura y descarga los navegadores. 2️⃣ Solo dos archivos importan hoy. La carpeta tests/ y playwright.config.ts. El resto es andamiaje. 3️⃣ El repo ya existe. Typescript-Automation-Practice con su primer commit. Tu portafolio arrancó. 💡 Crea el repositorio en GitHub como público: así el CI/CD del Ep. 31 te sale gratis. ━━━━━━━━━━━━━━━━━━━━━━ ▶️ SIGUIENTE EPISODIO Ep. 8: playwright.config.ts explicado línea por línea. 🔔 SUSCRÍBETE para no perder el orden de la serie. Tus dudas en los comentarios se responden con mucho amor y cariño 💚 #Playwright #TypeScript #QAAutomation #Git #TestingDeSoftware