Cypress.io page objects cause 'cy.click() failed because it requires a DOM element.' error

Question

New to cypress, but did a couple projects in Protractor and TestCafe.

I'm aware of the controversy using PO's in cypress, but due to the complexity / nature of our app, we're going with it.

Refactoring the test to remove PO's and include the app ID's works. With the page objects, we get the 'requires a DOM element' error.

// myPo.js

class LoginPage {
    loginPageCon() {
      return cy.get('#page-login');
    }
    forgotPasswordLnk() {
      return cy.get('#forgotPassword');
    }
    emailTxt() {
      return cy.get('#email');
    }
    forgotPasswordCon() {
      return cy.get('#page-forgot-password');
   }  
  }
  export default LoginPage;

// myTest.spec.js

import loginPage from '../pageObjects/myPo.js';
const loginPage = new LoginPage();

describe('Authorization', () => {
  it('can direct to the azure instance', () => {
    cy.visitHome();
    cy.get(loginPage.loginPageCon);
  });

describe('Forgot Password', () => {
  it('clicking forgot password sends you to the correct screen', () => {
      cy.get(loginPage.forgotPasswordLnk).click();
      cy.get(loginPage.forgotPasswordCon);
    });
  });
});

Answer 1

You are returning a function reference to cy.get() when you call cy.get(loginPage.forgotPasswordLink). Change It to:

loginPage.forgotPasswordLink().click()

Your page object is already returning a chainable of cy.get()