Puppeteer

Setup a browser session with Puppeteer.

1

Install Puppeteer and Hyperbrowser

Node

npm install puppeteer-core @hyperbrowser/sdk

or

yarn add puppeteer-core @hyperbrowser/sdk

Python

pip install pyppeteer 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 puppeteer and your Hyperbrowser API Key.

Node

import { connect } from "puppeteer-core";
import { config } from "dotenv";

config();

const main = async () => {
  const browser = await connect({
    browserWSEndpoint: `wss://connect.hyperbrowser.ai?apiKey=${process.env.HYPERBROWSER_API_KEY}`,
  });

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

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

main();

Python

import asyncio
from pyppeteer import connect
import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

async def main():
    # Connect to the browser using the API key from environment variables
    browser = await connect(
        browserWSEndpoint=f"wss://connect.hyperbrowser.ai?apiKey={os.getenv('HYPERBROWSER_API_KEY')}"
    )

    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 title:", page_title)
    await page.evaluate("() => { console.log('Page 1:', document.title); }")

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

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

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

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

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