Cómo Usar Claude Code para Automatización del Navegador

La automatización de navegadores tradicionalmente ha requerido escribir scripts complejos, gestionar selectores y manejar estados de página impredecibles. Claude Code transforma este proceso permitiéndote describir lo que quieres en lenguaje natural y haciendo que la IA lo traduzca en acciones precisas del navegador.

Lo que hace que la automatización de navegadores con Claude Code sea potente:

Control por Lenguaje Natural: Dile a Claude "haz clic en el botón de iniciar sesión" en lugar de escribir código de selector
Adaptación Inteligente: La IA comprende el contexto y se adapta a los cambios de la página
Comprensión Visual: El árbol de accesibilidad y los modos de instantánea proporcionan una segmentación fiable de elementos
Soporte Multi-Navegador: Funciona con Chromium, Firefox y WebKit
Integración Fluida: Se ejecuta directamente en tu flujo de trabajo de desarrollo

💡

¿Probando APIs junto con flujos de trabajo del navegador? Apidog complementa la automatización de navegadores de Claude Code al proporcionar pruebas visuales de API y servidores mock. Cuando tus pruebas de navegador activan llamadas a la API, Apidog te ayuda a validar todo el ciclo de solicitud-respuesta. Prueba Apidog gratis para construir flujos de trabajo completos de pruebas de extremo a extremo.

botón

Esta guía cubre todo, desde la configuración básica hasta los patrones de automatización avanzados utilizando servidores MCP (Protocolo de Contexto de Modelo).

Comprendiendo las Opciones de Automatización de Navegadores

Claude Code ofrece múltiples enfoques para la automatización de navegadores, cada uno adecuado para diferentes casos de uso.

Opción 1: Playwright MCP (Recomendado)

Playwright MCP de Microsoft es el enfoque recomendado para la automatización de navegadores con Claude Code. Proporciona:

Soporte Oficial: Mantenido por Microsoft
Multi-Navegador: Funciona con Chromium, Firefox y WebKit
Modo de Árbol de Accesibilidad: Segmentación fiable de elementos sin selectores frágiles
Desarrollo Activo: Actualizaciones y mejoras regulares

Opción 2: Puppeteer MCP (Comunidad)

Aunque el paquete oficial de Puppeteer MCP ha sido deprecado, existen alternativas mantenidas por la comunidad:

API Familiar: Si ya conoces Puppeteer
Enfocado en Chrome: Optimizado para Chrome/Chromium
Soporte Legado: Para flujos de trabajo existentes basados en Puppeteer

Opción 3: API de Uso de Computadora de Claude

Para un control completo del escritorio más allá de los navegadores:

Acceso Completo al Escritorio: Controla cualquier aplicación
Basado en Capturas de Pantalla: Comprensión visual del contenido de la pantalla
Integración con API: Construye soluciones de automatización personalizadas

Tabla Comparativa

Característica	Playwright MCP	Puppeteer MCP	API de Uso de Computadora
Soporte de Navegador	Chromium, Firefox, WebKit	Solo Chromium	Cualquier navegador
Mantenimiento	Microsoft (oficial)	Comunidad	Anthropic
Segmentación de Elementos	Árbol de accesibilidad	Selectores CSS	Visual/coordenadas
Modo Headless	Sí	Sí	No (necesita pantalla)
Ideal para	Pruebas web, scraping	Proyectos legados	Automatización de escritorio

Configuración de Playwright MCP

Playwright MCP es la forma recomendada de añadir automatización de navegador a Claude Code. Así es como se configura.

Requisitos Previos

Node.js 18 o superior
CLI de Claude Code instalada
npm o npx disponibles

Paso 1: Configurar el Servidor MCP

Añade Playwright MCP a tu configuración de Claude Code. Crea o edita .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Paso 2: Verificar la Instalación

Inicia Claude Code y verifica que el servidor MCP esté funcionando:

claude

Deberías ver Playwright MCP listado en las herramientas disponibles. Prueba con un comando simple:

Navigate to https://example.com and tell me the page title

Paso 3: Configurar Opciones del Navegador

Para un mayor control, personaliza la configuración del servidor MCP:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Opciones disponibles:

--browser: Elige chromium, firefox o webkit
--headless: Ejecutar sin ventana de navegador visible
--port: Especificar puerto personalizado (por defecto: asignado automáticamente)
--host: Enlazar a un host específico (por defecto: localhost)

Paso 4: Ejecutar en CI/CD

Para pipelines automatizados, usa el modo headless:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser", "chromium"
      ]
    }
  }
}

Alternativa: Puppeteer MCP

Si prefieres Puppeteer o tienes flujos de trabajo existentes basados en Puppeteer, puedes usar servidores MCP mantenidos por la comunidad.

Instalación

Usa el servidor Puppeteer MCP de la comunidad:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"]
    }
  }
}

Alternativa: puppeteer-mcp-claude

Otra opción comunitaria con automatización integral del navegador:

# Clone the repository
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

Configura en .claude/settings.json:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/puppeteer-mcp-claude/index.js"]
    }
  }
}

