如何在Typescript中使用剧作家和剧作家/测试实现页面对象模型？

Question

我尝试过剧作家页面对象文档和几个youtube视频关于这个主题。我也读过GitHub问题（github页面对象问题），但当有不止一个页面对象类时，仍然存在实现页面对象模型的问题。我理解一个简单的类和测试文件，但是如果有人能帮助我，当我想在另一个页面类中实例化一个页面类或者继承它时，那将是非常感激的。我想在特定方法之外的另一个类中实例化一个页面类，这样我就可以在多个方法中使用该实例。我希望有一个样板为Playwright/测试与打字，不只是基本的一个类，一个测试运行文件。任何帮助将不胜感激。

我的代码示例：

export class LoginPage{
    page: Page
    /**
     * 
     */
    constructor(page: Page) {
        this.page = page;
    }

    public readonly logInButton ='text=Log in';
    
    public async clickLoginButton() {
        await this.page.click(this.logInButton);
    }
}


export class AnotherPage{
    page: Page
    /**
     * 
     */
    constructor(page: Page) {
        this.page = page;
    }
    
    login = new Login(this.page); // This does not work as Property 'page' is used before its initialization 

    public async anotherPageMethod(): Promise<void> {
        const login = new Login(this.page); // This works but this limits the scope of login to only one method. And I have to repeat this if I have mutiple methods using login.
        await login.clickLogin();
    }
}

Answer 1

您必须将所有页面对象初始化移动到构造函数。

在你的情况下，你会有这样的东西：

export class AnotherPage {
    page: Page
    // add loginPage property
    loginPage: Login

    constructor(page: Page) {
        this.page = page;
        // initialize login page object 
        this.loginPage = new Login(page)
    }

    public async anotherPageMethod(): Promise<void> {
        // loginPage accessible here
        await this.login.clickLogin();
    }

    public async oneMoreAnotherPageMethod(): Promise<void> {
        // loginPage accessible here too
        await this.login.clickLogin();
    }

}