Implementation:DevExpress Testcafe CompileClientFunction

Knowledge Sources	DevExpress_Testcafe TestCafe Docs
Domains	Compiler, Client Function, Code Transformation
Last Updated	2026-02-12 12:00 GMT

Overview

compileClientFunction transforms a JavaScript function (expressed as a string) into browser-executable code by downgrading ES6+ syntax via Babel, processing it through hammerhead's script instrumentor, wrapping it with dependency injection, and validating that no unsupported async generator patterns remain.

Description

compileClientFunction is the default export of src/compiler/compile-client-function.js (102 lines). It is invoked whenever a test defines a ClientFunction or Selector and the framework needs to serialize the function body for execution in the browser context.

The compilation pipeline has these stages:

1. Async generator detection -- The input code is checked against the output pattern of @babel/runtime/helpers/asyncToGenerator. If the code already contains regenerator runtime footprints, a ClientFunctionAPIError is thrown because async generators are not supported inside client functions.

1. Parsing normalization -- Anonymous functions are wrapped in parentheses (function() {} becomes (function() {})). ES6 shorthand method syntax (myFn() {}) is prefixed with the function keyword.

1. Body wrapping -- The function code is wrapped as const func = (<code>); to create a valid statement for Babel.

1. ES6 downgrading -- Babel is invoked with preset-env (for client function targets) and a for-of-as-array transform. The 'use strict' directive is stripped from the output.

1. Hammerhead processing -- hammerhead.processScript instruments the code for proxy-mode compatibility (rewriting property access, eval, etc.).

1. Post-compilation validation -- The compiled code is re-checked for regenerator footprints (which Babel might have introduced for async/generator functions).

1. Dependency injection wrapping -- If dependencies are provided, each key is defined as var name = __dependencies$['name'];. The final output is an IIFE: (function(){ <dependencies> <code> return func; })();.

Usage

Use compileClientFunction whenever a user-defined function must be serialized for browser execution. This is called by the ClientFunction and Selector constructors during test compilation. It is not typically called directly by end users.

Code Reference

Source Location

• Repository: DevExpress_Testcafe
• File: src/compiler/compile-client-function.js
• Lines: 1-102

Signature

export default function compileClientFunction (
    fnCode,
    dependencies,
    instantiationCallsiteName,
    compilationCallsiteName,
);

Import

import compileClientFunction from '../compiler/compile-client-function';

I/O Contract

Inputs

Parameter	Type	Description
fnCode	string	The stringified JavaScript function body to compile (e.g., "function() { return document.title; }")
dependencies	object | null	A key-value map of dependency names to values; each key becomes a var declaration in the compiled output, referencing __dependencies$['name']
instantiationCallsiteName	string	The name of the API call site (e.g., 'ClientFunction') used in error messages
compilationCallsiteName	string	The name of the compilation call site used in error messages

Output

Return Type	Description
string	A self-contained IIFE string that, when evaluated in the browser, defines the dependency variables and returns the compiled function. Format: (function(){ var dep1=__dependencies$['dep1']; ... const func = (compiled_code); return func; })();

Errors

Error Type	Condition
ClientFunctionAPIError	Thrown with RUNTIME_ERRORS.regeneratorInClientFunctionCode if the input or compiled output contains async generator / regenerator runtime patterns

Internal Helper Functions

Function	Description
getBabelOptions()	Loads presetEnvForClientFunction and transformForOfAsArray plugins, merges with base Babel options
ensureLoadedBabelOptions()	Lazy-loads and caches the full Babel options via babel.loadOptions
downgradeES(fnCode)	Runs babel.transform with the cached options and strips 'use strict'
getDependenciesDefinition(dependencies)	Generates var name=__dependencies$['name']; for each dependency key
makeFnCodeSuitableForParsing(fnCode)	Normalizes anonymous functions and ES6 method shorthand for Babel parsing
containsAsyncToGeneratorOutputCode(code)	Checks if the code includes the formatted output of asyncToGenerator(noop)

Usage Examples

import compileClientFunction from '../compiler/compile-client-function';

// Compile a simple client function
const compiled = compileClientFunction(
    'function() { return document.title; }',
    null,
    'ClientFunction',
    'ClientFunction',
);
// Result: "(function(){ const func = (...compiled code...); return func;})();"

// Compile with dependencies
const compiledWithDeps = compileClientFunction(
    'function(selector) { return selector(); }',
    { mySelector: selectorInstance },
    'ClientFunction',
    'ClientFunction',
);
// Result: "(function(){var mySelector=__dependencies$['mySelector']; const func = (...); return func;})();"

// ES6 arrow functions and methods are normalized before compilation
const compiledArrow = compileClientFunction(
    'myMethod () { return 42; }',
    null,
    'Selector',
    'Selector',
);
// Input is normalized to "function myMethod() { return 42; }" before Babel processing

// Async functions will throw an error
try {
    compileClientFunction(
        'async function() { return await fetch("/api"); }',
        null,
        'ClientFunction',
        'ClientFunction',
    );
}
catch (err) {
    // ClientFunctionAPIError: regeneratorInClientFunctionCode
}

Related Pages

• Environment:DevExpress_Testcafe_Node_Runtime
• DevExpress_Testcafe_NativeAutomation_Entry - Native automation entry that executes compiled client functions in the browser
• DevExpress_Testcafe_NativeAutomation_ResourceInjector - Injects the task script (which may include compiled client functions) into pages