example.ts

/**
 * Example script that connects to a remote headless browser via CDP
 * 
 * Usage:
 *   BROWSER_URL=$(./spawn-headless-browser.sh) bun example.ts
 *   
 * Or with an existing browser:
 *   BROWSER_URL=wss://vm-id.vm.vers.sh/devtools/browser/xxx bun example.ts
 */

import puppeteer from 'puppeteer-core';

const BROWSER_URL = process.env.BROWSER_URL;

if (!BROWSER_URL) {
  console.error('Error: BROWSER_URL environment variable is required');
  console.error('Usage: BROWSER_URL=$(./spawn-headless-browser.sh) bun example.ts');
  process.exit(1);
}

console.log('Connecting to browser:', BROWSER_URL);

const browser = await puppeteer.connect({
  browserWSEndpoint: BROWSER_URL,
});

console.log('Connected! Browser version:', await browser.version());

// Create a new page
const page = await browser.newPage();

// Navigate to a website
console.log('Navigating to example.com...');
await page.goto('https://example.com');

// Get the page title
const title = await page.title();
console.log('Page title:', title);

// Take a screenshot
const screenshot = await page.screenshot({ encoding: 'base64' });
console.log('Screenshot taken (base64 length):', screenshot.length);

// Get page content
const content = await page.content();
console.log('Page HTML length:', content.length);

// Example: Extract text from the page
const heading = await page.$eval('h1', el => el.textContent);
console.log('H1 heading:', heading);

// Close the page (but not the browser - it's shared)
await page.close();

// Disconnect (don't close - the browser is running remotely)
browser.disconnect();

console.log('Done!');