Using a Local Browser

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]

💡 Puppeteer may warn you of the upcoming deprecation of its old headless mode. You can disregard this warning.

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.

1import { BytebotClient } from '@bytebot/sdk';
2import 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.

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

If you are using Playwright, you must set bypassCSP to true when running browser.newPage()

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.

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

1import { BytebotClient } from '@bytebot/sdk';
2import puppeteer from "puppeteer";
3import "dotenv/config";
4
5async 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
17run().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:

1import { BytebotClient } from '@bytebot/sdk';
2import puppeteer from "puppeteer";
3import "dotenv/config";
4
5async 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
19run().catch(console.error);

💡 .startSession() is not async, but following functions to create actions and extractions will be.

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:

1import { BytebotClient } from '@bytebot/sdk';
2import puppeteer from "puppeteer";
3import "dotenv/config";
4
5async 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
21run().catch(console.error);

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