Playwright

Setup a browser session with Playwright.

1

Install Playwright and Hyperbrowser

Node

npm install playwright-core @hyperbrowser/sdk

or

yarn add playwright-core @hyperbrowser/sdk

Python

pip install playwright hyperbrowser

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 { config } from "dotenv";

config();

const main = async () => {
  // Connect to browser using Playwright
  const browser = await chromium.connectOverCDP(
    `wss://connect.hyperbrowser.ai?apiKey=${process.env.HYPERBROWSER_API_KEY}`
  );

  // Create a new context and page
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  // 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);
  });

  // Clean up
  await page.close();
  await defaultContext.close();
  await browser.close();
};

main();

Python

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

# Load environment variables from .env file
load_dotenv()

def main():
    with sync_playwright() as p:
        # Connect to browser using Playwright
        browser = p.chromium.connect_over_cdp(
            f"wss://connect.hyperbrowser.ai?apiKey={os.getenv('HYPERBROWSER_API_KEY')}"
        )

        # Get the default context and page
        default_context = browser.contexts[0]
        page = default_context.pages[0]

        # Navigate to various websites
        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); }")

        # Clean up
        page.close()
        default_context.close()
        browser.close()

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.