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

分享于2022年07月17日 javascript pageobjects playwright playwright-test 问答
【问题标题】:带有 Playwright 测试的页面对象模型设计问题(Issue with equired with Page Object model design with Playwright test)
【发布时间】:2022-01-26 11:20:12
【问题描述】:

下面是测试文件的代码

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 Class 中,由于没有定义 Page 对象,因此在使用 Page 方法时没有可用的自动完成/文档。

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

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


【解决方案1】:

如果我正确理解您的问题,这应该可以:

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

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

  • 感谢您的回复。我在 HomePage 类中遇到代码 await this.page.click(this.signupLnk); 的问题
  • 您是否在您的课程中导入页面: import { Page } from "@playwright/test"; 也在构造函数中您应该有 (page : Page)
  • 我使用的是 javascript,注释是针对 Typescript 的。你知道在js中是怎么做到的吗?