Using Browserless

You can use a service that provides a headless browser, such as Browserless, to run your Bytebot queries. This is useful to avoid running Chrome on your production hardware, and to avoid the overhead of managing a headless browser yourself.

Sign up to Browserless and obtain an API key

To start, you’ll need an API key from Browserless. You can sign up for an account at Browserless.

Once you have obtained an API key, it’s good practice to expose to your code via an environment variable. This avoids hardcoding the API key in your code, which could lead to security issues. In the example below, we assume you have set the environment variable BROWSERLESS_API_KEY to your Browserless API key.

Use the Bytebot client with Browserless

Modifying your Puppeteer code to use Browserless is simple, as shown in the example below, but for more information please refer to the Browserless documentation.

You’ll need to replace the puppeteer.launch() call with a call to puppeteer.connect() with the Browserless URL and API key.

1
// Replace this line
2
browser = await puppeteer.launch();
3
4
// With this line (replacing BROWSERLESS_API_KEY with your actual API key)
5
puppeteer.connect({
6
  browserWSEndpoint:
7
    "wss://chrome.browserless.io?token=" + process.env.BROWSERLESS_API_KEY,
8
});

As suggested in the Browserless documentation, you may want to launch the browser locally during development and testing, and only use Browserless in production. This can be achieved by using an environment variable (in this example called IS_PRODUCTION) to determine whether to use Browserless or not.

1
// From the Browserless documentation
2
const getBrowser = () =>
3
  process.env.IS_PRODUCTION
4
    ? // Connect to browserless so we don't run Chrome on the same hardware in production
5
      puppeteer.connect({
6
        browserWSEndpoint: "wss://chrome.browserless.io?token=" + process.env.BROWSERLESS_API_KEY,
7
      })
8
    : // Run the browser locally while in development
9
      puppeteer.launch();

Full Browserless example

The following is a full example of using Browserless with Bytebot to execute an action. It’s assumed that:

• You have correctly installed the @bytebot/sdk package and puppeteer
• You have obtained a Browserless API key and set it as an environment variable
• You have obtained a Bytebot API key and set it as an environment variable
• You have created an environment variable IS_PRODUCTION to determine whether to use Browserless or not

1
// Import the BytebotClient and puppeteer
2
import { BytebotClient } from "@bytebot/sdk";
3
import puppeteer from "puppeteer";
4
5
// Launch the browser using Browserless in production, or locally in development
6
const getBrowser = () =>
7
  process.env.IS_PRODUCTION
8
    ? puppeteer.connect({
9
        browserWSEndpoint:
10
          "wss://chrome.browserless.io?token=" +
11
          process.env.BROWSERLESS_API_KEY,
12
      })
13
    : puppeteer.launch();
14
15
// Use Puppeteer to navigate to a page
16
const page = await browser.newPage();
17
await page.goto("https://developer.chrome.com/");
18
19
// Use Bytebot to extract the link from the 'Sign in' button
20
const bytebot = new BytebotClient({
21
  apiKey: process.env.BYTEBOT_API_KEY,
22
});
23
const actions = await bytebot.prompt(
24
  "Extract the link from the 'Sign in' button",
25
  page
26
);
27
28
// Log the results
29
actions.forEach((action) => {
30
  console.log(action.result);
31
});
32
33
// Close the browser
34
await browser.close();