Browser Automation in Just 5 Minutes

This is our no-BS quick start guide to getting started with browser automation.

While BrowserCat offers a wide range of ways to connect, we take a strong stance on the best way to get started: Just use Playwright.

If this approach isn’t right for you, feel free to connect with your CDP client of choice. We support them all. (See the sidebar for options.)

Let’s get started!

Install dependencies

Playwright is a powerful browser automation library that works with all major browsers. It’s the best way to get started with BrowserCat.

To install Playwright, run the following command:

npm install -D playwright
npm playwright install --with-deps

In the above lines, we install Playwright, then we install the browser binaries for Chromium, Firefox, and WebKit. This will allow you to run your scripts in any of these browsers.

Write your first script

Here’s a simple script that opens a browser, navigates to a URL, and takes a screenshot:

import * as pw from 'playwright-core';

run().catch(console.error);

async function run() {
  // Launch a headless browser locally
  const browser = await pw.chromium.launch();
  // Create a new context (e.g. private browsing session)
  const context = await browser.newContext();

  // Create a new page (e.g. browser tab)
  const page = await context.newPage();
  // Navigate to a URL via the URL bar
  await page.goto('https://www.browsercat.com');
  // Click the "Pricing" link
  await page.locator('a', {hasText: 'Pricing'}).first().click();
  // Wait for the page to load
  await page.waitForLoadState();
  
  // Take a screenshot
  const png = await page.screenshot({path: 'pricing.png'});
  console.log(png);

  // Get the title and h1 text
  const title = await page.title();
  const h1 = await page.locator('h1').innerText();
  console.log({title, h1});

  // Close the browser
  await browser.close();
}

As you can see, automating a browser is a very natural process, and Playwright provides a humanistic API for doing so. It’s just as easy to fill forms, scroll, scrape or edit DOM properties, and whatever else you need to do.

Run your first script

To run your script, save it to a file (e.g. script.js) and run it with the following command:

node script.js

You should see the following output:

<Buffer 89 50 4e 47 0d 0a 1a ... 66172 more bytes>
{ title: 'Pricing', h1: 'Pricing' }

Congratulations! You’ve just automated a browser.

Connect to BrowserCat

Not that you have a working script, it’s time to connect to BrowserCat. This will allow you to scale up your scripts without breaking your local machine or crashing your webapp server.

All it takes is three steps:

  1. Sign up for a free account.
  2. Create an API key.
  3. Then update your script, replacing .launch() with .connect()
async function run() {
  const bcatUrl = 'wss://api.browsercat.com/connect';
  const browser = await pw.chromium.connect(bcatUrl, {
    headers: {'Api-Key': '<YOUR_API_KEY>'},
  });

  // The rest of your script goes here
}

Now, rather than launching a browser locally, your script will connect to BrowserCat and run in the cloud.

We provide all the same options you have locally, including using different browser vendors, running in “headed” or “new” headless modes, setting up a third-party proxy, configuring custom launch args and user prefs, and more.

Next steps

From here, we recommend you explore the following resources:

And if you have any questions, don’t hesitate to contact us.