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


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.

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.