Connecting Playwright

We support Playwright's Chrome DevTools Protocol (CDP) connection method, which provides a reliable way to connect to Browserless. This method is similar to how Puppeteer operates and is well-suited for most automation tasks. Playwright's Connect method is also supported, but more restrictive.

Javascript

import { chromium } from "playwright-core";

// Connecting to Chrome locally
const browser = await chromium.launch();

// Connecting to Chrome via Browserless
const browser = await chromium.connectOverCDP(
  `wss://production-sfo.browserless.io?token=${TOKEN}`
);

Python

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Connecting to Chrome locally
    browser = p.chromium.launch()

    # Connecting to Chrome via Browserless
    browser = p.chromium.connect_over_cdp(
        f"wss://production-sfo.browserless.io?token={TOKEN}"
    )

Java

package org.example;

import com.microsoft.playwright.*;

public class Main {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      // Connecting to Chrome locally
      Browser browserLocal = playwright.chromium().launch();

      // Connecting to Chrome via Browserless
      Browser browser = playwright.chromium().connectOverCDP(
        String.format("wss://production-sfo.browserless.io?token=%s", TOKEN)
      );
    }
  }
}

C#

using Microsoft.Playwright;

namespace PlaywrightExample
{
    class Program
    {
        public static async Task Main(string[] args)
        {
            using var playwright = await Playwright.CreateAsync();
            // Connecting to Chrome locally
            var browserLocal = await playwright.Chromium.LaunchAsync();

            // Connecting to Chrome via Browserless
            var browser = await playwright.Chromium.ConnectOverCDPAsync(
                $"wss://production-sfo.browserless.io?token={TOKEN}"
            );
        }
    }
}

Basic Usage

In order to use the Browserless service, simply change the following:

Before browserless

import { chromium } from "playwright";

const browser = await chromium.launch();
const page = await browser.newPage();
// ...

After browserless

import { chromium } from "playwright-core";

const browser = await chromium.connectOverCDP(
  `wss://production-sfo.browserless.io?token=YOUR_API_TOKEN_HERE`
);
const page = await browser.newPage();
// ...

Using the Chrome DevTools Protocol

The connectOverCDP method allows Playwright to connect through Chrome's DevTools Protocol. This is the recommended method for connecting to Browserless as it provides a stable and reliable connection.

Take a screenshot with Playwright

import { chromium } from "playwright-core";

const browser = await chromium.connectOverCDP(
  "wss://production-sfo.browserless.io?token=YOUR_API_TOKEN_HERE"
);
const context = await browser.newContext();
const page = await context.newPage();

await page.goto("https://www.example.com/");
await page.screenshot({ path: "screenshot.png" });

await browser.close();

Using Playwright's Connect Method

Playwright's Connect method uses its built-in browser-server protocol. While this method can be faster in some cases, it has some limitations:

• Your client's Playwright version must match the server's version
• Limited support for Browserless advanced features such as the stealth flag, in-built proxies, and more.

Here's how to use the Connect method:

import { chromium } from "playwright-core";

const browser = await chromium.connect(
  `wss://production-sfo.browserless.io/chrome/playwright?token=${TOKEN}`
);

Warning: To avoid errors with no apparent reason, please make sure your playwright version is compatible with one of these versions.

Using Other Browsers

While Chrome is recommended for most use cases, Browserless also supports Firefox and WebKit through Playwright's Connect method:

Firefox Example

import { firefox } from "playwright-core";

const browser = await firefox.connect(
  `wss://production-sfo.browserless.io/firefox/playwright?token=${TOKEN}`
);
const context = await browser.newContext();
const page = await context.newPage();

await page.goto("https://www.example.com/");
await page.screenshot({ path: "firefox-screenshot.png" });

await browser.close();

WebKit Example

import { webkit } from "playwright-core";

const browser = await webkit.connect(
  `wss://production-sfo.browserless.io/webkit/playwright?token=${TOKEN}`
);
const context = await browser.newContext();
const page = await context.newPage();

await page.goto("https://www.example.com/");
await page.screenshot({ path: "webkit-screenshot.png" });

await browser.close();

Note: When using Firefox or WebKit, you must use the Connect method as CDP is only supported by Chrome-based browsers.

Using 3rd Party Proxies with Playwright

When using Playwright with browserless, you can set up a 3rd party proxy by providing proxy configuration to the newContext() method:

import { chromium } from "playwright-core";

const browser = await chromium.connectOverCDP(
  "wss://production-sfo.browserless.io?token=YOUR_API_TOKEN_HERE"
);
const context = await browser.newContext({
  proxy: {
    server: "http://domain:port",
    username: "username",
    password: "password",
  },
});
const page = await context.newPage();

await page.goto("https://icanhazip.com/");
console.log(await page.content());

await browser.close();

This approach applies the proxy configuration at the context level, which means all pages created from that context will use the specified proxy. For more detailed information about using proxies with Playwright, see our Proxies documentation.