n8n-nodes-playwright-chromium-cdp

This is an n8n community node for browser automation using Playwright with a remote browser via CDP (Chrome DevTools Protocol).

Unlike other browser automation nodes, this one does not install or launch browsers locally. Instead, it connects to an already running browser instance via CDP endpoint.

Credits

This project is based on n8n-nodes-puppeteer by Nicholas Penree. The original Puppeteer implementation has been replaced with Playwright, focusing on remote browser connection via CDP.

Features

• Remote Browser Connection: Connect to any browser that exposes a CDP endpoint
• No Local Browser Installation: Perfect for containerized environments
• Full Playwright API Access: Use the powerful Playwright API for automation
• Device Emulation: Emulate various devices (mobile, tablet, desktop)
• Screenshot & PDF Generation: Capture pages as images or PDFs
• Custom Scripts: Run custom JavaScript code with full Playwright access

Installation

Follow the installation guide in the n8n community nodes documentation.

npm install n8n-nodes-playwright-chromium-cdp

Prerequisites

You need a running browser with CDP enabled. Here are some options:

Option 1: Run Chrome/Chromium with CDP

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Option 2: Use Docker

docker run -d -p 9222:9222 zenika/alpine-chrome --no-sandbox --remote-debugging-address=0.0.0.0 --remote-debugging-port=9222

Option 3: Use browserless.io or similar services

Many services provide remote browsers with CDP access.

Credentials

Create credentials with the CDP endpoint URL:

• CDP Endpoint URL: The URL to connect to (e.g., http://localhost:9222)
• Timeout: Connection timeout in milliseconds

Operations

Get Page Content

Retrieves the full HTML content of a page.

Get Screenshot

Captures a screenshot of the page (PNG or JPEG).

Get PDF

Generates a PDF from the page (Chromium-based browsers only).

Run Custom Script

Execute custom JavaScript code with access to Playwright objects:

// Available variables:
// $browser - Browser instance (connected via playwright.chromium.connectOverCDP())
// $context - Browser context
// $page - Page instance  
// $playwright - Playwright module with { chromium, devices }

// Navigate and extract data
await $page.goto('https://example.com');

const title = await $page.title();
const content = await $page.textContent('body');

// Return data (must be an array)
return [{ title, content, ...$json }];

Options

• Batch Size: Process multiple items in parallel
• Emulate Device: Emulate specific devices (iPhone, Pixel, etc.)
• Viewport: Set custom viewport dimensions
• User Agent: Custom user agent string
• Locale/Timezone: Set browser locale and timezone
• Geolocation: Set fake geolocation
• Extra Headers: Add custom HTTP headers
• Wait Until: Navigation wait strategy (load, domcontentloaded, networkidle, commit)
• Timeout: Navigation timeout
• Ignore HTTPS Errors: Bypass SSL certificate errors
• JavaScript Enabled: Toggle JavaScript execution
• Bypass CSP: Bypass Content Security Policy

Example: Storing and Reusing Cookies

Node 1: Login and save cookies

await $page.goto('https://example.com/login');

await $page.fill('#username', 'user');
await $page.fill('#password', 'pass');
await $page.click('#login-button');

// Wait for navigation
await $page.waitForLoadState('networkidle');

// Get cookies from context
const cookies = await $context.cookies();

return [{ cookies }];

Node 2: Use saved cookies

const { cookies } = $input.first().json;

// Set cookies
await $context.addCookies(cookies);

// Navigate to authenticated page
await $page.goto('https://example.com/dashboard');

const data = await $page.textContent('.dashboard-content');

return [{ data }];

Example: Taking Screenshots

await $page.goto('https://example.com');

// Wait for content to load
await $page.waitForSelector('.main-content');

// Take screenshot as base64
const screenshot = await $page.screenshot({ 
  type: 'png',
  fullPage: true 
});

return [{
  binary: {
    screenshot: {
      data: screenshot.toString('base64'),
      mimeType: 'image/png',
      fileName: 'screenshot.png',
    },
  },
}];

Development

# Install dependencies
npm install

# Build the node
npm run build

# Watch for changes
npm run dev

License

MIT License - see LICENSE.md

Based on n8n-nodes-puppeteer by Nicholas Penree.