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


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';

  loginPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await use(loginPage);
  homePage: async ({ page }, use) => {
    const homePage = new HomePage(page);
    await use(homePage);
  1. 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.

  2. 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();

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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.