> For the complete documentation index, see [llms.txt](https://testingvn.gitbook.io/playwright/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://testingvn.gitbook.io/playwright/implementing-pom-with-login-page.md).

# Implementing POM with Login Page

Create `login.page.t`s under `pages` folder with code: 

```typescript
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:

```typescript
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!');
    });
});
```