Creating fixtures with Playwright is a simple process that can greatly enhance

Question

Creating fixtures with Playwright is a simple process that can greatly enhance

I have a requirement to set up fixtures where the first fixture is always available (acting as a base class) and the second fixture will vary in different test files (like a derived class). I've implemented the following code which seems to be working as expected. Just wondering if this approach is acceptable or if there are better options out there?

//baseFixture.js
import { test as base} from '@playwright/test';
interface MyFixtures {
  fixture1: string;
}

export const test = base.extend<MyFixtures>({
  fixture1: "fixture-one"
}, );

//derivedFixture.js

import {test as test1} from 'baseFixture'
interface MyFixtures2 {
  fixture2: string;
}

export const test = test1.extend<MyFixtures2>({
  fixture2: "fixture-two"
}, );


//in test_file.js

import {test} from 'derivedFixture'

  test('should allow me use composed fixture', async ({ page, fixture1, fixture2 }) => {
     console.log(`from first fixture ${fixture1}`)
     console.log(`from second fixture ${fixture2}`)
  });

typescript playwright playwright-test

Answer 1

Answer №1

It appears that you may be utilizing fixtures like POMs and possibly overcomplicating your tests. If this approach suits your needs and aligns with your goals, then go ahead and use it. If my assumption is accurate, instead of passing fixtures to another fixture, consider passing POMs. You can even perform steps here to ensure a certain state is achieved for the page, as shown in this example from the playwright page:

// my-test.js
const base = require('@playwright/test');
const { TodoPage } = require('./todo-page');
const { SettingsPage } = require('./settings-page');

// Extend base test by providing "todoPage" and "settingsPage".
// This new "test" can be used in multiple test files, and each of them will get the fixtures.
exports.test = base.test.extend({
  todoPage: async ({ page }, use) => {
    // Set up the fixture.
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo('item1');
    await todoPage.addToDo('item2');

    // Use the fixture value in the test.
    await use(todoPage);

    // Clean up the fixture.
    await todoPage.removeAll();
  },

  settingsPage: async ({ page }, use) => {
    await use(new SettingsPage(page));
  },
});
exports.expect = base.expect;

In your test, simply pass {todoPage} or {settingsPage}, or both:

const { test, expect } = require('./my-test');

test.beforeEach(async ({ settingsPage }) => {
  await settingsPage.switchToDarkMode();
});

test('basic test', async ({ todoPage, page }) => {
  await todoPage.addToDo('something nice');
  await expect(page.locator('.todo-item')).toContainText(['something nice']);
});

You can also chain your fixtures and reuse them. For example, you could pass todoPage to the settingsPage fixture:

  settingsPage: async ({ todoPage}, use) => {
    await use(new SettingsPage(page));
  },

This way, everything in todoPage will be executed before settingsPage, and this combined fixture is what you pass to your test, which I believe is what you were aiming for.

Answer 2

It appears that you may be utilizing fixtures like POMs and possibly overcomplicating your tests. If this approach suits your needs and aligns with your goals, then go ahead and use it. If my assumption is accurate, instead of passing fixtures to another fixture, consider passing POMs. You can even perform steps here to ensure a certain state is achieved for the page, as shown in this example from the playwright page:

// my-test.js
const base = require('@playwright/test');
const { TodoPage } = require('./todo-page');
const { SettingsPage } = require('./settings-page');

// Extend base test by providing "todoPage" and "settingsPage".
// This new "test" can be used in multiple test files, and each of them will get the fixtures.
exports.test = base.test.extend({
  todoPage: async ({ page }, use) => {
    // Set up the fixture.
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo('item1');
    await todoPage.addToDo('item2');

    // Use the fixture value in the test.
    await use(todoPage);

    // Clean up the fixture.
    await todoPage.removeAll();
  },

  settingsPage: async ({ page }, use) => {
    await use(new SettingsPage(page));
  },
});
exports.expect = base.expect;

In your test, simply pass {todoPage} or {settingsPage}, or both:

const { test, expect } = require('./my-test');

test.beforeEach(async ({ settingsPage }) => {
  await settingsPage.switchToDarkMode();
});

