cloudflare-puppeteer

repository·main·Indexed 18 days ago

https://github.com/cloudflare/puppeteer

A specialized fork of Puppeteer core optimized for Cloudflare Browser Run, providing a lightweight version for use within Cloudflare Workers. It utilizes the standard Chrome DevTools Protocol (CDP) for communication and includes tools such as @puppeteer/browsers for browser installation, @puppeteer/ng-schematics for Angular E2E testing, and @pptr/testserver for local HTTP/HTTPS testing servers.

Tokens
216.9K
Snippets
925
Records
1.2K
Agent score
62%

What's inside cloudflare-puppeteer

  1. Programmatic API for @puppeteer/browsers

    main

    The @puppeteer/browsers programmatic API allows you to install, launch, and manage browsers directly from your code.

    Core Functionality

    • Installation: Use install(options) to download browsers and uninstall(options) to remove them. Use canDownload(options) to check availability.
    • Launching: Use launch(opts) to start a browser instance. Note that launching system browsers is only supported for Chrome/Chromium.
    • Path Management: Use computeExecutablePath(options) for managed browsers or computeSystemExecutablePath(options) for system-installed browsers.
    • Discovery: Use getInstalledBrowsers(options) to retrieve metadata about browsers currently in your cache directory.
    • Profiles: Use createProfile(browser, opts) to manage browser profiles.

    Key Interfaces

    When calling these functions, you will interact with several option interfaces:

    • InstallOptions
    • LaunchOptions
    • UninstallOptions
    • GetInstalledBrowsersOptions
    • ProfileOptions
    • SystemOptions
  2. Use @cloudflare/puppeteer with Cloudflare Browser Run

    main

    This repository is a specialized fork of Puppeteer core designed for use with Cloudflare Browser Run (formerly Browser Rendering). It aims to minimize library size for Workers and provide a seamless experience in the Cloudflare ecosystem.

    Starting with @cloudflare/puppeteer version 1.1.0, the library uses the standard Chrome DevTools Protocol (CDP) to communicate with Browser Run. Most existing Puppeteer code should work without modification.

  3. Handle multiple interceptors and asynchronous resolutions safely

    main

    Puppeteer raises a Request is already handled! exception if abort, continue, or respond are called more than once for the same request.

    Because 3rd party packages or other listeners might resolve a request while your handler is awaiting an asynchronous operation, you must follow these rules:

    1. Check status synchronously: Always call request.isInterceptResolutionHandled() (or request.interceptResolutionState()) immediately before calling a resolution method.
    2. Atomic execution: Execute the check and the resolution method (abort/continue/respond) within the same synchronous code block to avoid race conditions.
    3. Async handlers: If your handler is async, you must re-verify the resolution status after every await before proceeding with a resolution.
    page.on('request', async interceptedRequest => {
      // 1. Initial check
      if (interceptedRequest.isInterceptResolutionHandled()) return;
    
      await someLongAsyncOperation();
    
      // 2. Re-check after async operation
      if (interceptedRequest.isInterceptResolutionHandled()) return;
      interceptedRequest.continue();
    });
  4. Puppeteer vs Selenium WebDriver

    main

    Puppeteer is not a direct replacement for Selenium WebDriver, as they serve different primary purposes:

    FeatureSelenium WebDriverPuppeteer
    Primary FocusCross-browser automationChromium-based browsers
    Language SupportMultiple languagesJavaScript only
    SetupRequires driver configurationZero setup; bundles compatible browser
    ArchitectureRequest/ResponseEvent-driven (reduces flakiness)

    Use Puppeteer when you want deep integration with Chromium features, high-speed execution, and an event-driven architecture that avoids the need for manual sleep() calls.

  5. Understanding Puppeteer's browser versioning

    main

    Puppeteer treats itself and Chromium as an indivisible entity. Each version of Puppeteer bundles a specific version of Chromium that is guaranteed to work with it.

    If you encounter compatibility issues, it is because Puppeteer is tied to a specific Chromium revision. You can find the specific Chrome version used by a Puppeteer release by checking the chrome entry in the revisions.ts file in the source repository.

  6. Manage BrowserContexts for isolated user sessions

    main

    A BrowserContext represents individual user contexts within a Browser.

    Key behaviors:

    • Isolation: Each context has isolated storage, including cookies and localStorage.
    • Creation: A Browser has a single context by default when launched. You can create additional isolated contexts using Browser.createBrowserContext().
    • Popups: If a Page opens another page (e.g., via window.open), the popup belongs to the parent page's BrowserContext.
  7. Screenshot concurrency and method interference

    main

    Puppeteer manages certain operations to prevent interference while a screenshot is being captured within a BrowserContext.

    Automatic Waiting: The following methods will automatically wait for an ongoing screenshot to finish before executing:

    • BrowserContext.newPage()
    • Browser.newPage()
    • Page.close()

    No Automatic Waiting:

    • Page.bringToFront() does not wait for existing screenshot operations to complete.
  8. How Puppeteer works in Chrome extensions

    main

    Running Puppeteer in a Chrome extension environment is experimental and differs significantly from a standard Node.js environment.

    Key Constraints

    • CDP Access: Extensions access the Chrome DevTools Protocol via the chrome.debugger API, which provides restricted access and allows attaching to only one page at a time.
    • Transport: Puppeteer must use a specialized transport layer (ExtensionTransport) instead of the standard Node.js transport.
    • Single Page Limitation: Puppeteer's view is limited to a single page (and its frames/workers). You cannot use Puppeteer to create new pages. To open a new page, you must use the chrome.tabs API and then establish a new Puppeteer connection for that specific tab.
  9. Understand the separation of puppeteer and puppeteer-core in v18.2.0+

    main

    Since version 18.2.0, the project is split into two packages:

    1. puppeteer: The full package that includes both the API and the automatic downloading of a compatible browser (Chromium).
    2. puppeteer-core: A lightweight version that provides only the API and does not download any browsers. This is ideal for environments where you want to connect to an existing browser instance or manage downloads manually.