# Ejemplos de automatización (CDP)

Una vez que su agente haya iniciado un perfil MoreLogin a través de Skill, recibe un `debugPort`. Este puerto se puede utilizar para conectarse directamente a la instancia del navegador mediante **CDP (Protocolo Chrome DevTools)**, evitando la necesidad de WebDriver.

Puede indicarle a su agente Hermes u OpenClaw que escriba y ejecute scripts utilizando los siguientes patrones.

## 1. Conexión con Puppeteer

```javascript
// Get debugPort from:
// openclaw morelogin browser status --env-id <envId>
const puppeteer = require('puppeteer-core');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:9222', // replace 9222 with actual debugPort
    defaultViewport: null
  });

  const pages = await browser.pages();
  const page = pages[0];
  await page.goto('https://example.com');
  
  // Scrape data or perform actions
  const title = await page.title();
  console.log('Title:', title);
  
  // NOTE: Do not call browser.close() unless you want to destroy the MoreLogin process
  await browser.disconnect();
}
main();
```

## 2. Rellenar y enviar formulario

```javascript
const puppeteer = require('puppeteer-core');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:<debugPort>'
  });
  
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  
  // Fill form
  await page.type('#username', 'myuser');
  await page.type('#password', 'mypassword');
  
  // Click submit
  await page.click('button[type="submit"]');
  
  // Wait for navigation
  await page.waitForNavigation();
  
  // Verify login
  const isLoggedIn = await page.$('.user-profile');
  console.log('Login successful:', !!isLoggedIn);
  
  await browser.disconnect();
}
main();
```

## 3. Extracción de datos

```javascript
const puppeteer = require('puppeteer-core');
const fs = require('fs');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:<debugPort>'
  });
  
  const page = await browser.newPage();
  await page.goto('https://example.com/products');
  
  // Scrape data
  const products = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.product')).map(el => ({
      name: el.querySelector('.name')?.textContent,
      price: el.querySelector('.price')?.textContent,
      url: el.querySelector('a')?.href
    }));
  });
  
  // Save to file
  fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
  console.log(`Scraped ${products.length} products`);
  
  await browser.disconnect();
}
main();
```

## 4. Operaciones con varias pestañas

```javascript
const puppeteer = require('puppeteer-core');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:<debugPort>'
  });
  
  // Open multiple tabs
  const page1 = await browser.newPage();
  const page2 = await browser.newPage();
  
  await page1.goto('https://example.com');
  await page2.goto('https://github.com');
  
  // Parallel operations
  await Promise.all([
    page1.screenshot({ path: 'page1.png' }),
    page2.screenshot({ path: 'page2.png' })
  ]);
  
  console.log('Screenshots completed');
  
  await browser.disconnect();
}
main();
```

## Solución de problemas

- **Error: `connect ECONNREFUSED`**: asegúrese de que el perfil se esté ejecutando y que `debugPort` sea correcto. Puede verificar los puertos usando `lsof -i :<port>`.
- **El navegador falla al conectarse**: use `puppeteer-core` en lugar de `puppeteer` y asegúrese de llamar a `browser.disconnect()` en lugar de `browser.close()` cuando finalice el script.