> 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/combine-pom-with-playwright-fixture.md).

# Combine POM with Playwright Fixture

Create base.ts file under pages folder with content:

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

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