需要頁碼 Object model 設計與 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;

})

以下是屏幕之一的代碼 class

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

    async clickSignupLink() {

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

    }

}
module.exports = HomePage;

現在上面的代碼工作正常。 但是在屏幕 Class 中，由於沒有定義頁面 object，因此在使用頁面方法時沒有可用的自動完成/文檔。

例如，在編寫 page.click() 時，IDE 無法識別點擊 function 並且不會建議正確的參數

有沒有辦法解決這個問題？

Answer 1

如果我正確理解您的問題，這應該有效：

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

我還建議將 Fixtures 與頁面 object model 結合使用。

Answer 2

  await this.signupLnk.click();

可以直接調用定位器，調用點擊function就可以了。

Answer 3

將此添加到 class 文件 -

/**

• @param {import('@playwright/test').Page} 頁面 */