Problema con el diseño del modelo de objeto de página requerido con las pruebas de Playwright.

A continuación se muestra el código del archivo de prueba:

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

Y a continuación se muestra el código de una de las clases Screen:

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

    async clickSignupLink() {

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

    }
}

module.exports = HomePage;

Ahora bien, el código anterior funciona correctamente. Sin embargo, en la clase Screen, como no se define un objeto de tipo Page, no hay autocompletado o documentación disponible al utilizar los métodos de Page.

Por ejemplo, al escribir page.click(), el IDE no reconoce la función click y no sugiere los parámetros correctos.

¿Existe alguna forma de resolver esto?