类型错误：无法读取属性“goto”未定义的

Question

当我尝试运行测试时，出现此错误。我是打字稿和剧作家的新手，但不是编程/测试自动化。

这是登录页面代码

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();
    }
}

这是我运行测试的地方我的测试

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();
    })
    
});

类型错误：无法读取未定义的属性“goto”

有人可以让我知道我做错了什么吗？

谢谢

Answer 1

Page 是浏览器页面的界面。您已在 LoginPage 类中定义了 readonly page: Page，但未将其分配给任何内容。因此 LoginPage 未定义。在构造函数中，您应该调用 this.page = page;