How do I use one fixture within another fixture in Playwright?

Answer

To invoke a fixture from another fixture in @playwright/test, use the use() function within the setup or teardown function of the dependent fixture. This ensures that the dependent fixture is set up after its dependencies and teared down before them.

Here's an example using TypeScript:

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

const myFixture = test.extend({
  dependencyFixture: [async ({ page }, use) => {
    // dependencyFixture setup...
    await use();
    // dependencyFixture teardown...
  }],
  dependentFixture: [async ({ page, dependencyFixture }, use) => {
    // dependentFixture setup...
    await use();
    // dependentFixture teardown...
  }]
});

myFixture('My Test', async ({ page, dependentFixture }) => {
  await page.goto('https://ray.run/');
  // Your test code here...
});

In this example, dependentFixture depends on dependencyFixture. When setting up dependentFixture, it calls await use() to ensure that dependencyFixture is set up first. The fixtures are executed lazily, meaning they're only set up when needed by tests or hooks.

Remember that test-scoped fixtures are teared down after each test, while worker-scoped fixtures are teared down when the worker process executing tests is shut down.

By using test.extend() and await use(), you can easily invoke a fixture from another one in Playwright, ensuring proper execution order and dependency management.