Watching some lessons I wanted to implement an universal importer for page objects, instead of calling the my_file.page.ts on each test, I wanted to import all *.page.ts in a single index.ts file but I can no longer call the locators and use native Playwright methods with this.

Here is index.ts

const { test: base, expect } = require('@playwright/test')

import { LoginPage } from '../pages/login.page';
import { AssignFields } from '../pages/assignFields.page';

const test = base.extend({
    page: async ({ page }: any, use: (arg0: any) => any) => {
        await use({
            ...page,
            login: new LoginPage(page),
            assignfields: new AssignFields(page),
        })
    }
})

export { test, expect };

With that I call the new page context within the assignFields.page.ts

import { Page } from '@playwright/test';

const selectors = {
    btnAssignFields: 'selector1',
    btnEdit: 'selector2',
    tableFields: 'selector3',
    tableFieldsItems: 'selector4',
};

export class AssignFields {
    readonly page: Page;
    readonly selectors : any;

    constructor(page: Page) {
        this.page = page;
        this.selectors = selectors
    }

    async assignFields() {
        await this.page.locator(this.selectors.btnAssignFields).click();
    }

    async edit() {
        if (await this.page.isVisible(this.selectors.btnEdit)) {
            await this.page.locator(this.selectors.btnEdit).click();
        }
    }

    async searchByField(fieldName: string) {
        await this.page.getByPlaceholder('Search').fill(fieldName);
    }
}

With this, I do my tests on assignFields.spec.ts

import { test, expect } from '../support/index';

test('Filter by text', async ({ page }) => {
    await page.login.goto();
    await page.login.fillEmail('[email protected]');
    await page.login.fillPass('my_password');
    await page.login.clickLogin();

    await page.locator(page.assignfields.selectors.btnAssignFields).waitFor();

    await page.assignfields.assignFields();
    await page.waitForSelector(page.assignfields.selectors.tableFields);
    await page.assignfields.edit();

    await page.assignfields.searchByField('my_field');

    await expect(
        page.locator(page.assignfields.selectors.tableFieldsItems)
    ).toHaveCount(1);
});

When running the project I got the following message:

@assignFields.spec.ts:9
TypeError: page.locator is not a function

That line is the first await page.locator and what I understand from this is that something is not being correctly imported, maybe the Playwright itself, maybe something else but I cannot proceed from this point.