VueJS and keycloak Nightwatch testing returns undefined instead of pages

I'm trying to write an e2e test for my Vue app which is secured by Keycloak.. Normal app behaviour is that once I type in the app URL, I am redirected to Keycloak login page. I try to define this in my test as follows:

const OpenKeycloakLoginPage = browser => {
  browser
    .url(process.env.VUE_DEV_SERVER_URL)
    .waitForElementVisible("#loginForm", 5000);
  return browser.page.loginForm().waitForElementVisible("@loginForm", 2000);
};

but I keep getting the following error:

 ✖ TypeError: Cannot read property 'loginForm' of undefined

Why am I getting undefined instead of loading the actual page? what am I doing wrong here?

I have tried increasing the time periods but it got me nowhere