Runner.clientScripts Method

Injects scripts into pages visited during the tests. Use this method to introduce client-side mock functions or helper scripts.

async clientScripts( script[, script2[, ...[, scriptN]]] ) → this

Parameter	Type	Description
`script`, `script2`, `scriptN`	String \| Object \| Array	Scripts to inject into the tested pages.

Inject a JavaScript File #

Specify the JavaScript file path to inject the content of this file into the tested pages. You can pass a string or object with the path property.

runner.clientScripts(filePath | { path: filePath })
runner.clientScripts(filePath | { path: filePath }, ...)
runner.clientScripts([ filePath | { path: filePath } ])

Argument	Type	Description
`filePath`	String	The path to the JavaScript file whose content should be injected.

You cannot combine the path, module and content properties in a single object. To inject multiple items, pass several arguments or an array.

Relative paths are resolved against the current working directory.

Example

runner.clientScripts('assets/jquery.js');
// or
runner.clientScripts({ path: 'assets/jquery.js' });

Inject a Module #

Specify the Node.js module's name to inject its content into the tested pages. Use an object with the module property.

runner.clientScripts( { module: moduleName } )
runner.clientScripts( { module: moduleName }, ... )
runner.clientScripts([ { module: moduleName } ])

Argument	Type	Description
`moduleName`	String	The module name.

You cannot combine the module, path and content properties in a single object. To inject multiple items, pass several arguments or an array.

TestCafe uses Node.js mechanisms to search for the module's entry point and injects its content into the tested page.

Note that the browser must be able to execute the injected module. For example, modules that implement the UMD API can run in most modern browsers.

If the injected module has dependencies, ensure that the dependencies can be loaded as global variables and these variables are initialized in the page's code.

Example

runner.clientScripts({ module: 'lodash' });

Inject Script Code #

You can pass an object with the content property to provide the injected script as a string.

runner.clientScripts({ content: code })
runner.clientScripts({ content: code }, ...)
runner.clientScripts([ { content: code } ])

Argument	Type	Description
`code`	String	JavaScript that should be injected.

You cannot combine the content, path and module properties in a single object. To inject multiple items, pass several arguments or an array. Example

const mockDate = `
    Date.prototype.getTime = function () {
        return 42;
    };
`;

runner.clientScripts({ content: mockDate });

Provide Scripts for Specific Pages #

You can also specify pages into which a script should be injected. This will allow you to mock browser API on specified pages and use the default behavior everywhere else.

To specify target pages for a script, add the page property to the object you pass to clientScripts.

runner.clientScripts({
    page: url,
    path: filePath | module: moduleName | content: code
})

runner.clientScripts({
    page: url,
    path: filePath | module: moduleName | content: code
}, ...)

runner.clientScripts([
    {
        page: url,
        path: filePath | module: moduleName | content: code
    }
])

Property	Type	Description
`url`	String \| RegExp	Specify a page URL to add scripts to a page, or a regular expression to add scripts to pages whose URLs match this expression.

If the target page redirects to a different URL, ensure that the page property matches the destination URL. Otherwise, scripts are not injected.

Example

runner.clientScripts({
    page: /\/user\/profile\//,
    path: 'dist/jquery.js'
});

The fixture.clientScripts and test.clientScripts methods allow you to inject scripts into pages visited during an individual fixture or test.

See Inject Scripts into Tested Pages for more information.

Related configuration file property: clientScripts