typescript - 使用 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