Add the capability to execute a custom script before page initialization scripts #1739

AlexanderMoskovkin · 2017-08-29T14:37:51Z

Are you requesting a feature or reporting a bug?

feature suggestion

What is the current behavior?

TestCafe executes a ClientFunction when the page is fully loaded.

What is the expected behavior?

Add ability to execute any client script in the browser before other page scripts.

Here are some use cases:
Catch JS errors and console output
Executing code in the browser before the page code evaluates

Proposed API:

import fs from 'fs';

const initializationScript = fs.readFileSync('./script.js').toString()

fixture `My fixture`
    .addScriptToEachPage(initializationScript);

test
    .addScriptToEachPage(initializationScript);

Feel free to vote for the feature if you consider it useful and please let us know about your use case for it.

dimaip · 2017-08-30T07:33:40Z

This feature is useful e.g. if you want to override console.log to spy on console output in your tests.

CommanderXL · 2017-08-31T03:27:02Z

Yes. This feature is good

San4es · 2017-09-18T15:24:20Z

@AlexanderMoskovkin

I think that ClientFunction support will be useful for this feature:

test.addScriptToEachPage(ClientFunction(...));

bisubus · 2018-03-22T14:12:06Z

I would suggest to extend the proposal with several points made in #2234:

Multiple asset types (scripts, styles, fonts), useful for UI/visual regression testing or any cases that would require to apply test-related changes to application code otherwise
Multiple asset insertion positions (start and end of head and body), with end of document body as default value
'Here and now' asset insertion position for fixture/test assets, a shortcut for t.eval () => { document.createElement... }, also accepts a ClientFunction
Local assets that are resolved from NPM module name or relative path, a shortcut for fs.readFileSync('require.resolve('module'), 'utf8') (currently included as is, no bundling or transpilation)
Remote CDN assets identified by URL
Fixture assets
Test assets
Global assets for entire test run (similar to Karma files) as runner and CLI options

Currently the framework has undocumented embeddingOptions runner method, it makes an asset (script or style) being served by TestCafe server, is available only on runner init but not in CLI. Another part of the process is internal testRun.injectable property that allows to push served script/style to <head>, it seems to be reachable in specs as t.testRun.injectable but is unavailable on runner init.

craig-jennings · 2018-06-13T21:55:14Z

This would also be helpful if certain local storage keys need to be set before the page loads.

miherlosev · 2018-08-15T10:58:41Z

Note: we already have build-in support for accessing console messages

juliusgonawan · 2018-11-06T07:31:20Z

any update for this enhancement?

miherlosev · 2018-11-06T08:52:34Z

Hi @juliusgonawan

Would you please describe a real life case for which you need this functionality?

NickCis · 2018-11-06T19:55:52Z

@miherlosev
A real world escenario i've found is avoiding a service worker registration. If a service worker is registered without using https, chrome logs a console error which forces you to run testcafe with the -e flag. I'd like to run testcafe without ignoring Js Error messages.

Service worker are usually registered with an inline script:

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}
</script>

So if i try to mock navigator.serviceWorker in the test, it will be mocked after the script has run.

bitjoo · 2018-11-15T08:56:02Z

@miherlosev
A real world scenario is mine. I want to use PollyJS to record/mock some xhr or fetch requests. But to do so, I have to inject it into the page early. I tried it with ClientFunction, but it injects too late, so it missed some requests. An option to inject code as early as possible would be fine.

AndreyBelym · 2018-11-16T14:53:11Z

@NickCis, @bitjoo - thank you for providing additional details. You can solve these issues by using RequestMock to handle specific page requests. Take a look at the following topics in the documentation:

For example, you can mock a service worker script for browsers that don't support this feature using the following code:

import { ClientFunction, RequestMock } from 'testcafe';

const supportsServiceWorkers = ClientFunction(() => 'serviceWorker' in navigator);

fixture `ServiceWorker`
    .page('http://my-site.com')
    .beforeEach(async t => {
         const canUseServiceWorkers = await supportsServiceWorkers();
       
         if (canUseServiceWorkers)
             return;

         await t.addRequestMocks(
             RequestMock()
                 .onRequest('http://my-site.com/service-worker.js')
                 .respond('');
         );
     });

