Implementation:Microsoft Playwright Server JavaScript
| Knowledge Sources | |
|---|---|
| Domains | JavaScript Execution, Remote Object Handling |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
Concrete tool for managing JavaScript execution contexts and object handles on the server side provided by the Playwright library.
Description
The `javascript.ts` module provides the `ExecutionContext` and `JSHandle` classes that form the foundation for JavaScript evaluation across all browser engines. The `ExecutionContext` class (extending `SdkObject`) manages a utility script instance, delegates evaluation to browser-specific `ExecutionContextDelegate` implementations, and handles context destruction. The `JSHandle` class represents a reference to a JavaScript object in the browser, supporting property access, JSON serialization, evaluation on the object, and disposal. The module defines generic function types (`Func0`, `Func1`, `FuncOn`) for type-safe evaluation and uses `SmartHandle<T>` to automatically return `ElementHandle` for DOM nodes. The utility script provides common operations injected into the browser.
Usage
Use this module as the base for all JavaScript evaluation operations in the Playwright server. Browser-specific implementations (CRExecutionContext, FFExecutionContext, etc.) extend these abstractions.
Code Reference
Source Location
- Repository: Microsoft_Playwright
- File: packages/playwright-core/src/server/javascript.ts
Signature
export interface ExecutionContextDelegate {
rawEvaluateJSON(expression: string): Promise<any>;
rawEvaluateHandle(context: ExecutionContext, expression: string): Promise<JSHandle>;
evaluateWithArguments(expression: string, returnByValue: boolean, utilityScript: JSHandle, values: any[], handles: JSHandle[]): Promise<any>;
getProperties(object: JSHandle): Promise<Map<string, JSHandle>>;
releaseHandle(handle: JSHandle): Promise<void>;
}
export class ExecutionContext extends SdkObject {
readonly delegate: ExecutionContextDelegate;
readonly worldNameForTest: string;
constructor(parent: SdkObject, delegate: ExecutionContextDelegate, worldNameForTest: string);
async evaluateExpression(expression: string, options: { isFunction?: boolean }, arg?: any): Promise<any>;
async evaluateExpressionHandle(expression: string, options: { isFunction?: boolean }, arg?: any): Promise<JSHandle>;
}
export class JSHandle<T = any> {
readonly _context: ExecutionContext;
async evaluate<R>(pageFunction: FuncOn<T, any, R>, arg?: any): Promise<R>;
async evaluateHandle<R>(pageFunction: FuncOn<T, any, R>, arg?: any): Promise<SmartHandle<R>>;
async getProperty(name: string): Promise<JSHandle>;
async jsonValue(): Promise<T>;
async dispose(): Promise<void>;
}
Import
import { ExecutionContext, JSHandle } from '../server/javascript';
import type { ExecutionContextDelegate, Func0, Func1, FuncOn, SmartHandle } from '../server/javascript';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| parent | SdkObject | Yes | Parent SDK object for instrumentation |
| delegate | ExecutionContextDelegate | Yes | Browser-specific evaluation delegate |
| worldNameForTest | string | Yes | World identifier (main, utility, content-script) |
| expression | string | Yes | JavaScript expression or function to evaluate |
| arg | any | No | Argument to pass to the evaluated function |
Outputs
| Name | Type | Description |
|---|---|---|
| evaluation result | any | Deserialized result of JavaScript evaluation |
| JSHandle | JSHandle | Handle to a JavaScript object in the browser |
| properties | Map<string, JSHandle> | Object properties as a map of handles |
| jsonValue | T | JSON-serializable value of the handle |
Usage Examples
// Browser-specific context creation
const context = new ExecutionContext(parentSdkObject, crDelegate, 'main');
// Evaluate expression
const title = await context.evaluateExpression('document.title', { isFunction: false });
// Get handle
const handle = await context.evaluateExpressionHandle('document.body', { isFunction: false });
// Work with handle
const tagName = await handle.evaluate(el => el.tagName);
const props = await handle.getProperties('childNodes');
await handle.dispose();