Implementing POM with Login Page

Create login.page.ts under pages folder with code:

import { Page,Locator } from "@playwright/test";

export class LoginPage {
    readonly page: Page;
    readonly usernameInput: Locator;
    readonly passwordInput: Locator;
    readonly loginButton: Locator;
    readonly flashMessage: Locator;

    constructor(page: Page) {
        this.page = page;
        this.usernameInput = page.locator("#username");
        this.passwordInput = page.locator("#password");
        this.loginButton = page.locator("button[type='submit']");
        this.flashMessage = page.locator("#flash");
    }
    async goto() {  
        await this.page.goto("https://the-internet.herokuapp.com/login");
    }
    async login(username: string, password: string) {              
        await this.usernameInput.fill(username);
        await this.passwordInput.fill(password);
        await this.loginButton.click();
    }
    async getFlashmessate() {
        const messageText = await this.flashMessage.textContent();
        return messageText;
    }
}

Using page objects in tests:

import {test, expect} from '@playwright/test';
import { LoginPage } from '../pages/login.page.ts';

test.describe('Heroku App', () => {
    let loginPage: LoginPage;

    test.beforeEach(async ({ page }) => {
        loginPage = new LoginPage(page);
        await loginPage.goto();
    });

    test('login with valid credentials', async ({ page }) => {
        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 ({ page }) => {
        await loginPage.login('invalidUser', 'invalidPassword');
        const messageText = await loginPage.getFlashmessate();
        expect(messageText).toContain('Your username is invalid!');
    });
});