When I try to run my test, I am getting this error. I am new to typescript and playwright, but not programming/Test Automation.

This is the login page code

import { Locator, Page } from "@playwright/test";

export class LoginPage  {

readonly page: Page;
readonly input_userId: Locator;
readonly input_password: Locator;
readonly button_login : Locator;

constructor(page:Page){
    // super(page)
    this.input_userId = page.locator('id=loginForm:userNameInput');
    this.input_password = page.locator('id=loginForm:passwordInput');
    this.button_login = page.locator('id=loginForm:loginButton');
}

    async goto(url:string) {
        await this.page.goto(url);
    }

    async enterUserName(userName:string){
       await this.input_userId.fill(userName)
    }
    
    async enterPassword(password:string){
        await this.input_password.fill(password)
    }

    async clickLogin(){
        await this.button_login.click();
    }
}

This is where I am running my test my test

import {test,expect,Page} from '@playwright/test'
import { LoginPage } from '../pages/loginPage'

test.describe('Login Page', async () => {
    
    test('Login as a super user',async ({page}) => {        
        const loginpage = new LoginPage(page);
        loginpage.goto('https:// Some_URL'); // This is failing here 
        loginpage.enterUserName('[email protected]'); 
        loginpage.enterPassword('test')
        loginpage.clickLogin();
    })
    
});

TypeError: Cannot read property 'goto' of undefined

Can someone let me know what I am doing wrong?

Thanks

CodePudding user response：

The Page is the interface for a browser page. You have defined readonly page: Page in your LoginPage class however you didn't assign it to anything. Therefore it's undefined for the LoginPage. Inside your constructor, you should call this.page = page;