Pruebas de extremo a extremo
Valide flujos completos de usuario mediante pruebas de extremo a extremo.
Pruebas de extremo a extremo es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Probar como un usuario
Las pruebas de extremo a extremo ejecutan su aplicación real en un navegador real, haciendo clic en botones y rellenando formularios exactamente como lo haría un usuario. Verifican que todo, desde la interfaz hasta el backend, funciona conjuntamente.
¿Por qué E2E?
Las pruebas unitarias comprueban partes aisladas, pero solo las pruebas e2e confirman el recorrido completo: que un usuario puede iniciar sesión, navegar, enviar un formulario y ver el resultado. Detectan problemas de integración que ninguna otra prueba encuentra.
Instalar Cypress
Cypress es un framework e2e popular con un ejecutor de pruebas interactivo. Instálelo como dependencia de desarrollo y abra su ejecutor.
npm install -D cypress
npx cypress openEstructura de las pruebas de Cypress
Una prueba de Cypress usa describe para agrupar pruebas y it para cada escenario, siguiendo una sintaxis de pruebas conocida.
describe("Login flow", () => {
it("logs in a user", () => {
// steps go here
})
})Visitar una página
Use cy.visit para cargar una URL en el navegador, el punto de partida de la mayoría de las pruebas.
cy.visit("http://localhost:5173/login")Encontrar elementos
cy.get selecciona elementos mediante un selector CSS. Cypress espera automáticamente a que aparezcan los elementos, lo que reduce las pruebas inestables.
cy.get("input[name=email]")
cy.get("button[type=submit]")Escribir en campos de entrada
Encadene type a un campo de entrada seleccionado para simular la escritura con el teclado.
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")Hacer clic en elementos
Use click para interactuar con botones y enlaces, tal como lo haría un usuario.
cy.get("button[type=submit]").click()Comprobar el resultado
Después de interactuar, compruebe lo que el usuario debería ver ahora mediante should. Cypress reintenta las aserciones hasta que se cumplen o se agota el tiempo de espera.
cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")Una prueba e2e completa
Al reunir los pasos, obtiene una prueba legible de un flujo de usuario real.
describe("Login flow", () => {
it("logs in successfully", () => {
cy.visit("/login")
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")
cy.get("button[type=submit]").click()
cy.url().should("include", "/dashboard")
})
})Alternativa con Playwright
Playwright es otra herramienta e2e muy potente con conceptos similares: inicia un navegador, navega, interactúa y comprueba resultados. La API es diferente, pero el enfoque de pruebas es el mismo.
// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)Comprobación rápida
Compruebe sus conocimientos sobre las pruebas e2e.
Recapitulación
Las pruebas de extremo a extremo ejecutan la aplicación real en un navegador. Con Cypress, estructure las pruebas con describe/it, cargue páginas con cy.visit, busque elementos con cy.get, interactúe mediante type y click, y verifique los resultados con should. Playwright sigue las mismas ideas. A continuación, optimizará y publicará su compilación.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Pruebas de extremo a extremo» es gratis?
Sí — el texto completo de «Pruebas de extremo a extremo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Pruebas de extremo a extremo»?
Valide flujos completos de usuario mediante pruebas de extremo a extremo. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Pruebas de extremo a extremo»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a los frameworks de testing
- Pruebas unitarias con Vue Test Utils
- Pruebas de extremo a extremo