Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/midudev/jscamp/llms.txt

Use this file to discover all available pages before exploring further.

Este módulo cubre las pruebas end-to-end de la aplicación DevJobs usando dos enfoques: el clásico con Playwright y uno experimental basado en IA con Stagehand, que permite interactuar con el navegador a través de instrucciones en lenguaje natural.

​
Lo que aprenderás

  • Configurar y ejecutar el test runner de Playwright
  • Navegar y hacer assertions con page.goto, locator y expect
  • Seleccionar elementos con roles ARIA, texto y data-testid
  • Configuración headless y parallel en CI
  • Automatización de tests con IA usando Stagehand y modelos LLM
  • Uso del agente computer-use para acciones de navegación autónoma

​
Sub-proyectos

El módulo 05-testing/ contiene dos sub-proyectos independientes:

e2e/

Tests E2E con Playwright sobre la app DevJobs corriendo en localhost:5173.

ai-e2e-test/

Tests experimentales con Stagehand que utilizan un LLM para navegar y validar páginas con lenguaje natural.

​
Playwright E2E

​
Configuración: playwright.config.js

// @ts-check
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    headless: false,
    viewport: { width: 1280, height: 720 },
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});
Puntos clave de la configuración:
  • fullyParallel: true — los tests se ejecutan en paralelo por defecto.
  • forbidOnly — en CI falla el build si se dejó test.only accidentalmente.
  • retries: 2 — reintenta tests fallidos en CI para evitar flakiness.
  • workers: 1 — en CI los tests corren en serie para estabilidad.
  • headless: false — el navegador se abre en modo visible en local.
  • reporter: 'html' — genera un reporte HTML navegable.

​
Test: example.spec.js

// @ts-check
import { test, expect } from '@playwright/test';

// Prioridad de selectores recomendada:
// 1. Roles ARIA
// 2. Etiquetas de texto, placeholders, nombres
// 3. data-testid
// 4. Selectores CSS (último recurso)

test('buscar empleos y aplicar a una oferta', async ({ page }) => {
  await page.goto('http://localhost:5173')

  const searchInput = page.getByRole('searchbox')
  await searchInput.fill('React')

  await page.getByRole('button', { name: 'Buscar' }).click()

  const jobCards = page.locator('.job-listing-card')

  await expect(jobCards.first()).toBeVisible()

  const firstJobTitle = jobCards.first().locator('h3')
  await expect(firstJobTitle).toHaveText('Desarrollador de Software Senior')

  await page.getByRole('button', { name: 'Iniciar sesión' }).click()

  const applyButton = page.getByRole('button', { name: 'Aplicar' }).first()
  await applyButton.click()

  page.getByRole('button', { name: 'Aplicado' }).first()
})
Este test verifica el flujo completo de búsqueda y aplicación en DevJobs:
  1. Navega a http://localhost:5173
  2. Busca ofertas con la palabra “React” usando el searchbox
  3. Hace clic en el botón “Buscar”
  4. Verifica que la primera tarjeta de empleo sea visible y tenga el título esperado
  5. Inicia sesión para desbloquear el botón de aplicar
  6. Hace clic en “Aplicar” y verifica que el botón cambia a “Aplicado”
Playwright recomienda usar selectores por rol ARIA (getByRole) como primera opción, ya que son los más robustos y semánticos. Los selectores CSS como .job-listing-card son el último recurso.

​
Ejecutar Tests con Playwright

1

Instalar dependencias

cd 05-testing/e2e
npm install
2

Instalar navegadores de Playwright

npx playwright install
3

Asegúrate de que la app DevJobs esté corriendo

El test apunta a http://localhost:5173. Arranca el frontend de DevJobs antes de ejecutar los tests.
4

Ejecutar los tests

npx playwright test
5

Ver el reporte HTML

npx playwright show-report

​
Tests con IA: Stagehand

Stagehand es una librería de @browserbasehq que integra un LLM directamente en el bucle de automatización del navegador. En lugar de escribir selectores manualmente, describes en lenguaje natural lo que quieres que haga el agente.

​
Archivo: test-ai.js

process.loadEnvFile() // es cargar las variables de entorno del .env

import { test } from 'node:test'
import assert from 'node:assert'

import { Stagehand } from '@browserbasehq/stagehand'

test('Un usuario puede entrar a la JSConf y adquirir dos entradas por €287.98', async () => {
  const stagehand = new Stagehand({
    env: 'LOCAL',
    model: 'openai/gpt-5-mini'
  })

  const agent = stagehand.agent({
    mode: "cua",
    model: {
      modelName: "openai/computer-use-preview",
      apiKey: process.env.OPENAI_API_KEY
    },
    systemPrompt: "Eres un agente de testing e2e para navegar páginas y hacer las acciones que te pedimos",
});

  await stagehand.init()

  const [page] = stagehand.context.pages()

  await page.goto('https://jsconf.es')

  const result = await agent.execute("add two tickets 'Entrada' to the cart for the JSConf event and extract the subtotal amount displayed in the cart.")

  console.log(result)

  await stagehand.close()
})

​
¿Cómo funciona Stagehand?

1

Inicialización

Se crea una instancia de Stagehand con env: 'LOCAL' (navegador local) y se especifica el modelo LLM base.
2

Creación del agente

stagehand.agent() crea un agente con modo CUA (Computer Use Agent) usando el modelo openai/computer-use-preview, especializado en interactuar con interfaces gráficas.
3

Navegación inicial

page.goto() lleva el navegador a la URL objetivo. A partir de aquí el agente toma el control.
4

Ejecución en lenguaje natural

agent.execute() recibe una instrucción en inglés/español y el modelo LLM decide qué clicks, scrolls y acciones realizar para cumplirla.
5

Extracción de resultado

El agente devuelve un objeto con el resultado de la tarea (en este caso, el subtotal del carrito), que podría usarse con assert.strictEqual para validar el valor esperado.
Stagehand requiere una API key de OpenAI (u otro proveedor compatible) configurada en el archivo .env como OPENAI_API_KEY. Sin ella, el agente no podrá inicializarse. También puede configurarse con Browserbase para ejecución en la nube.

​
Ejecutar Tests con Stagehand

1

Ir al directorio del sub-proyecto

cd 05-testing/ai-e2e-test
2

Instalar dependencias

npm install
3

Configurar la API key

Crea un archivo .env en el directorio ai-e2e-test/:
OPENAI_API_KEY=sk-...
4

Ejecutar el test

node test-ai.js
A diferencia de Playwright, Stagehand no usa un test runner propio. El archivo test-ai.js utiliza el módulo nativo node:test de Node.js, por lo que se ejecuta directamente con node.

Build docs developers (and LLMs) love

Get started for freeTalk to us