Connecting Playwright

We support all Playwright protocols, and, just like with Puppeteer, you can easily switch to Browserless. The standard connect method uses playwright's built-in browser-server to handle the connection. This, generally, is a faster and more fully-featured method since it supports most of the playwright parameters (such as using a proxy and more).

Javascript

import playwright from "playwright";

// Connecting to Firefox locally
const browser = await playwright.firefox.launch();

// Connecting to Firefox via Browserless and using a proxy
const browser = await playwright.firefox.connect(`wss://production-sfo.browserless.io/firefox/playwright?token=${TOKEN}&proxy=residential`);

Python

from playwright.sync_api import sync_playwright

# Connecting to Firefox locally
with sync_playwright() as p:
    browser = p.firefox.launch()

# Connecting to Firefox via Browserless with a proxy
with sync_playwright() as p:
    browser = p.firefox.connect_over_cdp(f"wss://production-sfo.browserless.io/firefox/playwright?token={TOKEN}&proxy=residential")

Java

package org.example;

import com.microsoft.playwright.*;
import java.nio.file.Paths;

public class Main {
  public static void main(String[] args) {
    // Connecting to Firefox locally
    Browser browserLocal = playwright.firefox().launch();

    // Connecting to Firefox via Browserless and using a proxy
    String wsEndpoint = String.format(
      "wss://production-sfo.browserless.io/firefox/playwright?token=%s&proxy=residential",
      TOKEN
    );
    BrowserType.ConnectOptions connectOptions = new BrowserType.ConnectOptions();
    connectOptions.setWsEndpoint(wsEndpoint);
  }
}

C#

using System;
using System.Threading.Tasks;
using Microsoft.Playwright;

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

            // Connecting to Firefox via Browserless and using a proxy
            using var playwright = await Playwright.CreateAsync();
            string wsEndpoint = $"wss://production-sfo.browserless.io/firefox/playwright?token={TOKEN}&proxy=residential";
            var browserRemote = await playwright.Firefox.ConnectAsync(wsEndpoint);
        }
    }
}

More Playwright Details

Playwright is a cross-browser library written by Microsoft to aide in cross-browser testing and development.

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

Using the Playwright Protocol

The standard connect method uses Playwright's built-in browser-server protocol to handle the connection. This, generally, is a faster and more fully-featured method since it supports most of the Playwright parameters (such as using a proxy and more). However, since this requires the usage of Playwright in our servers, your client's Playwright version should match ours.

Take a screenshot in Playwright with Firefox

import playwright from "playwright-core";

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

await page.goto("https://www.whatsmybrowser.org/", { waitUntil: "domcontentloaded" });
await page.screenshot({
  path: `firefox.png`,
});

await browser.close();

Similarly, if you need to use another browser, just make sure the Playwright Browser object matches the endpoint.

Using the Chrome DevTools Protocol

The connectOverCDP method allows Playwright to connect through Chrome's DevTools Protocol. While this is more functionally similar to how puppeteer operates, it does come with a slight performance hit since sessions are more "chatty" over the network versus Playwright's connect. Furthermore, you can only use the Chrome for these connections.

Take a screenshot in Playwright

import playwright from "playwright";

const browser = await playwright.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: "cdp.png" });

await browser.close();

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. This is different from how proxies are handled in Puppeteer, as Playwright allows you to specify proxy settings directly at the context level:

import playwright from "playwright-core";

const browser = await playwright.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.