Cypress ReferenceError: input is undefined (Cypress, Cucumber, POM)

Question

I'm struggling to find the reason for this: I'm using Cypress, Cucumber and POM approach. This is my POM file LoginPage.js

class LoginPage {

    get usernameInput() {
        return cy.get('input[name="email"]');
    }
    get passwordInput() {
        return cy.get('input[name="password"]');
    }
    get submitBT() {
        return cy.get('button[type="submit"]');
    }

    loginToCMS() {
        cy.visit('https://example.com')
        usernameInput.type('[email protected]');
    }
}

export default new LoginPage

Then I try to call loginToCMS() function in another loginSteps.js file:

import { Given, When, Then, And } from 'cypress-cucumber-preprocessor/steps'
import LoginPage from '../../pages/LoginPage'

Given('user is logged in CMS', () => {
   LoginPage.loginToCMS(); 
})

When run feature file, I get an error: Reference Error: usernameInput is not defined

Answer 1

usernameInput is a function on the LoginPage class, so you have to use this to call it.

class LoginPage {
  get usernameInput() {
    return cy.get('input[name="email"]');
  }
  ...
  loginToCMS() {
    cy.visit('https://example.com');
    this.usernameInput.type('[email protected]');
  }
  
}