setNativeDialogHandler ignored when useRole redirects to login page

[NickCis]

Are you requesting a feature or reporting a bug?

Reporting a bug

What is the current behavior?

If the tested page has a listener to beforeunload (which returns a string), setNativeDialogHandler is set up, and useRole is used, the test will always fail (note: only the tested page has the beforeunload listener, not the login one!).

Console output:

npm test                                                                                                                                                                                    

> testcafe-setNativeHandler-userRole-bug@0.0.1 test /tmp/1ca33e22641c9d6dda1fc88c4de49c3a
> testcafe chromium test.js --app 'npm start'

 Running tests in:
 - Chrome 69.0.3497 / Linux 0.0.0

 Home
 ✖ My first test

   1) - Error in Role initializer -
      A native beforeunload dialog was invoked on page "http://localhost:8080/", but no handler was set for it. Use the "setNativeDialogHandler" function to introduce a handler function for native dialogs.

      Browser: Chrome 69.0.3497 / Linux 0.0.0



 1/1 failed (1s)
npm ERR! Test failed.  See above for more details.

What is the expected behavior?

setNativeDialogHandler function is used, and useRole is performed correctly.

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Test case can be found on this gist:

git clone https://gist.github.com/NickCis/1ca33e22641c9d6dda1fc88c4de49c3a
cd 1ca33e22641c9d6dda1fc88c4de49c3a
npm install && npm test

A quick workarround is navigating to a page that hasn't attached the beforeunload:

await t
   .setNativeDialogHandler( ... )
   .navigateTo('about:blank')
   .useRole(user)
   .navigateTo(url);

Specify your

• operating system: Arch Linux (Kernel 4.18.12)
• testcafe version: 0.22.0
• node.js version: v10.0.0

[NickCis]

Digging a little further, the problem may originate as in role's initialization the test run is switched to a clean state (which cleans testrun's activeDialogHandler) before navigating to the login page.

Shouldn't the correct behaviour be?:

1. Redirect to an empty page (something like .navigateTo('about:blank'), idk if about:blank is available across all browsers or the proxy should provide an empty page)
2. Switch to Clean state
3. Redirect to Login page

[AlexKamaev]

I've reproduced the issue. We'll see how we can improve this behavior. For now I recommend you use your workaround. In addition you can modify it in the following manner:

import { Role, Selector } from 'testcafe';

const url = 'http://127.0.0.1:8080';

const user = new Role(`${url}/login.html`, async t => {
    await t
        .typeText('#user', 'user')
        .typeText('#password', 'password')
        .click('#submit');
});

fixture('Home')

test('My first test', async t => {
    await t.setNativeDialogHandler((...args) => {
        console.log('handler', args);
        return true;
    });
    await t.useRole(user);
});

I've removed page declaration in the fixture. It'll start test from about:blank page so beforeunload will not be raised.

[NickCis]

The example was just to provide a test escenario. In the real escenario, all the site's pages set beforeunload when you are logged in, i'm trying to test interaction between two users so this was constantly failing.

I am eager to provide a PR with a fix, but idk what would be the correct approach :)

[AlexKamaev]

As you previously mentioned, the issue occurs because test run is switched to a clean state before navigating to the login page. I think it is too early, so the correct approach will be to move switchToCleanRun after navigating to the login page. In this case, navigation will be processed correctly. In addition, you will need to change your test and add the setNativeDialogHandler method to a role initializer. So, modify your test in the following manner:

const user = new Role(`${url}/login.html`, async t => {
    await t.setNativeDialogHandler(...)
    ...
});

fixture('Home')

test('My first test', async t => {
    await t.setNativeDialogHandler((...args) => {
        console.log('handler', args);
        return true;
    });
    await t.useRole(user);
});

You are welcome to make a PR with a fix if you want.

[NickCis]

If i navigate to the login page before switching to a clean run won't have the test run in an invalid state? (particularly regarding the current session).

Isn't preferable to perform a navigation to a blank page, then switch to a clean run and finally perform the navigation to the login page?

