Unable to open Url (.navigateTo) from .before in TestCafe using PageObjects

Question

I am new to JS and TestCafe.

Using PageObjects in TestCafe my goal is to launch a login page and authenticate before running a test.

The .open call works fine from fixtures. Also from with .before.

fixture `Check for new emails`
    .page `https://www.mail.com/myemails`

and

fixture `Check for new emails`
    .page `https://www.mail.com/myemails`

    .beforeEach(async t => {
        console.log("before");
        .page `https://www.mail.com/login`;
        myloginScreen.performLogin();
      })

test ('', async t => {

    await t
    console.log("In the test step");
});)

PageObject look like this:

import { Selector, t } from 'testcafe';

export default class LoginPage {
    constructor () {
        this.loginInput    = Selector('input').withAttribute('id','email');
        this.passwordInput = Selector('input').withAttribute('id','password');
        this.signInButton  = Selector('button').withAttribute('class','big-button');
        this.userMenu      = Selector('a').withAttribute('data-which-id', 'gn-user-menu-toggle-button');
    }

    async performLogin() {        
                console.log("function entered")
                .typeText(this.loginInput, 'user@mail.com')
                .typeText(this.passwordInput, 'password')
                .click(this.signInButton);
                console.log("Form submitted");
            }

}

But I want to move the Login URL load to the PageObject like this:

    async performLogin() {        
                console.log("function entered")
                .navigateTo ("https://www.mail.com/login")

            await t
                .typeText(this.loginInput, 'user@mail.com')
                .typeText(this.passwordInput, 'password')
                .click(this.signInButton);
                console.log("Form submitted");
            }

The code calls the function fine but quits the .before and jumps to the test step.

I am not sure what I am doing wrong here, will appreciate any help.

Answer 1

The performLogin is an asynchronous method. So, you need to call it with the await keyword:

fixture `Check for new emails`
    .page `https://www.mail.com/myemails`

    .beforeEach(async t => {
        console.log("before");
        await myloginScreen.performLogin();
    });