CODEWITHSUNDEEP
typescriptplaywrightplaywright-test
Twisted Whisper
Twisted Whisper

Reputation: 1206

Using multiple test fixtures in a single test with Playwright

// foo.ts
import { test as base } from "@playwright/test";

const test = base.extend<{foo: string}>({
    foo: "hello"
});

export { test };

// bar.ts
import { test as base } from "@playwright/test";

const test = base.extend<{bar: string}>({
    bar: "bye"
});

export { test };

// index.ts
import { test } from /* BOTH_FOO_AND_BAR??? */;

test("Basic test", async ({ foo, bar }) => { // <-- I want to be able to use both foo and bar fixture here
    console.log(foo);
    console.log(bar);
});

Can the above be achieved? Or do I have to have one depends on the other like this?

// bar.ts
import { test as base } from "./foo";

// index.ts
import { test } from "./bar";

This will create a long chain if I have many files and importing the last file would import all of them. I would prefer pick and match if it is at all possible.

Upvotes: 7

Views: 9027

Answers (2)

pbaranski
pbaranski

Reputation: 25062

From Playwright 1.39 you can simply merge fixtures https://playwright.dev/docs/release-notes#merge-test-fixtures

fixtures.ts

import { mergeTests } from '@playwright/test';
import { test as dbTest } from 'database-test-utils';
import { test as a11yTest } from 'a11y-test-utils';

export const test = mergeTests(dbTest, a11yTest);

test.spec.ts

import { test } from './fixtures';

test('passes', async ({ database, page, a11y }) => {
  // use database and a11y fixtures.
});

Upvotes: 7

senaid
senaid

Reputation: 650

I suggest grouping fixtures into one file:

// fixtures.ts
import { test as base } from "@playwright/test";

const test = base.extend<{
   foo: string;
   bar: string;

}>({
    foo: "hello",
    bar: "bye"

});
export default test;
export const expect = test.expect;

Then You can import both:

// index.ts
import test, { expect } from "./fixtures";

test("Basic test", async ({ foo, bar }) => { // <-- I want to be able to use both foo and bar fixture here
    console.log(foo);
    console.log(bar);
});

Additional note that could be useful You can chain fixtures here instead of doing that in tests:

// fixtures.ts
import { test as base } from "@playwright/test";
import { MainPage } from "./main-page";
import { FirstPage } from "./firstPage";

const test = base.extend<{
   mainPage: MainPage;
   firstPage: FirstPage;

}>({
    mainPage: async ({ page, baseUrl }, use) => {  //Assuming your mainPage constructor accepts page fixture and baseUrl
    // Some steps to open mainPage
    await use(mainPage);
    },
    firstPage: async ( {mainPage}, use) => {  //Assuming firstPage constructor accepts page fixture
    //do some steps 
    await use(firstPage);
    }

});
export default test;
export const expect = test.expect;

Then You can simply use only first Page without have to write steps for main page, but also mainPage or any other fixture will be avaiable.

// index.ts
import test, { expect } from "./fixtures";

test("Basic test", async ({ firstPage }) => { 
  //do steps
});

Another example from playwright: https://playwright.dev/docs/next/test-fixtures#creating-a-fixture

Upvotes: 3

Related Questions