在 Playwright 的單個測試中使用多個測試夾具

Question

// 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);
});

以上能實現嗎？ 還是我必須像這樣依賴另一個？

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

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

如果我有很多文件並且導入最后一個文件將導入所有文件，這將創建一個長鏈。 如果可能的話，我更喜歡挑選和匹配。

Answer 1

我建議將燈具分組到一個文件中：

// 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;

然后你可以同時導入：

// 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);
});

可能有用的附加說明您可以在此處鏈接固定裝置，而不是在測試中這樣做：

// 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;

然后你可以簡單地只使用第一頁，而不必為主頁編寫步驟，而且 mainPage 或任何其他固定裝置都可以使用。

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

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

劇作家的另一個例子： https://playwright.dev/docs/next/test-fixtures#creating-a-fixture