TestCafe - How Do I Use Roles with auth0 login

Question

I have an app with an auth0 login. I haven't been able to figure out how to make t.useRole in this scenario.

Fortunately, this is easy to reproduce. auth0 (the application) uses the same process. It fails the exact same way as my app.

Expected Outcome
- User logs in
- User goes to dashboard
- User remains log in
- User goes to dashboard again (second test)

Actual
- User logs in
- User goes to dashboard
- User is no longer authenticated
- User goes to login page

import { Role, Selector, ClientFunction } from 'testcafe';

const getPageUrl = ClientFunction(() => window.location.href.toString());

const exampleRole: Role = Role('https://auth0.com/auth/login', async t => {
    const userNameInput = Selector('input').withAttribute('name', 'email');
    const passwordInput = Selector('input').withAttribute('name', 'password');
    const loginButton = Selector('button').withAttribute('name', 'submit');

    await t
        .wait(5000)
        .click(userNameInput)
        .typeText(userNameInput, userName)
        .click(passwordInput)
        .typeText(passwordInput, password)
        .click(loginButton);
})

fixture(`SAMPLE`)
    .page('https://manage.auth0.com/dashboard')
    .beforeEach(async t => {
        await t.useRole(exampleRole)
    })

test('My first test', async t => {
    await t
        .expect(getPageUrl()).contains('dashboard')
});

test('My next test', async t => {
    await t
        .expect(getPageUrl()).contains('dashboard')
})

Output

 SAMPLE
 √ My first test
 × My next test

   1) AssertionError: expected

   'https://auth0.auth0.com/login?state=***&client=***&protocol=oauth2&response_type=code&redirect_uri=https%3A%2F%2Fmanage.auth0.com%2Fcallback&scope=openid%20profile%20name%20email%20nickname%20created_at'
      to include 'dashboard'
    ```

user_1561671 · Answer

I had a similar issue reported here: Testcafe: Is there a way to keep the logged-in session intact between pages?

The workaround was to add a wait after .click(loginButton) in the Role block and set presreveUrl to true.

const exampleRole: Role = Role('https://auth0.com/auth/login', async t => {
    const userNameInput = Selector('input').withAttribute('name', 'email');
    const passwordInput = Selector('input').withAttribute('name', 'password');
    const loginButton = Selector('button').withAttribute('name', 'submit');

    await t
        .wait(5000)
        .click(userNameInput)
        .typeText(userNameInput, userName)
        .click(passwordInput)
        .typeText(passwordInput, password)
        .click(loginButton);
        .wait(10000);
}, { preserveUrl: true });

**Edited to include preserveUrl: true. Thanks @dapperdan1985.

TestCafe - How Do I Use Roles with auth0 login

1 Answers