TypeError: Cannot read properties of undefined (reading 'page') - While running test in Page Object Model - Playwright

Viewed 37

TypeError Cannot Read PropertiesPlease I need some help with this error I am receiving while automating tests in Playwright. TypeError: Cannot read properties of undefined (reading 'page')

   8 |     const password = "SDKsdk-122";
   9 |
> 10 |     const pom_Manager = new POM_Manager(page);
     |                         ^
  11 |     /****************** Login Page - START *******************/
  12 |      const loginPage = pom_Manager.getLoginPage();
  13 |      await loginPage.goTo();

    at new LoginPage (C:\Users\escamilr\Desktop\CDKHubAutomation\pageobjects\LoginPage.js:6:28)
    at new POM_Manager (C:\Users\escamilr\Desktop\CDKHubAutomation\pageobjects\POM_Manager.js:17:22)
    at C:\Users\escamilr\Desktop\CDKHubAutomation\tests\CDKLogin.spec.js:10:25

I am trying to execute a test in playwright integrate but no matter how many updates/iterations of the code I come up with, I keep getting the same error:

const{LoginPage} = require('./LoginPage');
const{MultifactorPage} = require('./MultifactorPage')
const{DashboardPage} = require('./DashboardPage');
const{EstorePage} = require('./EstorePage')

class POM_Manager
{
constructor(page){
    this.page = page;
    this.loginPage = new LoginPage(this.page);
    this.dashboardPage = new DashboardPage(this.page);
    this.multifactorPage = new MultifactorPage(this.page);
    this.estorePage = new EstorePage(this.page);
}

getLoginPage()
{
    return this.loginPage;
}

getMultifactorPage()
{
    return this.multifactorPage;
}

getDashboardPage()
{
    return this.dashboardPage;
}
getEstorePage()
{
    return this.estorePage;
}
}
module.exports = {POM_Manager};

class LoginPage {

  constructor(page) {
    this.page = page;
    this.page.signInbutton.page.locator("[data-testid='primary-button']");
    this.page.userName = page.locator("#emailId");
    this.page.password = page.locator("#password");
  }
  async goToApplication() {
    const applicationURL = "https://www-dit.connectcdk.com/a/hub/#/";
    console.log('Go to application: ' + applicationURL);
    await this.page.goto(applicationURL);
  }
  async validLogin(username, password) {
    console.log('Filling ' + username + ' in Username textBox');
    await this.userName.type(username);

    console.log('Filling ' + password + ' in Password textBox');
    await this.userName.type(password);

    console.log('Clicking on Sign in button')
    await this.signInbutton.click();

    await this.page.waitForLoadState('networkidle');
  }
}
module.exports = {
  LoginPage
};

class MultifactorPage {

  constructor(page) {
    this.page = page
    this.page.skipButton.page.locator('button:has-text("Skip")');
    this.page.contactTxtbox = page.locator("#infoField");
    this.page.nextButton.page.locator('button:has-text("Next")');
  }

  async skipContact() {
    await this.skipButton.click();
    await this.page.waitForLoadState('networkidle');
  }
  //Add add email & contact methods respectively
}
module.exports = {
  MultifactorPage
};

 const {test, expect} = require('@playwright/test');
 const {POM_Manager} = require('../pageobjects/POM_Manager');


 test('Client App login', async ({page})=>
 {
    const username = "fidler@autocan.ca";
    const password = "SDKsdk-122";
    
    const pom_Manager = new POM_Manager(page);
    /****************** Login Page - START *******************/
     const loginPage = pom_Manager.getLoginPage();
     await loginPage.goTo();
     await loginPage.validLogin(username,password);

     /****************** Login Page - END *******************/

     /****************** Skip Multifactor Option - START *******************/
     const multifactorPage = pom_Manager.getMultifactorPage();
     await multifactorPage.skipContact();
 });

These are my files can you please let me know if I am missing something? The error keeps occurrin always on the const pom_Manager = new POM_Manager(page).

0 Answers
Related