Playwright

Setup a browser session with Playwright.

1

Install Playwright and Hyperbrowser

Node

npm install playwright-core @hyperbrowser/sdk dotenv

or

yarn add playwright-core @hyperbrowser/sdk dotenv

Python

pip install playwright hyperbrowser python-dotenv

or

uv add playwright hyperbrowser python-dotenv

2

Setup your Environment

To use Hyperbrowser with your code, you will need an API Key. You can get one easily from the dashboard. Once you have your API Key, add it to your .env file as HYPERBROWSER_API_KEY .

3

Setup Browser Session

Next, you can easily startup a browser session using Playwright and your Hyperbrowser API Key.

Node

import { chromium } from "playwright-core";
import { Hyperbrowser } from "@hyperbrowser/sdk";
import { config } from "dotenv";

config();

const client = new Hyperbrowser({
  apiKey: process.env.HYPERBROWSER_API_KEY,
});

const main = async () => {
  const session = await client.sessions.create();

  try {
    const browser = await chromium.connectOverCDP(session.wsEndpoint);

    const defaultContext = browser.contexts()[0];
    const page = await defaultContext.newPage();

    // Navigate to a website
    console.log("Navigating to Hacker News...");
    await page.goto("https://news.ycombinator.com/");
    const pageTitle = await page.title();
    console.log("Page 1:", pageTitle);
    await page.evaluate(() => {
      console.log("Page 1:", document.title);
    });

    await page.goto("https://example.com");
    console.log("Page 2:", await page.title());
    await page.evaluate(() => {
      console.log("Page 2:", document.title);
    });

    await page.goto("https://apple.com");
    console.log("Page 3:", await page.title());
    await page.evaluate(() => {
      console.log("Page 3:", document.title);
    });

    await page.goto("https://google.com");
    console.log("Page 4:", await page.title());
    await page.evaluate(() => {
      console.log("Page 4:", document.title);
    });
  } catch (err) {
    console.error(`Encountered error: ${err}`);
  } finally {
    await client.sessions.stop(session.id);
  }
};

main();

Python

import os
from playwright.sync_api import sync_playwright
from dotenv import load_dotenv
from hyperbrowser import Hyperbrowser

# Load environment variables from .env file
load_dotenv()

client = Hyperbrowser(api_key=os.getenv("HYPERBROWSER_API_KEY"))


def main():
    session = client.sessions.create()

    try:
        with sync_playwright() as p:
            browser = p.chromium.connect_over_cdp(session.ws_endpoint)

            default_context = browser.contexts[0]
            page = default_context.new_page()

            print("Navigating to Hacker News...")
            page.goto("https://news.ycombinator.com/")
            page_title = page.title()
            print("Page 1:", page_title)
            page.evaluate("() => { console.log('Page 1:', document.title); }")

            page.goto("https://example.com")
            print("Page 2:", page.title())
            page.evaluate("() => { console.log('Page 2:', document.title); }")

            page.goto("https://apple.com")
            print("Page 3:", page.title())
            page.evaluate("() => { console.log('Page 3:', document.title); }")

            page.goto("https://google.com")
            print("Page 4:", page.title())
            page.evaluate("() => { console.log('Page 4:', document.title); }")

    except Exception as e:
        print(f"Error: {e}")
    finally:
        client.sessions.stop(session.id)


if __name__ == "__main__":
    main()

4

View Session in Dashboard

You can view all your sessions in the dashboard and see their recordings or other key metrics like logs.

To see how browser sessions work, check out the Sessions Overview.