samsoft05 · 2018-11-25T18:28:10Z

@miherlosev One more use case is that. Since client scripts are loading after page load, we can not mock any setInterval, setTimout functions

benmonro · 2019-06-05T14:45:47Z

@AlexKamaev would you guys accept a PR if I implement it?

AlexSkorkin · 2019-06-06T08:58:33Z

@benmonro, you are welcome to submit your PR. We will be happy to review it.

benmonro · 2019-06-10T14:51:40Z

hey all, started this PR w/ the changes: #3880
a bit unclear about where the tests for this should go, but hopefully the PR makes sense.

AlexKamaev · 2019-06-10T15:19:11Z

@benmonro

We are discussing the API with the team. We'll prepare our full vision of the issue within a few days.
In addition, I want to mention that we'd like to support this feature not only for a configuration file, but for runner (as @miherlosev suggested in the #1739 (comment)), and fixture/test (as @AlexanderMoskovkin suggested in #1739 (comment))

miherlosev · 2019-06-13T10:48:37Z

After discussing with the team we introduce the following API principles for adding custom scripts to the tested page:

should be possible to add a custom script on several framework levels: Test API, Command line, Configuration and Runner
should be possible to specify one, list or array of the added custom scripts
should be possible to add a custom script to all or separate pages
should be possible to specify path or content of the added script

Client script initializers

String

fixture `Fixture`
    .clientScripts('asserts/helpers.js'); // path to file (relative or absolute)

Object with content

