Initialize Puppeteer or Playwright

What is Puppeteer and Playright?

Puppeteer and Playwright are frameworks for launching applications in a test, local browser. In fact, Bytebot leverages Puppeteer under-the-hood even for its managed virtual Browsers. In this guide, we’ll use Bytebot with a local browser, with support for both Puppeteer and Playwright.

Install Additional Dependencies

First, we need to install a local browser (either Puppeteer or Playwright) to run Bytebot locally. If you want to use a remote Bytebot-managed browser instead, click here.

Option 1: Puppeteer

Bytebot works with Puppeteer version 21.9.0 or greater. Install Puppeteer or alter your existing Puppeteer package with the following command:

$
npm install [email protected] 

Option 2: Install Playwright

Bytebot works with Playwright version 1.44.0 or greater. Install Playwright or alter your existing Playwright package with the following command:

$
npm install playwright

Initialize Bytebot and the local browser

With Puppeteer or Playwright installed, you will now need to import the Bytebot SDK and your local testing framework. If you haven’t installed Bytebot SDK yet, please refer to our installation guide.

1
import { BytebotClient } from '@bytebot/sdk';
2
import puppeteer from "puppeteer";

Then, you will need to kick off a local browser instance and page using the .launch() and .newPage() functions. Once these are spun up, you will need to navigate to any public URL using the page’s .goto(url: string, options: Object) with the waitUntil parameter set to "networkidle0" (Puppeteer) or "networkidle" (Playwright). This prevents Bytebot from running on a half-loaded page.

1
import { BytebotClient } from '@bytebot/sdk';
2
import puppeteer from "puppeteer";
3
4
const browser = await puppeteer.launch();
5
const page = await browser.newPage();
6
await page.goto("https://developer.chrome.com/", {
7
  waitUntil: "networkidle0",
8
});

Next, we will use the BytebotClient , which includes all the necessary functions for starting a browser session and creating any browser actions. Its constructor requires an API key to be successfully initialized.

1
import { BytebotClient } from '@bytebot/sdk';
2
import puppeteer from "puppeteer";
3
4
const browser = await puppeteer.launch();
5
const page = await browser.newPage();
6
await page.goto("https://developer.chrome.com/", {
7
  waitUntil: "networkidle0",
8
});*
9
10
const bytebot = new BytebotClient({
11
  apiKey: process.env.BYTEBOT_API_KEY,
12
});

If you are using a .env file, you may need to install dotenv and import it.

1
import { BytebotClient } from '@bytebot/sdk';
2
import puppeteer from "puppeteer";
3
import "dotenv/config";
4
5
async function run() {
6
  const browser = await puppeteer.launch();
7
  const page = await browser.newPage();
8
  await page.goto("https://developer.chrome.com/", {
9
    waitUntil: "networkidle0",
10
  });
11
12
  const bytebot = new BytebotClient({
13
    apiKey: process.env.BYTEBOT_API_KEY,
14
  });
15
}
16
17
run().catch(console.error);

Starting (and Ending) a Session

Before creating any actions or extractions with Bytebot, you should start a session. Sessions enable Bytebot to log events and errors to a single session ID.

To create a session, use the .startSession() function, which will create a random UUID. You will want to wrap this in an async function:

1
import { BytebotClient } from '@bytebot/sdk';
2
import puppeteer from "puppeteer";
3
import "dotenv/config";
4
5
async function run() {
6
  const browser = await puppeteer.launch();
7
  const page = await browser.newPage();
8
  await page.goto("https://developer.chrome.com/", {
9
    waitUntil: "networkidle0",
10
  });
11
12
  const bytebot = new BytebotClient({
13
    apiKey: process.env.BYTEBOT_API_KEY,
14
  });
15
16
  bytebot.puppeteer.startSession();
17
}
18
19
run().catch(console.error);

After you are finished using Bytebot, you should end the session to indicate to Bytebot that the session is complete. To do that, use the .endSession() function:

1
import { BytebotClient } from '@bytebot/sdk';
2
import puppeteer from "puppeteer";
3
import "dotenv/config";
4
5
async function run() {
6
  const browser = await puppeteer.launch();
7
  const page = await browser.newPage();
8
  await page.goto("https://developer.chrome.com/", {
9
    waitUntil: "networkidle0",
10
  });
11
12
  const bytebot = new BytebotClient({
13
    apiKey: process.env.BYTEBOT_API_KEY,
14
  });
15
16
  bytebot.puppeteer.startSession();
17
18
  bytebot.puppeteer.endSession();
19
}
20
21
run().catch(console.error);

With the basics down, you are now ready to create actions and extract data with your local browser.