Client function behaves differently depending on where I start my test

[rob4629]

What is your Test Scenario?

I'm trying to access a Rendr App via the console window of our website. As mentioned in my SO question, I'm able to do this without any issues using a number of different frameworks (Cypress.io, Puppeteer, Protractor etc), but I get inconsistent results using TestCafe.

What is the Current behavior?

If I start my test from our homepage and navigate to the login page, then I receive an error (regardless of waiting x length of time for the page to completely load)... but if I start the test directly from the login page (test.page('login.page') etc), then the App is found more often than not.

What is the Expected behavior?

I understand that Client Functions won't wait for the page to finish loading prior to executing... however I would expect consistent results if I navigate to a page and wait for it to load completely (wait for elements to appear, then pause for 5/10/15 seconds etc), than if I start the test from that page

What is your web application and your TestCafe test code?

Your website URL (or attach your complete example):
www.change.org

Your complete test code (or attach your test files):

Here's an example of my test code. The 1st test is able to locate the client App, however (regardless of wait time) the 2nd test is unable to locate it.

I've used our live website in the example, however I'm able to provide access to one of our demo sites (providing details via a private message etc)

import { Selector, ClientFunction } from "testcafe";

fixture`Change User State`.page('www.change.org')

const changeUserState = ClientFunction((desiredState) => {
    const initialState = App.get('currentUser').get('login_state');
    App.get('currentUser').set('login_state', desiredState);
    const currentState = App.get('currentUser').get('login_state');
    return { initialState, currentState };
});

test
    .page('www.change.org/login_or_join')
    ('Start from Login page', async t => { 
        await t 
            .maximizeWindow() 
            .typeText(Selector('#content input[type="email"]'), 'EMAIL')
            .typeText(Selector('#content input[type="password"]'), 'PASSWORD')
            .click(Selector('#content input[type="submit"]'));

        console.log(await changeUserState('guest'));
});

test
    .page('www.change.org/login_or_join')
    ('Start from homepage', async t => { 
        await t 
            .maximizeWindow()
            .navigateTo('/login_or_join')
            .wait(10000)
            .typeText(Selector('#content input[type="email"]'), 'EMAIL')
            .typeText(Selector('#content input[type="password"]'), 'PASSWORD')
            .click(Selector('#content input[type="submit"]'));

        console.log(await changeUserState('guest'));
});

Your complete test report:

As you can see, the App isn't recognised for the 2nd test. ``` ReferenceError: App is not defined Browser: Chrome 74.0.3729 / Mac OS X 10.14.4 Screenshot: /Users/rcooper/work/regression-qaa/artifacts/screenshots/2019-05-06_15-44-22/test-2/Chrome_74.0.3729_Mac_OS_X_10.14.4/errors/1.png 38 | .navigateTo('/login_or_join') 39 | .typeText(Selector('#content input[type="email"]'), 'EMAIL') 40 | .typeText(Selector('#content input[type="password"]'), 'PASSWORD') 41 | .click(Selector('#content input[type="submit"]')); 42 | > 43 | console.log(await changeUserState('guest')); at changeUserState (/Users/rcooper/work/regression-qaa/tests/non_payments/testCafe_test.js:43:27) ]]> </failure>

</details>


### Steps to Reproduce:
<!-- Describe what we should do to reproduce the behavior you encountered. -->

1. Go to my website ...
2. Execute this command...
3. See the error...
 
### Your Environment details:
 
* testcafe version:                   1.1.3
* node.js version:                    v10.15.3 (but the same results with v11.9.0)
* command-line arguments:  testcafe chrome -u tests/non_payments/testCafe_test.js
* browser name and version: Chrome 74
* platform and version:          macOS 10.14.4
* other:                                   <!-- any notes you consider important -->

[LavrovArtem]

Thank you for providing the test example. 

To address the problem, it is necessary to wait until the App variable appears. Add the following code before the changeUserState function call:

// first case
const getPageUrl = ClientFunction(() => location.toString());

await t.expect(getPageUrl()).eql('https://www.change.org/', { timeout: 5000 });
// second case
const isAppExists = ClientFunction(() => !!window.App);

await t.expect(isAppExists()).ok({ timeout: 5000 });

Let me know if this solution works for you.

[rob4629]

To address the problem, it is necessary to wait until the App variable appears.

Thanks for your response. Sadly the above didn't work for me, it times out regardless of how long I set the timeout to be... (even 5mins).

I understand that it is just a case of waiting for the App variable to appear... but I'm not sure why TestCafe is unable to locate the window.App in this given scenario... when other frameworks don't appear to have another issue.

[miherlosev]

I've tried the solution from #3775 (comment) and it works fine (see video).
The modified test code:

const isAppExists = ClientFunction(() => !!window.App);

test
    .page('www.change.org/login_or_join')
    .only
    ('Start from homepage', async t => { 
	    
	
        await t 
            .maximizeWindow()
            .navigateTo('/login_or_join')
            .typeText(Selector('#content input[type="email"]'), '******')
            .typeText(Selector('#content input[type="password"]'), '*****')
            .click(Selector('#content input[type="submit"]'))
            .expect(isAppExists()).ok();

        console.log(await changeUserState('guest'));
});

[rob4629]

The issue I'm observing is when the test doesn't start from the login page (as stated in the Current Behaviour section):

fixture`Change User State`.page('www.change.org')

test
('Start from homepage', async t => { 
	    
	
        await t 
            .maximizeWindow()
            .navigateTo('/login_or_join')
            .typeText(Selector('#content input[type="email"]'), '******')
            .typeText(Selector('#content input[type="password"]'), '*****')
            .click(Selector('#content input[type="submit"]'))
            .expect(isAppExists()).ok();

        console.log(await changeUserState('guest'));
});

I also verified that using the scenario you have outlined (starting from the login page and navigating to the login page) results in App being found... my only issue is when there is no test.page('***') argument. As stated, I can add in any number of waits, to ensure the page has completely loaded, but this hasn't helped.

This isn't a blocker for me given that I'm able to use test.page('***') to work around this issue, I'm just raising it as a noticeable difference in behaviour.

[Farfurix]

@rob4629

Hello,

I ran the "no test.page('***')" scenario and there were no errors. Please check out this sample test:

import { Selector, ClientFunction } from 'testcafe';

fixture`Change User State`.page('www.change.org');

const isAppExists = ClientFunction(() => !!window.App);

const changeUserState = ClientFunction((desiredState) => {
        const initialState = App.get('currentUser').get('login_state');
        App.get('currentUser').set('login_state', desiredState);
        const currentState = App.get('currentUser').get('login_state');
        return { initialState, currentState };
});

test
    ('Start from homepage', async t => {
            await t
                .maximizeWindow()
                .navigateTo('/login_or_join')
                .typeText(Selector('#content input[type="email"]'), '*****')
                .typeText(Selector('#content input[type="password"]'), '*****')
                .click(Selector('#content input[type="submit"]'))
                .expect(isAppExists()).ok(); // wait for App

            console.log(await changeUserState('guest'));
    });

Result:

 Running tests in:
 - Chrome 74.0.3729 / Windows 10.0.0

 Change User State
{ initialState: 'authenticated', currentState: 'guest' }
 √ Start from homepage


 1 passed (15s)

[lock]

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.