Connecting Playwright

Browserless supports Playwright's Chrome DevTools Protocol (CDP) connection method, which provides a reliable way to connect to Browserless. This method is similar to how Puppeteer operates and is well-suited for most automation tasks.

Follow these steps to get started with Playwright and Browserless:

1. Get Your API Token

   • Go to the Browserless dashboard
   • Sign up or log in to your account
   • Copy your API token from the dashboard

2. Install Playwright

   Install the required Playwright library for your language:

   Javascript

   npm install playwright-core

   Python

   pip install playwright

   Java

   <dependency>
     <groupId>com.microsoft.playwright</groupId>
     <artifactId>playwright</artifactId>
     <version>1.40.0</version>
   </dependency>

   C#

   dotnet add package Microsoft.Playwright

3. Run Your First Example

   Here's a complete working example that takes a screenshot of a website:

   Javascript

   import { chromium } from "playwright-core";
   
   const TOKEN = "YOUR_API_TOKEN_HERE"; // Replace with your actual token
   
   async function takeScreenshot() {
     // Connect to Browserless using CDP (recommended method)
     const browser = await chromium.connectOverCDP(
       `wss://production-sfo.browserless.io?token=${TOKEN}`
     );
     
     const context = await browser.newContext();
     const page = await context.newPage();
   
     // Navigate to the target website
     await page.goto("https://www.example.com/");
     
     // Take a screenshot and save it locally
     await page.screenshot({ path: "screenshot.png" });
     console.log("Screenshot saved as screenshot.png");
   
     // Clean up resources
     await browser.close();
   }
   
   takeScreenshot().catch(console.error);

   Python

   from playwright.sync_api import sync_playwright
   
   TOKEN = "YOUR_API_TOKEN_HERE"  # Replace with your actual token
   
   def take_screenshot():
       with sync_playwright() as p:
           # Connect to Browserless using CDP (recommended method)
           browser = p.chromium.connect_over_cdp(
               f"wss://production-sfo.browserless.io?token={TOKEN}"
           )
           
           context = browser.new_context()
           page = context.new_page()
   
           # Navigate to the target website
           page.goto("https://www.example.com/")
           
           # Take a screenshot and save it locally
           page.screenshot(path="screenshot.png")
           print("Screenshot saved as screenshot.png")
   
           # Clean up resources
           browser.close()
   
   if __name__ == "__main__":
       take_screenshot()

   Java

   package org.example;
   
   import com.microsoft.playwright.*;
   import java.nio.file.Paths;
   
   public class Main {
       public static void main(String[] args) {
           try (Playwright playwright = Playwright.create()) {
               final String TOKEN = "YOUR_API_TOKEN_HERE"; // Replace with your actual token
               
               // Connect to Browserless using CDP (recommended method)
               Browser browser = playwright.chromium().connectOverCDP(
                   String.format("wss://production-sfo.browserless.io?token=%s", TOKEN)
               );
               
               BrowserContext context = browser.newContext();
               Page page = context.newPage();
   
               // Navigate to the target website
               page.navigate("https://www.example.com/");
               
               // Take a screenshot and save it locally
               page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("screenshot.png")));
               System.out.println("Screenshot saved as screenshot.png");
   
               // Clean up resources
               browser.close();
           }
       }
   }

   C#

   using Microsoft.Playwright;  
   
   namespace PlaywrightExample  
   {  
       class Program  
       {  
           private const string TOKEN = "YOUR_API_TOKEN_HERE"; // Replace with your actual token
           
           public static async Task Main(string[] args)  
           {  
               using var playwright = await Playwright.CreateAsync();  
               
               // Connect to Browserless using CDP (recommended method)
               var browser = await playwright.Chromium.ConnectOverCDPAsync(
                   $"wss://production-sfo.browserless.io?token={TOKEN}"
               );
               
               var context = await browser.NewContextAsync();
               var page = await context.NewPageAsync();  
                 
               // Navigate to the target website
               await page.GotoAsync("https://www.example.com/");  
               
               // Take a screenshot and save it locally
               await page.ScreenshotAsync(new PageScreenshotOptions { Path = "screenshot.png" });  
               Console.WriteLine("Screenshot saved as screenshot.png");
               
               // Get page information
               var title = await page.TitleAsync();  
               var heading = await page.TextContentAsync("h1");  
                 
               Console.WriteLine($"Title: {title}, Heading: {heading}");  
               
               // Clean up resources
               await browser.CloseAsync();  
           }  
       }  
   }

4. Expected Output

   After running your script, you should see:

   • A screenshot file named screenshot.png created in your current directory
   • Console output: "Screenshot saved as screenshot.png"

Next Steps

Explore these key features to enhance your browser automation:

Persistent Sessions

Create and manage long-running browser sessions for complex automation workflows

Proxy Configuration

How to use both built-in residential proxies and third-party proxies with Playwright

CAPTCHA Solutions

Automatically solve captchas and other challenge-response systems