Implementation:DevExpress Testcafe BrowserClient CDP

Knowledge Sources	DevExpress_Testcafe Chrome DevTools Protocol
Domains	Browser_Automation, Chrome_DevTools_Protocol
Last Updated	2026-02-12 12:00 GMT

Overview

Concrete tool for communicating with Chrome/Chromium browsers via the Chrome DevTools Protocol (CDP) for window management, screenshots, video capture, and native automation.

Description

The BrowserClient class manages CDP connections to Chrome browser tabs, maintaining a dictionary of protocol API clients keyed by window ID. It provides methods for device metrics override, touch and user-agent emulation, screencast-based video capture, screenshot capture via Page.captureScreenshot, tab management (opening, closing, activating), and native automation window setup through CDP targets.

Usage

This class is instantiated internally by the Chrome browser provider when a Chrome browser is launched. It is not called directly by test authors but powers all Chrome-specific browser operations.

Code Reference

Source Location

Repository: DevExpress_Testcafe
File: src/browser/provider/built-in/dedicated/chrome/cdp-client/index.ts
Lines: 1-474

Signature

class ProtocolApiInfo {
    public inactive: boolean;
    public client: remoteChrome.ProtocolApi;
    public constructor (client: remoteChrome.ProtocolApi);
}

export default class BrowserClient {
    private _runtimeInfo: RuntimeInfo;
    private _clients: Dictionary<ProtocolApiInfo>;
    private _parentTarget: TargetInfo | null;

    public constructor (runtimeInfo: RuntimeInfo);

    public async getActiveClient (): Promise<remoteChrome.ProtocolApi>;
    public async init (): Promise<void>;
    public async getScreenshotData (windowId: string, fullPage?: boolean): Promise<Buffer>;
    public async startCapturingVideo (windowId: string): Promise<void>;
    public async stopCapturingVideo (windowId: string): Promise<VideoFrameData[]>;
    public async resizeWindow (
        windowId: string, width: number, height: number
    ): Promise<void>;
    public async setDeviceMetricsOverride (
        windowId: string, width: number, height: number,
        deviceScaleFactor: number, mobile: boolean
    ): Promise<void>;
    public async emulateTouch (windowId: string, options: TouchConfigOptions): Promise<void>;
    public async closeBrowserPage (windowId: string): Promise<void>;
    public async openNewPage (): Promise<string>;
    public async activatePage (windowId: string): Promise<void>;
    public async updateMobileViewportSize (windowId: string): Promise<void>;
    public async createNativeAutomation (
        windowId: string, options: NativeAutomationInitOptions
    ): Promise<NativeAutomationBase>;
    public async closeNativeAutomation (windowId: string): Promise<void>;
    public async dispatchNativeAutomationEvent (windowId: string, type: EventType, options: unknown): Promise<unknown>;
}

Import

import BrowserClient from './browser/provider/built-in/dedicated/chrome/cdp-client';

I/O Contract

Inputs

Name	Type	Required	Description
runtimeInfo	RuntimeInfo	Yes	Chrome runtime configuration including CDP port, config, temp profile
windowId	string	No	Target browser window/tab ID for per-window operations

Outputs

Name	Type	Description
getScreenshotData()	Buffer	PNG screenshot of the current page
stopCapturingVideo()	VideoFrameData[]	Array of captured video frames
createNativeAutomation()	NativeAutomationBase	Native automation instance for CDP-direct browser control

Usage Examples

// Internal usage within Chrome browser provider
import BrowserClient from './cdp-client';

// 1. Create client with runtime info
const client = new BrowserClient(runtimeInfo);
await client.init();

// 2. Take a screenshot
const screenshotBuffer = await client.getScreenshotData('main-window');

// 3. Resize browser window
await client.resizeWindow('main-window', 1280, 720);

// 4. Start/stop video capture
await client.startCapturingVideo('main-window');
// ... test runs ...
const frames = await client.stopCapturingVideo('main-window');

// 5. Create native automation
const automation = await client.createNativeAutomation('main-window', {
    requestTimeout: 30000,
    // ...options
});

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment