testcafe: how to wait for url change after .useRole and then trigger t.navigateTo

Are you requesting a feature or reporting a bug?

This is rather a question which if solved should be added to recipes docs.

What is the current behavior?

I have a SPA, Login form, using testcafe Roles api.

scenario is something like following:

import {USER_DASHBOARD_URL} from './routes'

const admin = Role(
  LOGIN_URL,
  async t => {
    await t
      .typeText(loginPage.email, 'foooo')
      .typeText(loginPage.password, 'baaar')
      .click(loginPage.submit)
  }
)

fixture('#admin | tests for user dashboard')
  .beforeEach( async t => { 
    await t
       // authenticate before each test so we don't have to do the same wihtin every test
      .useRole(admin)
      // navigate to tested url
      .navigateTo(USER_DASHBOARD_URL)
  })

test('there should be 3 users in table', async t => { 
  await t.expect(table.tableFilterItems.filterCountrySelect.exists).eql(3)
})

Step by step process:

-> starting URL: #/login
-> useRole applied
  -> click submits form 
-> XHR for authentitacion is executed
  -> on XHR success user is redirected to `#/`
-> navigateTo( testedURL ) - this should be executed after XHR is done and page was redirected to `#/`

problem:

time to time, test will stay hanging on login page, because authentication wasn’t finished yet, but Testcafe executed .navigateTo() already, which won’t success cause user is not yet logged in, so app logic will redirect that navigation action back to login. Of course if this occurs once in a test suite batch, all test will fail ( because testcafe remembers “auth role” state )

Only checkmark ( that came up my mind ) is that, when user is successfuly logged in, he is redirected from /login to /

I really got stuck with this and don’t know how to proceed further, only thing that comes up my mind is somehow tell testcafe that it should execute that .navigateTo only after location.pathname was changed from /login -> /

Any suggestions are more than welcome 😃

What is the expected behavior?

Provide a solution for described problem

Specify your

operating system: OSX 10.12.6
testcafe version: 0.17.2
node.js version: v8.4.0

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

Since we have no access to your page I can assume the following reasons:

The page is not completely loaded/initialized before typing (the wait before typing should help in this case);
Xhr-requests after the click on the submit button are sent with some delay and TestCafe doesn’t wait them before navigateTo (the wait after click should help there);
Some page scripts should be executed between typing/click actions on the login form. TestCafe performs actions rapidly so the scripts are not executed properly (lower test speed should help there).

As you say, wait actions didn’t help. You can try to use the setTestSpeed setting inside the Role initialization function:

const authenticate = async ({ username, password }: UserCredentials, t: TestController) => {
  return await t
    .setTestSpeed(0.5)
    .typeText(loginPage.email, username)
    .typeText(loginPage.password, password)
    .click(loginPage.submit)
    // hack https://github.com/DevExpress/testcafe/issues/1836#issuecomment-333476931
    .expect(getLocation())
    .notContains(ROOT_PATH)
    .navigateTo(DASHBOARD_URL)
}

It will not affect the speed of the whole test run speed a lot because the speed will be decreased only for actions inside the Role initialization function which is executed once for the test run.

AlexanderMoskovkin on Oct 3, 2017