BrowserCat
Dashboard →

Getting Started with Playwright Testing

This article will walk you through the process of leveraging BrowserCat and Playwright for browser automation at scale.

Prerequisites

Before you get started, you’ll need to:

  1. Sign up for a free BrowserCat account.
  2. Create an API key.
  3. Install Playwright in your project…
npm install -D @playwright/test

Test using BrowserCat

Connecting your tests to BrowserCat takes just a few lines of code. Below is a minimal playwight.config.ts to get you started:

import {defineConfig} from '@playwright/test';

export default defineConfig({
  use: {
    connectOptions: {
      // Connect to BrowserCat's browser fleet
      wsEndpoint: 'wss://api.browsercat.com/connect',
      headers: {'Api-Key': '<YOUR API KEY>'},
      // Proxy localhost requests to BrowserCat
      // Not needed for testing public domains
      exposeNetwork: '<loopback>',
    },
  },
});

Configure the browsers

You can tweak the browsers launched for your tests, including setting up a third-party proxy, customizing launch args, and connecting to a specific region. You can bake these settings right into the headers of your playwright.config.ts file.

export default defineConfig({
  use: {
    connectOptions: {
      // Connect to BrowserCat's browser fleet
      wsEndpoint: 'wss://api.browsercat.com/connect',
      headers: {
        'Api-Key': '<YOUR API KEY>',
        // Configure the browser on launch
        'BrowserCat-Opts': JSON.stringify({
          region: 'mad',
          enableArgs: ['--disable-features=NetworkService'],
          proxy: {
            server: 'https://proxycat.com',
            username: 'kitty',
            password: 'meow',
          },
        }),
      },
      // Proxy localhost requests to BrowserCat
      // Not needed for testing public domains
      exposeNetwork: '<loopback>',
    },
  },
});

See out browser config docs for more info.

Maximize concurrency

Playwright typically limits concurrency. On a normal machine, it defaults to parallelizing to half the number of CPU cores. And in CI/CD pipelines, it disables parallelization altogether.

These are logical constrains when you consider the weight of running headless browsers locally. But when you’re running against BrowserCat’s fleet, you can safely increase concurrency… a lot.

Here’s how:

export default defineConfig({
  workers: 50,
  use: {/* same as before */},
});

When parallelizing your tests in CI/CD, start slow and build up. Even if you aren’t launching local browsers anymore, you can still run out of memory or CPU.

Nevertheless, we’ve seen dev teams save up to 75 minutes per deploy simply by parallelizing their tests using BrowserCat’s fleet.

Next steps

Now that you’re testing against BrowserCat, explore the app dashboard. It provides realtime data about your usage. And by leveraging different API keys for different functionality, you can even use it to track costs of different features, or different environments.

Playwright
Puppeteer