Fixture.clientScripts Method

Injects scripts into all pages visited during the test.

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

fixture `My fixture`
    .page `http://example.com`
    .clientScripts('assets/jquery.js');

fixture
    .clientScripts({
        page: /\/user\/profile\//,
        content: 'Geolocation.prototype.getCurrentPosition = () => new Positon(0, 0);'
    });

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 } ])

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 test file location.

Example

fixture `My fixture`
    .page `https://example.com`
    .clientScripts('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.

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

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

fixture `My fixture`
    .page `https://example.com`
    .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 } ])

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 `My fixture`
    .page `https://example.com`
    .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
    }
])

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 `My fixture`
    .page `https://example.com`
    .clientScripts({
        page: /\/user\/profile\//,
        path: 'dist/jquery.js'
    });