Puppeteer

Setup a browser session with Puppeteer.

1

Install Puppeteer and Hyperbrowser

Node

npm install puppeteer-core @hyperbrowser/sdk dotenv

or

yarn add puppeteer-core @hyperbrowser/sdk dotenv

Python

pip install pyppeteer hyperbrowser python-dotenv

or

uv add pyppeteer 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 Puppeteer and your Hyperbrowser API Key.

Node

import { connect } from "puppeteer-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 connect({
      browserWSEndpoint: session.wsEndpoint,
      defaultViewport: null,
    });

    const [page] = await browser.pages();

    // 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 asyncio
from pyppeteer import connect
import os
from dotenv import load_dotenv
from hyperbrowser import AsyncHyperbrowser

# Load environment variables from .env file
load_dotenv()

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


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

    try:
        browser = await connect(
            browserWSEndpoint=session.ws_endpoint, defaultViewport=None
        )

        pages = await browser.pages()
        page = pages[0]

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

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

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

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

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


# Run the async main function
if __name__ == "__main__":
    asyncio.run(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.