fixture `Fixture`
    .clientScripts({ content: 'var i = 0' '});

Object with path

fixture `Fixture`
     .clientScripts({ path: './assets/helpers.js' });

Object with page property (specified the pages for which the target script will be injected)

fixture `Fixture`
    .clientScripts({
        path: 'assets/helper.js'
        page: 'http://example.com'
    })

Object with 'module' property

fixture `Fixture`
    .clientScripts({ module: 'dom-utils' })

Possible arguments

fixutre `Fixture`.clientScripts('test1.js'); // single argument
fixture `Fixture.clientScripts('test1.js', 'test2.js'); // list of arguments
fixture `Fixture.clientScripts(['test1.js']); // array of arguments

API:

Test and fixture

fixture `My fixture`.clientScripts('test.js');
test.clientScripts('test.js');

Command line

testcafe chrome /tests --client-scripts asserts/jquery.js,mockDate.js

Configuration

{
    "clientScripts": ['wait-for-react-helper.js']
}

Runner

const runner = testcafe.createRunner();
        return runner
            .src(['tests/fixture1.js', 'tests/func/fixture3.js'])
            .browsers(['chrome', 'safari'])
            .clientScripts(['/assets/jquery.js'])
            .run();

benmonro · 2019-06-13T12:06:53Z

Would you also please consider a separate configuration for "beforeEach" that doesn't need to be set in each fixture? I had originally requested that and that issue was closed in favor of this one. Jest and mocha and other test runners have this feature as well for things like testing library add ons (like testcafe-testing-library) and it adds a nice way to centrally configure those things

miherlosev · 2019-06-13T12:30:17Z

Would you also please consider a separate configuration for "beforeEach" that doesn't need to be set in each fixture?

If you want to add a custom script for each fixture, use the clientScripts method/property at the Configuration, Command line and Runner levels.

For example, the following code will add /assets/jquery.js content to the tested page in each fixture.

const runner = testcafe.createRunner();
        return runner
            .src(['tests/fixture1.js', 'tests/func/fixture3.js'])
            .browsers(['chrome', 'safari'])
            .clientScripts(['/assets/jquery.js'])
            .run();

benmonro · 2019-06-13T15:45:12Z

Yes but what if it's not a client script? Ie something I just want to set up in the test side

On Thu, Jun 13, 2019 at 5:30 AM Mikhail Losev ***@***.***> wrote: Would you also please consider a separate configuration for "beforeEach" that doesn't need to be set in each fixture? If you want to add a custom script for each fixture, use the clientScripts method/property at the Configuration, Command line and Runner levels. For example, the following code will add /assets/jquery.js content to the tested page in each fixture. const runner = testcafe.createRunner(); return runner .src(['tests/fixture1.js', 'tests/func/fixture3.js']) .browsers(['chrome', 'safari']) .clientScripts(['/assets/jquery.js']) .run(); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1739?email_source=notifications&email_token=AADBPBAQ757VIVZ7IWO7B6DP2I4WDA5CNFSM4DYYFYX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXTQ66Q#issuecomment-501682042>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADBPBF5O7F6FA3TWAE6QFDP2I4WDANCNFSM4DYYFYXQ> .

-- Ben Monro Software Developer

miherlosev · 2019-06-14T08:37:08Z

@benmonro
In this issue, we are discussing the capability to execute a custom script on the client side before page initialization scripts.
If you want to set up something on the server side, use the fixture.before hook.
If you have other questions that are not connected with the issue's subject, please create a separate issue regarding them. It will allow us to work on the problems and features more efficient.

benmonro · 2019-06-14T14:30:30Z

@miherlosev yes I did that but you closed that issue in favor of this one. #3857

fixture.before would still require a modification in each test figure file. I would like a way to globally set fixture.before I'm the way they jest or mocha let you set that as well.

AlexKamaev · 2019-06-17T12:14:32Z

@benmonro
We already have a suggestion to implement similar functionality. Please refer to it #745.
You are also welcome to share your thoughts there. I'd like to note that we do not know when we will be able to start working on that feature.
As for this ticket, let's continue discussing only the custom client script feature here.

* initial * fix wrong rebase * new logic for resolving relative paths (test api and others) * refactoring * fix tests * provide error messages for uncaught errors occured in injected client scripts * fix tests * fix error messages * fix server tests * fix relative paths * fix type definition * prevent multiple method calls for clientScripts and requestHooks * fix an error message during module loading * specify execution order for clientScripts and requestHooks * skip test * skip test * refix the test * fix client scripts loading order and handle module path resolving errors

lock · 2019-08-03T13:10:50Z

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.

) * initial * fix wrong rebase * new logic for resolving relative paths (test api and others) * refactoring * fix tests * provide error messages for uncaught errors occured in injected client scripts * fix tests * fix error messages * fix server tests * fix relative paths * fix type definition * prevent multiple method calls for clientScripts and requestHooks * fix an error message during module loading * specify execution order for clientScripts and requestHooks * skip test * skip test * refix the test * fix client scripts loading order and handle module path resolving errors

AlexanderMoskovkin added the TYPE: proposal label Aug 29, 2017

AlexanderMoskovkin changed the title ~~Add ability to execute a custom script before page initialization scripts~~ Add the capability to execute a custom script before page initialization scripts Aug 29, 2017

AlexanderMoskovkin mentioned this issue Sep 7, 2017

Getting "Uncaught TypeError: Cannot define property hammerhead|processed-context, object is not extensible" error after upgrade to 0.17.2 version #1767

Closed

AlexanderMoskovkin added TYPE: enhancement The accepted proposal for future implementation. and removed TYPE: proposal labels Oct 25, 2017

AlexanderMoskovkin added this to the Sprint #10 milestone Oct 25, 2017

AlexanderMoskovkin mentioned this issue Oct 25, 2017

How to populate localStorage before the router gets executed? #1916

Closed

AndreyBelym mentioned this issue Dec 8, 2017

Is it possible to mock HTML5 APIs (like geolocation) ? #1991

Closed

AlexanderMoskovkin modified the milestones: Sprint #10, Sprint #11 Dec 11, 2017

AlexanderMoskovkin modified the milestones: Sprint #11, Planned Feb 20, 2018

kirovboris mentioned this issue Mar 21, 2018

add waitForReact helper DevExpress/testcafe-react-selectors#89

Closed

AlexanderMoskovkin mentioned this issue Mar 22, 2018

Load external scripts to browser #2234

Closed

miherlosev mentioned this issue Oct 2, 2018

Can't find screen size using JQuery #2756

Closed

miherlosev mentioned this issue Feb 4, 2019

TestCafe Roadmap miherlosev/tmp#15

Closed

AndreyBelym added this to New Features & APIs in Enhancements processing Mar 1, 2019

AndreyBelym moved this from New Features & APIs to Test API Suggestions in Enhancements processing Mar 1, 2019

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jun 5, 2019

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jun 6, 2019

benmonro mentioned this issue Jun 10, 2019

Add support for 'clientScripts' (close #1739) #3880

Merged

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jun 10, 2019

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jun 10, 2019

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jun 13, 2019

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jun 13, 2019

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jun 13, 2019

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jun 14, 2019

need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jun 14, 2019

AlexKamaev self-assigned this Jun 17, 2019

need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jun 17, 2019

miherlosev closed this as completed in #3880 Jul 24, 2019

Enhancements processing automation moved this from Test API Suggestions to Closed Jul 24, 2019

lock bot added the STATE: Auto-locked An issue has been automatically locked by the Lock bot. label Aug 3, 2019

lock bot locked as resolved and limited conversation to collaborators Aug 3, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the capability to execute a custom script before page initialization scripts #1739

Add the capability to execute a custom script before page initialization scripts #1739

AlexanderMoskovkin commented Aug 29, 2017 •

edited

dimaip commented Aug 30, 2017

CommanderXL commented Aug 31, 2017

San4es commented Sep 18, 2017

bisubus commented Mar 22, 2018 •

edited

craig-jennings commented Jun 13, 2018

miherlosev commented Aug 15, 2018

juliusgonawan commented Nov 6, 2018

miherlosev commented Nov 6, 2018

NickCis commented Nov 6, 2018

bitjoo commented Nov 15, 2018

AndreyBelym commented Nov 16, 2018

samsoft05 commented Nov 25, 2018 •

edited

benmonro commented Jun 5, 2019

AlexSkorkin commented Jun 6, 2019

benmonro commented Jun 10, 2019

AlexKamaev commented Jun 10, 2019

miherlosev commented Jun 13, 2019 •

edited

benmonro commented Jun 13, 2019

miherlosev commented Jun 13, 2019

benmonro commented Jun 13, 2019 via email

miherlosev commented Jun 14, 2019 •

edited

benmonro commented Jun 14, 2019

AlexKamaev commented Jun 17, 2019

lock bot commented Aug 3, 2019

Add the capability to execute a custom script before page initialization scripts #1739

Add the capability to execute a custom script before page initialization scripts #1739

Comments

AlexanderMoskovkin commented Aug 29, 2017 • edited

Are you requesting a feature or reporting a bug?

What is the current behavior?

What is the expected behavior?

Proposed API:

dimaip commented Aug 30, 2017

CommanderXL commented Aug 31, 2017

San4es commented Sep 18, 2017

bisubus commented Mar 22, 2018 • edited

craig-jennings commented Jun 13, 2018

miherlosev commented Aug 15, 2018

juliusgonawan commented Nov 6, 2018

miherlosev commented Nov 6, 2018

NickCis commented Nov 6, 2018

bitjoo commented Nov 15, 2018

AndreyBelym commented Nov 16, 2018

samsoft05 commented Nov 25, 2018 • edited

benmonro commented Jun 5, 2019

AlexSkorkin commented Jun 6, 2019

benmonro commented Jun 10, 2019

AlexKamaev commented Jun 10, 2019

miherlosev commented Jun 13, 2019 • edited

Client script initializers

Possible arguments

API:

benmonro commented Jun 13, 2019

miherlosev commented Jun 13, 2019

benmonro commented Jun 13, 2019 via email

miherlosev commented Jun 14, 2019 • edited

benmonro commented Jun 14, 2019

AlexKamaev commented Jun 17, 2019

lock bot commented Aug 3, 2019

AlexanderMoskovkin commented Aug 29, 2017 •

edited

bisubus commented Mar 22, 2018 •

edited

samsoft05 commented Nov 25, 2018 •

edited

miherlosev commented Jun 13, 2019 •

edited

miherlosev commented Jun 14, 2019 •

edited