How to parametrize fixtures in playwright-Node

Question

I have a classic file with fixtures and test extends:

import { test } from "@playwright/test"

export type pages = {
    functionality: Functionality
}

export const base = test.extend<pages>({
    functionality: async ({ page }, use) => {
        const func = new Functionality(page);
        await func.navigateTo()

        await use(func);

        // Closing context
        await page.close()
    }
});

test file:

test.describe('', () => {
    test.use({ storageState: "storageState_view_1" })
    test('', async ({ functionality }) => {
        
    })
})

test.describe('', () => {
    test.use({ storageState: "storageState_view_2" })
    test('', async ({ functionality }) => {

    })
})

The problem is that await func.navigateTo() is used to navigate to the functionality (click on the sidebar, for example). But in the first describe I use a user who to get to that functionality clicks on "a_certain_item" on the sidebar while the second describe uses a user who has a different view and that functionality is not in the same place. For example, that functionality is still in the sidebar but the item is called something different.

In this case, should i define 2 fixtures, for example:

export type pages = {
    functionality_view1: Functionality,
    functionality_view2: Functionality,

}

export const base = test.extend<pages>({
    functionality_view1: async ({ page }, use) => {
        const func = new Functionality(page);
        await func.navigateTo("view1")

        await use(func);

        // Closing context
        await page.close()
    },
    functionality_view2: async ({ page }, use) => {
        const func = new Functionality(page);
        await func.navigateTo("view2")

        await use(func);

        // Closing context
        await page.close()
    }
});

But this is not cool.. Is there a way to parameterize the fixtures? like passing a parameter from the test?

Answer 1

What you're looking for might be fixture options. Fixture options work similarly to fixtures but are based on values. They enable to define params that are configurable via project config or test.use().

Here's the example from the Playwright docs.

export const test = base.extend<MyOptions & MyFixtures>({
  // Define an option and provide a default value.
  // We can later override it in the config.
  defaultItem: ['Something nice', { option: true }],

  // Our "todoPage" fixture depends on the option.
  todoPage: async ({ page, defaultItem }, use) => {
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo(defaultItem);
    await use(todoPage);
    await todoPage.removeAll();
  },
});

---

In your case, you could make the view configurable and use it in your fixtures.

export const base = test.extend<pages>({
  // define the default `view` option
  view: ['view1', { option: true }],
  functionality_view: async ({ page, view }, use) => {
    const func = new Functionality(page);
    await func.navigateTo(view)

    await use(func);

    // Closing context
    await page.close()
  }
});

You can then configure view with test.use().

test.describe('', () => {
  test.use({ view: "someotherview" })
  test('', async ({ functionality }) => {
    // ...
  })
})