javascript - 带有 Playwright 测试的页面对象模型设计问题

Question

下面是测试文件的代码

const { test, expect } = require('@playwright/test')
const HomePage = require('./pageobejcts/HomePage')

test.beforeEach(async ({ page }) => {
    await page.goto("https://automationexercise.com/");
})

test('Navigate to Login', async ({ page }) => {

    let homepage = new HomePage(page);
    homepage.navigateToLoginSignUp();
    await expect(page.locator('//div[@class="signup-form"]/h2')).toBeVisible();
    await page.screenshot({ path: 'screenshot.png' });

    //await expect(page.locator('//img[@alt="Website for automation practice"]')).toBeVisible;

})

下面是 Screen 类之一的代码

class HomePage {
    constructor(page) {
        this.page = page;
        this.signupLnk = '//a[@href="/login"]';
    }

    async clickSignupLink() {

        await this.page.click(this.signupLnk);

    }

}
module.exports = HomePage;

现在上面的代码工作正常。但是在 Screen 类中，由于没有定义 Page 对象，因此在使用 Page 方法时没有可用的自动完成/文档。

eg在写page.click()时，IDE不识别click函数，不建议正确的参数

有没有办法解决这个问题？

Answer 1

如果我正确理解您的问题，这应该有效：

let homepage = new HomePage(page);
await homepage.page.click('selector') 

我还建议将 Fixtures 与页面对象模型结合使用。