Combine POM with Playwright Fixture

Create base.ts file under pages folder with content:

import {test as base} from '@playwright/test';
import { LoginPage } from './login.page';

type MyFixtures = {
    loginPage: LoginPage;
}

export const test = base.extend<MyFixtures>({
    loginPage: async ({page}, use) => {
        await use(new LoginPage(page));
    }
});

export {expect} from '@playwright/test';

Change the login.spec.ts test with

import {expect, test} from '../pages/base.ts';

test.describe('Heroku App', () => {
    test.beforeEach(async ({ loginPage }) => {
        await loginPage.goto();
    });

    test('login with valid credentials', async ({ loginPage }) => {
        await loginPage.login('tomsmith', 'SuperSecretPassword!');
        const messageText = await loginPage.getFlashmessate();
        expect(messageText).toContain('You logged into a secure area!');
    });

    test('login with invalid credentials', async ({ loginPage }) => {
        await loginPage.login('invalidUser', 'invalidPassword');
        const messageText = await loginPage.getFlashmessate();
        expect(messageText).toContain('Your username is invalid!');
    });
});