如何在剧作家中创作固定装置答案

【问题标题】：How to compose fixtures in playwright如何在剧作家中创作固定装置
【发布时间】：2022-11-17 06:43:07
【问题描述】：

我想组成固定装置。第一个夹具应该始终可用（将其视为基类）。第二个夹具在不同的测试文件中会有所不同（将其视为派生类）我尝试了以下代码，它按预期工作。可以采用这种方法还是有更好的选择？

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

【问题讨论】：

标签： playwright playwright-test

【解决方案1】：

在我看来，您正在使用 POM 之类的固定装置，并且您正在过度设计测试。如果它对你有用并且取决于你想要什么，那就使用它。如果我的假设是正确的，而不是通过 POM 将灯具传递给另一个灯具，您甚至可以在此处执行步骤以使该页面进入特定状态，这是剧作家页面的示例：

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

然后在您的测试中只需通过 {todoPage} or {settingsPage} 或两者：

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']);
});

你也可以在这里链接你的固定装置并重复使用它们，例如。您可以将 todoPage 传递给 settingsPage fixture：

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

这样，将执行 todoPage 中的所有内容，然后执行 settingsPage，这就是您传递给测试的内容，我想这就是您想要实现的目标。

【讨论】：

【解决方案2】：

我的方法是使用基础夹具作为派生夹具中的依赖夹具：

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}`)
})

更多关于如何使用固定装置的信息在docs

【讨论】：