Diferencias Clave con Playwright

Aspecto	Playwright MCP	Puppeteer MCP
Configuración	npx (sin instalación)	Podría requerir npm install
Navegadores	Múltiples	Chrome/Chromium
Estrategia de Selector	Árbol de accesibilidad	CSS/XPath
Mantenimiento	Microsoft	Comunidad

Comandos Básicos de Automatización del Navegador

Una vez que tu servidor MCP esté configurado, puedes controlar los navegadores usando lenguaje natural.

Navegación

Navigate to https://github.com

Go to the login page on github.com

Open https://docs.example.com/api in a new tab

Interactuando con Elementos

Click the "Sign In" button

Type "my-username" in the email field

Select "United States" from the country dropdown

Check the "Remember me" checkbox

Leyendo Contenido de la Página

Get the text content of the main heading

List all links on the current page

Extract the product prices from this page

Tomando Capturas de Pantalla

Take a screenshot of the current page

Capture a screenshot of just the navigation menu

Esperas y Tiempos

Wait for the loading spinner to disappear

Wait 3 seconds then click the submit button

Wait until the "Success" message appears

Manejo de Formularios

Fill out the contact form:
- Name: John Doe
- Email: john@example.com
- Message: Testing automation
Then submit the form

Interacciones Complejas

Scroll down to the footer and click the "Privacy Policy" link

Hover over the "Products" menu and click "Enterprise"

Drag the slider to the 75% position

Patrones de Automatización Avanzados

Patrón 1: Flujos de Trabajo Multi-Paso

Crea secuencias de automatización complejas:

Automate the following checkout flow:
1. Navigate to https://shop.example.com
2. Search for "wireless headphones"
3. Click on the first product result
4. Select size "Medium" if available
5. Click "Add to Cart"
6. Go to cart and verify the item is there
7. Take a screenshot of the cart

Patrón 2: Extracción de Datos

Extrae datos estructurados de páginas web:

Go to https://news.ycombinator.com and extract the top 10 stories with:
- Title
- URL
- Points
- Number of comments
- Posted time ago

Format as JSON

Patrón 3: Flujos de Autenticación

Maneja secuencias de inicio de sesión:

Log into the application:
1. Navigate to https://app.example.com/login
2. Enter username: test@example.com
3. Enter password from environment variable LOGIN_PASSWORD
4. Click Sign In
5. Wait for dashboard to load
6. Verify login succeeded by checking for "Welcome" text

Patrón 4: Pruebas de Regresión Visual

Compara estados de páginas:

1. Navigate to https://staging.example.com
2. Take a full-page screenshot named "staging-homepage"
3. Navigate to https://production.example.com
4. Take a full-page screenshot named "production-homepage"
5. Compare the two screenshots and report any differences

Patrón 5: Monitoreo y Alertas

Crea flujos de trabajo de monitoreo:

Check if the service is healthy:
1. Navigate to https://status.example.com
2. Look for "All Systems Operational" text
3. If not found, extract the current status message
4. Take a screenshot for documentation
5. Report the findings

Patrón 6: Pruebas E2E con Validación de API

Combina pruebas de navegador y API:

Test the user registration flow:
1. Navigate to https://app.example.com/register
2. Fill in registration form with test data
3. Submit the form
4. Wait for confirmation page
5. Verify the user was created by checking the API response
6. Take a screenshot of the success page

Al probar flujos que involucran APIs, usa Apidog para validar las respuestas del backend. Puedes verificar que tus acciones en el navegador activen las llamadas a la API correctas y reciban las respuestas esperadas.

Casos de Uso en el Mundo Real

Caso de Uso 1: Capturas de Pantalla Automatizadas para Revisión de Código

Captura documentación visual para revisiones de código:

For the PR review, capture screenshots of:
1. The login page before changes
2. The login page after changes
3. The error state when invalid credentials are entered
4. The success redirect after valid login

Save all screenshots to ./review-screenshots/

Caso de Uso 2: Análisis Competitivo

Monitorea sitios web de la competencia:

Analyze competitor pricing:
1. Navigate to https://competitor.com/pricing
2. Extract all plan names and prices
3. Take a screenshot of the pricing page
4. Compare with our current pricing data
5. Generate a summary report

Caso de Uso 3: Pruebas de Formulario Automatizadas

Prueba la validación de formularios en diferentes escenarios:

Test the contact form validation:

Test 1: Empty submission
- Submit empty form
- Verify all required field errors appear
- Screenshot: empty-form-errors.png

Test 2: Invalid email
- Enter "John" in name
- Enter "invalid-email" in email
- Submit
- Verify email validation error
- Screenshot: invalid-email-error.png

Test 3: Valid submission
- Fill all fields correctly
- Submit
- Verify success message
- Screenshot: form-success.png

Caso de Uso 4: Auditoría SEO

Automatiza las comprobaciones SEO:

