Take a screenshot

Capture any webpage as a PNG or JPEG using Browserless.

Prerequisites

• A Browserless API token from your account dashboard

Steps

AI Agent

Use the Browserless MCP server to take a screenshot from any MCP-compatible AI agent (Claude Desktop, Cursor, Windsurf, ChatGPT, etc.).

One prompt that installs the Browserless MCP server and runs this example. Paste it into your AI agent.

1. Connect the MCP server

Send this prompt to your AI agent to install the Browserless MCP server:

Go to https://github.com/browserless/browserless-mcp/blob/main/install.md
and follow the instructions to install the Browserless MCP server
for my client.

2. Take a screenshot

Use browserless_smartscraper. It captures the page in one call with automatic bot-protection handling.

Use the browserless_smartscraper tool to take a full-page
screenshot of https://scraping-sandbox.netlify.app/receipt and save it as screenshot.png

REST API

Use the /screenshot REST endpoint to capture a page as a PNG or JPEG. No WebSocket connection needed.

cURL

View Full Code on GitHub

1. Build the request

Append your token to the screenshot endpoint:

https://production-sfo.browserless.io/screenshot?token=YOUR_API_TOKEN_HERE

2. Send the request

curl -X POST \
  "https://production-sfo.browserless.io/screenshot?token=YOUR_API_TOKEN_HERE" \
  -H 'Cache-Control: no-cache' \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://scraping-sandbox.netlify.app/receipt",
    "options": { "fullPage": true, "type": "png" }
  }' \
  --output screenshot.png

3. Check the output

The response is a raw PNG binary written to screenshot.png in the current directory.

JavaScript

View Full Code on GitHub

1. Send the request

import fs from 'fs';

const response = await fetch(
  'https://production-sfo.browserless.io/screenshot?token=YOUR_API_TOKEN_HERE',
  {
    method: 'POST',
    headers: {
      'Cache-Control': 'no-cache',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      url: 'https://scraping-sandbox.netlify.app/receipt',
      options: { fullPage: true, type: 'png' },
    }),
  }
);

const buffer = await response.arrayBuffer();
fs.writeFileSync('screenshot.png', Buffer.from(buffer));

2. Check the output

Run the script with node screenshot.mjs. The file screenshot.png will appear in the current directory.

Python

View Full Code on GitHub

1. Install dependencies

pip install requests

2. Send the request

import requests

response = requests.post(
    'https://production-sfo.browserless.io/screenshot?token=YOUR_API_TOKEN_HERE',
    headers={'Cache-Control': 'no-cache', 'Content-Type': 'application/json'},
    json={'url': 'https://scraping-sandbox.netlify.app/receipt', 'options': {'fullPage': True, 'type': 'png'}},
)

with open('screenshot.png', 'wb') as f:
    f.write(response.content)

3. Check the output

Run the script with python screenshot.py. The file screenshot.png will appear in the current directory.

Java

View Full Code on GitHub

1. Send the request

import java.io.*;
import java.net.URI;
import java.net.http.*;

String token = "YOUR_API_TOKEN_HERE";
String endpoint = "https://production-sfo.browserless.io/screenshot?token=" + token;

String jsonData = """
    {
        "url": "https://scraping-sandbox.netlify.app/receipt",
        "options": { "fullPage": true, "type": "png" }
    }
""";

HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create(endpoint))
    .header("Cache-Control", "no-cache")
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString(jsonData))
    .build();

HttpResponse<InputStream> response = client.send(request, HttpResponse.BodyHandlers.ofInputStream());
try (FileOutputStream fos = new FileOutputStream("screenshot.png")) {
    response.body().transferTo(fos);
}
System.out.println("Screenshot saved as screenshot.png");

2. Check the output

Run the class. The file screenshot.png will appear in the current directory.

C#

View Full Code on GitHub

1. Send the request

using System.IO;
using System.Net.Http;
using System.Text;
using System.Text.Json;

string token = "YOUR_API_TOKEN_HERE";
string endpoint = $"https://production-sfo.browserless.io/screenshot?token={token}";

var payload = new
{
    url = "https://scraping-sandbox.netlify.app/receipt",
    options = new { fullPage = true, type = "png" },
};

using (HttpClient httpClient = new HttpClient())
{
    var request = new HttpRequestMessage(HttpMethod.Post, endpoint);
    request.Headers.Add("Cache-Control", "no-cache");
    request.Content = new StringContent(JsonSerializer.Serialize(payload), Encoding.UTF8, "application/json");

    var response = await httpClient.SendAsync(request);
    var contentStream = await response.Content.ReadAsStreamAsync();
    using (var fileStream = new FileStream("screenshot.png", FileMode.Create, FileAccess.Write))
    {
        await contentStream.CopyToAsync(fileStream);
    }
    Console.WriteLine("Screenshot saved as screenshot.png");
}

2. Check the output

Run the program. The file screenshot.png will appear in the current directory.

Frameworks

Use a browser connection when you need to interact with the page or wait for dynamic content before capturing.

Video Tutorial

Visual learner? Check out this video How to generate a Screenshot from any Website for a step-by-step tutorial.

Puppeteer

View Full Code on GitHub

1. Install dependencies

npm install puppeteer-core

2. Connect and capture

import puppeteer from 'puppeteer-core';

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://production-sfo.browserless.io?token=YOUR_API_TOKEN_HERE',
});

try {
  const page = await browser.newPage();
  await page.goto('https://scraping-sandbox.netlify.app/receipt', { waitUntil: 'networkidle2' });
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
  // Always close to release the session even on error.
  await browser.close();
}

3. Check the output

Run the script with node screenshot.mjs. The file screenshot.png will appear in the current directory.

Playwright

View Full Code on GitHub

1. Install dependencies

npm install playwright-core

2. Connect and capture

import { chromium } from 'playwright-core';

const browser = await chromium.connect(
  'wss://production-sfo.browserless.io/chromium/playwright?token=YOUR_API_TOKEN_HERE'
);

try {
  const page = await browser.newPage();
  await page.goto('https://scraping-sandbox.netlify.app/receipt', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
  // Always close to release the session even on error.
  await browser.close();
}

3. Check the output

Run the script with node screenshot.mjs. The file screenshot.png will appear in the current directory.

BAP

1. Install dependencies

npm install @browserless.io/bap-ts

2. Connect and capture

import Browserless from '@browserless.io/bap-ts';

const browser = Browserless.connect({
  browserWSEndpoint: 'wss://production-sfo.browserless.io/chromium/bql',
  token: 'YOUR_API_TOKEN_HERE',
});

try {
  const page = await browser.newPage();
  await page.goto('https://scraping-sandbox.netlify.app/receipt', { waitUntil: 'networkIdle' });
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
  // Always close to release the session even on error.
  await browser.close();
}

3. Check the output

Run the script with node screenshot.mjs. The file screenshot.png will appear in the current directory.

BQL

View Full Code on GitHub

1. Write the mutation

Navigate to the URL and capture a screenshot in one operation:

mutation Screenshot {
  goto(url: "https://scraping-sandbox.netlify.app/receipt") {
    status
  }

  screenshot(omitBackground: true) {
    base64
  }
}

2. Run it

Paste into the BQL IDE and click Run.

3. Check the output

The response includes a base64-encoded PNG. Each example above decodes it and saves it as screenshot.png.

{
  "data": {
    "goto": { "status": 200 },
    "screenshot": { "base64": "iVBORw0KGgoAAAANSUhEUgAA..." }
  }
}

Next steps

Generate a PDF

export the same page as a document

Scrape Structured Data

extract data instead of capturing images