test('basic test', async ({ todoPage, page }) => {
  await todoPage.addToDo('something nice');
  await expect(page.locator('.todo-item')).toContainText(['something nice']);
});

You can also chain your fixtures and reuse them. For example, you could pass todoPage to the settingsPage fixture:

  settingsPage: async ({ todoPage}, use) => {
    await use(new SettingsPage(page));
  },

This way, everything in todoPage will be executed before settingsPage, and this combined fixture is what you pass to your test, which I believe is what you were aiming for.

Answer 3

Answer №2

To increase efficiency, I implement the base fixture as a dependent fixture within a derivative fixture:

import { test as base } from "@playwright/test"
interface MyFixtures1 {
    fixture1: string
}

export const testBase = base.extend<{}, MyFixtures1>({
    fixture1: [
        async ({}, use) => {
            console.log("fixture1 setup once per worker")
            use("one")
            console.log("fixture1 teardown once per worker")
        },
        { scope: "worker" }
    ]
})

interface MyFixtures2 {
    fixture2: string
}

export const test = testBase.extend<MyFixtures2>({
    fixture2: async ({ fixture1 }, use) => {
        console.log("fixture2 setup for each test")
        use(`two-${fixture1}`)
        console.log("fixture2 teardown for each test")
    },
})

test("should allow me use composed fixture", async ({ fixture1, fixture2 }) => {
    console.log(`from first fixture ${fixture1}`)
    console.log(`from second fixture ${fixture2}`)
})

test("should base", async ({ fixture1 }) => {
    console.log(`from first fixture ${fixture1}`)
})

test("should derived", async ({ fixture2 }) => {
    console.log(`from second fixture ${fixture2}`)
})

For additional details on utilizing fixtures, refer to the official documentation

Answer 4

To increase efficiency, I implement the base fixture as a dependent fixture within a derivative fixture:

import { test as base } from "@playwright/test"
interface MyFixtures1 {
    fixture1: string
}

export const testBase = base.extend<{}, MyFixtures1>({
    fixture1: [
        async ({}, use) => {
            console.log("fixture1 setup once per worker")
            use("one")
            console.log("fixture1 teardown once per worker")
        },
        { scope: "worker" }
    ]
})

interface MyFixtures2 {
    fixture2: string
}

export const test = testBase.extend<MyFixtures2>({
    fixture2: async ({ fixture1 }, use) => {
        console.log("fixture2 setup for each test")
        use(`two-${fixture1}`)
        console.log("fixture2 teardown for each test")
    },
})

test("should allow me use composed fixture", async ({ fixture1, fixture2 }) => {
    console.log(`from first fixture ${fixture1}`)
    console.log(`from second fixture ${fixture2}`)
})

test("should base", async ({ fixture1 }) => {
    console.log(`from first fixture ${fixture1}`)
})

test("should derived", async ({ fixture2 }) => {
    console.log(`from second fixture ${fixture2}`)
})

For additional details on utilizing fixtures, refer to the official documentation

Creating fixtures with Playwright is a simple process that can greatly enhance

Answer №1

Answer №2

Similar questions

Unable to programmatically uncheck a checkbox after it has been manually checked: Angular

Guide on navigating to a specific page with ngx-bootstrap pagination

Angular 13 implementation of a double-loop structure for fetching data from an API

TypeScript failing to correctly deduce the interface from the property

Unleashing the potential of an endless animation by incorporating pauses between each iteration

The identifier 'id' is not recognized within the 'never' type in Angular

How to access an element through the router-outlet in Angular 6?

Typescript with Angular: Despite having 7 values in the map, Map.get is returning undefined

The implementation of CommonJS modules allows for efficient modularization

The interconnectivity between ngAfterViewInit in Angular's LifeCycle and observables

Wondering how to implement HubSpot Conversations SDK in a Typescript/Angular application?

Setting default property values in a React component using Typescript

Unable to append item to document object model

Typescript is throwing an error with code TS2571, indicating that the object is of type 'unknown'

End the pipeline execution in a chain of RxJS observables

Yarn Plug'n'Play was unable to locate the module during the next build

Issue with closing the active modal in Angular TypeScript

Postgres Array intersection: finding elements common to two arrays

Postpone the initial click action triggered by the specified directive

Move information from one page to another