Fixture.clientScripts Method

Injects scripts into all pages visited during the test.

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

Parameter	Type	Description
`script`, `script2`, `scriptN`	String \| Object \| Array	Scripts to inject into the tested pages. See Provide Scripts to Inject for information on how to specify scripts.

fixture`Fixture.clientScripts`
    .page`https://devexpress.github.io/testcafe/example/`
    .clientScripts('../../../../../utils/mock-date-get-time.js');

fixture`Fixture.clientScripts`
    .clientScripts({
        page:    /\/testcafe\/example\//,
        content: 'Geolocation.prototype.getCurrentPosition = success => success({ latitude: 0, longitude: 0 });',
    });

Note

Relative paths resolve against the test file location.

You can use the page option to specify pages into which scripts should be injected. If this option is missing, TestCafe injects scripts into all pages visited during the test.

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.

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

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

Note

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

TestCafe resolves relative paths against the test file location.

Example

fixture`Fixture.clientScripts`
    .page`https://devexpress.github.io/testcafe/example/`
    .clientScripts('../../../../../utils/mock-date-get-time.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.

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

Argument	Type	Description
`moduleName`	String	The module name.

Note

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.

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

Note

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

fixture`Fixture.clientScripts`
    .page`https://devexpress.github.io/testcafe/example/`
    .clientScripts({ module: 'lodash' });

Inject Script Code

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

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

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

Note

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;
    };
`;

fixture`Fixture.clientScripts`
    .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.

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

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

fixture.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.

Note

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

Example

fixture`Fixture.clientScripts`
    .page`https://devexpress.github.io/testcafe/`
    .clientScripts({
        page: /\/testcafe\/example\//,
        path: '../../../../../utils/mock-date-get-time.js',
    });