[AlexKamaev]

Navigation to the login page is a valid action. It does not lead to any internal changes in the test state because all internal states will be saved after role initialization. We consider this approach with the team as most acceptable.

[NickCis]

Which i meant with leaving the test run in an invalid state is, that, the problem of first navigating to the login page and then switching to a clean state is that the login page is loaded with the last used role. This will be a problem if the login page response depends on whether a user is logged or not.

For example:

const userA = ...;
const userB = ...;

test('Chat', async t => {
  await t
    .setNativeDialogHandler(() => true)
    .useRole(userA)
    // ...
    .useRole(userB); // -> Fails
});

This test fails as the login page is loaded with userA session, so no login form is shown.

This is why i'm suggesting to do:

1. Redirect to an empty page (something like .navigateTo('about:blank'))
2. Switch to Clean state
3. Redirect to Login page

[AlexKamaev]

We'd like to avoid navigating to the about:blank page, so it's better to call switchToCleanRun after _navigateToLoginPage. As you correctly mentioned, in your case there will be a problem with a login page. However it can be solved if you clear storages before navigation. You can use similar code:

testRun.session.useStateSnapshot(null);
await this._navigateToLoginPage(testRun);
await testRun.switchToCleanRun();

[marcinlesek]

@AlexKamaev is this issue still valid? I'm occurred this same issue now as @NickCis.

[AlexKamaev]

@marcinlesek
Yes, the issue still exists. I think we can fix it in the near future. Meanwhile, you can use one of the workarounds described above.

[marcinlesek]

@AlexKamaev unfortunately, this workarounds mentioned here doesn't work for my case. Let's assume case as below (I couldn't pass urls to app because it's internal):

// ...

const signInUrl = 'https://example.com';
const userData = {
  email: 'email@email.com',
  password: 'password',
};

const signIn = async (email, password) => {
  const signInPage = new SignInPage();

  await t.setNativeDialogHandler(() => true); // With or without
  await signInPage.signIn(email, password);
};

const user = Role(
  signInUrl,
  async () => signIn(userData.email, userData.password)
);

const pageWithNativeDialogUrl = 'https://...';
const authCredentials = { ... };
const hook = new Hook(...);

fixture`role mechanics`
  .page(pageWithNativeDialogUrl)
  .httpAuth(authCredentials)
  .requestHooks(hook);

test('test role mechanics', async (t) => {
  const myPage = new MyPage();
  const userPage = new UserPage();
  await t.setNativeDialogHandler(() => true); // With or without

  await myPage.firstAction();
  await myPage.secondAction();

  await t
    .setNativeDialogHandler(() => true) // With or without
    .useRole(user);

  await userPage.firstActionAsUser();
  await userPage.secondActionAsUser();
});

This case example made that test is performing actions on myPage, after that signInPage is appearing but nothing happened and after timeout, I got error about incorrectly set nativeDialogHandler:

1) - Error in Role initializer -
      A native beforeunload dialog was invoked on page
      "http://localhost:5000/", but no handler was set for it. Use the
      "setNativeDialogHandler" function to introduce a handler function for native dialogs.

      Browser: Chrome 74.0.3729 / Mac OS X 10.14.4

I tried to add .setNativeDialogHandler(() => true) in few places (beginning of text execution, before setRole or in Role sign in function) but without any success. Any ideas how we could workaround this?

Thanks in advance!

Best,
Marcin

[AlexKamaev]

@marcinlesek
It's difficult to give any advice without a working project. If you want, you can send detailed information about your project (full test code, url, credentials, etc) at support@devexpress.com.
Also I want to mention that I added this issue into the current milestone, so this means that we have plans to fix it in the near future.
 

[marcinlesek]

@AlexKamaev thanks for answer. Unfortunately, I couldn't provide any informations about project, above example is the most similar I could provide. Thanks for adding this issue to your current sprint, I hope it'll be fixed soon so we'll have opportunity to start using roles on our daily basis.

Best,
Marcin

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