Error in cypress object model : Cannot find module '../ObjectModel/LoginPage'

Question

I tried to write object model in vscode, to create an object.

This is login2 :

/// <reference types="Cypress" />
          
import LoginPage from "../../integration/ObjectModel/LoginPage"

describe('home page', () => {
    it('loginPage', function () {
        const lp = new LoginPage()
    })
})

This is object page :

class LoginPage {
    visit(){
        cy.visit('https://facebook.com');
    }

    fillEmail(value){
        const feild = cy.get('#email')
        feild.clear()
        feild.type(value)
        return this
    }
    
    fillPassword(value){
        const feild = cy.get('#pass')
        feild.clear()
        feild.type(value)
        return this
    }
    
    submit(){
        const button = cy.get('#u_0_b')
        button.click()
    }
}

export default LoginPage;

This is the path of files: and this the error

How I can solve it? I tried to change the path as I read, also it does not solved.

Answer 1

Seems like the file login2.js is in the same directory as ObjectModel. Thus you only need to import file like this:

import LoginPage from "./ObjectModel/LoginPage"

Answer 2

You are trying to use the import/export, which is newer/modern version to module.exports and it works only when you install babel and setup the babel configuration to transform the modules in order to work with import/export. Please try to replace export default LoginPage with module.exports = new LoginPage(); in the page class.

const LoginPage = require("../../integration/ObjectModel/LoginPage")

And in your it/test, you don't need to say const lp = new LoginPage() as you are importing the page on top with require

Answer 3

the problem solved by changing the path to

    import LoginPage from "./ObjectModel/LoginPage"