Perform SEO audit on https://mysite.com:
1. Check page title length (should be 50-60 characters)
2. Check meta description exists and length
3. Verify H1 tag exists and is unique
4. Check all images have alt text
5. Verify canonical URL is set
6. Check for broken links on the page
7. Generate audit report

Caso de Uso 5: Pruebas de Accesibilidad

Automatiza las comprobaciones de accesibilidad:

Run accessibility audit on https://app.example.com:
1. Navigate to the homepage
2. Check color contrast ratios
3. Verify all interactive elements are keyboard accessible
4. Check ARIA labels are present
5. Verify focus indicators are visible
6. Test with screen reader simulation
7. Generate accessibility report

Caso de Uso 6: Monitoreo de Rendimiento

Rastrea el rendimiento de la página:

Monitor page load performance:
1. Clear browser cache
2. Navigate to https://app.example.com
3. Record time to first contentful paint
4. Record time to interactive
5. Capture network waterfall
6. Take screenshot when fully loaded
7. Compare with baseline metrics

Integración con Pipelines de CI/CD

Integración con GitHub Actions

Añade automatización del navegador a tu pipeline de CI:

# .github/workflows/e2e-tests.yml
name: E2E Browser Tests

on:
  pull_request:
    branches: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      - name: Install Claude Code
        run: npm install -g @anthropic-ai/claude-code

      - name: Run Browser Tests
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            Run the following browser tests:
            1. Navigate to ${{ env.STAGING_URL }}
            2. Test login flow with test credentials
            3. Verify dashboard loads correctly
            4. Take screenshots of each step
            5. Report any failures
          "

      - name: Upload Screenshots
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: screenshots/

Creando una Habilidad de Prueba de Navegador

Crea una habilidad reutilizable para pruebas de navegador:

---
name: browser-test-runner
version: "1.0.0"
description: Runs browser-based E2E tests using Playwright MCP
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# Browser Test Runner

Automated browser testing skill using Playwright MCP.

## Usage

```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full

API de Uso de Computadora de Claude

Para escenarios que requieren un control completo del escritorio, la API de Uso de Computadora de Claude proporciona capacidades de automatización integrales.

Resumen

El Uso de Computadora es una característica beta que permite a Claude:

Tomar capturas de pantalla de la pantalla
Mover y hacer clic con el ratón
Escribir texto
Desplazarse y navegar

Configuración Básica

import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20250124",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1
        }
    ],
    messages=[
        {
            "role": "user",
            "content": "Open Chrome and navigate to github.com"
        }
    ],
    betas=["computer-use-2025-01-24"]
)

Cuándo Usar la API de Uso de Computadora vs MCP

Escenario	Enfoque Recomendado
Web scraping	Playwright MCP
Pruebas E2E	Playwright MCP
Automatización de aplicaciones de escritorio	API de Uso de Computadora
Flujos de trabajo entre aplicaciones	API de Uso de Computadora
Pipelines de CI/CD	Playwright MCP (headless)
Pruebas visuales	Cualquiera de los dos

Mejores Prácticas para el Uso de Computadora

Siempre verifica las acciones antes de hacer clic
Usa coordenadas específicas cuando sea posible
Añade retrasos entre acciones rápidas
Implementa recuperación de errores para clics perdidos
Limita el alcance a los permisos necesarios

Consideraciones de Seguridad

Manejo de Autenticación

Haz:

Usa variables de entorno para las credenciales
Limpia las credenciales después de las pruebas
Usa cuentas de prueba, no credenciales de producción

No hagas:

Codificar contraseñas directamente en los comandos
Almacenar credenciales en capturas de pantalla
Compartir archivos de estado de autenticación

# Use environment variables
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="secure-test-password"

Log in using credentials from environment variables
TEST_USERNAME and TEST_PASSWORD

Privacidad de Datos

Haz:

Enmascara datos sensibles en las capturas de pantalla
Limpia los datos del navegador después de las pruebas
Usa entornos de staging/prueba

No hagas:

Capturar pantallas de páginas con datos reales de usuarios
Almacenar información personal
Ejecutar contra producción con datos reales

Seguridad de la Red

Haz:

Limita el acceso a la red del navegador
Usa listas blancas para dominios permitidos
Monitorea las solicitudes de red

No hagas:

Permitir acceso ilimitado a internet
Ignorar errores de certificado SSL en producción
Descargar contenido no confiable

Seguridad del Servidor MCP

Ejecuta localmente cuando sea posible
Audita el código del servidor MCP antes de usarlo
Limita los permisos de la herramienta al mínimo requerido
Monitorea los registros del servidor MCP en busca de anomalías

Conclusión

La automatización de navegadores con Claude Code transforma la forma en que los desarrolladores abordan las pruebas web, el scraping y la automatización. Al combinar instrucciones en lenguaje natural con potentes servidores MCP como Playwright, puedes construir flujos de trabajo de automatización sofisticados sin escribir scripts complejos.

Para pruebas integrales, combina la automatización de navegadores de Claude Code con la validación de API. Descarga Apidog gratis para construir flujos de trabajo de pruebas completos que cubran tanto tu frontend como tu backend.

botón