How do I use Page Object Models with fixtures in Playwright Test?

Answer

Using POMs with Fixtures in Playwright Test

To use Page Object Models (POMs) with fixtures in @playwright/test, follow these steps:

1. Define a fixture for each POM: Create a fixture for each page object model you want to use. For example, if you have a login page object model and a home page object model, define two separate fixtures for these models.

import { test } from '@playwright/test';
import { LoginPage } from './LoginPage';
import { HomePage } from './HomePage';

test.extend({
  loginPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await use(loginPage);
  },
  homePage: async ({ page }, use) => {
    const homePage = new HomePage(page);
    await use(homePage);
  },
});

2. Create POM instances in fixture functions: In each fixture definition function, create an instance of the corresponding POM class and return it as the fixture value.

3. Include POM instances as parameters: In your test functions or hooks where you need access to these POM instances, simply include them as parameters.

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

test('Login and navigate to home page', async ({ loginPage, homePage }) => {
  await loginPage.navigate('https://ray.run/login');
  await loginPage.login('username', 'password');
  const pageTitle = await homePage.getPageTitle();
  expect(pageTitle).toBe('Home');
});

By using POMs with fixtures, you can make your tests more readable and maintainable. This approach separates concerns into smaller pieces of code, making it easier to understand and modify when necessary.