是否可以在 Playwright 中创建自定义命令？

Question

我正在寻找一种在 Playwright 中编写自定义命令的方法，就像在 Cypress 中所做的那样。Playwright Issues 有一页与之相关，但我从未见过任何代码示例。

我正在研究一个测试用例，试图提高代码的可重用性。这是代码：

import { test, chromium } from '@playwright/test';

config();

let context;
let page;

test.beforeEach(async () => {
  context = await chromium.launchPersistentContext(
    'C:\\Users\\User\\AppData\\Local\\Microsoft\\Edge\\User Data\\Default',
    {
      headless: false,
      executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    }
  );

  page = await context.newPage();
  await page.goto('http://localhost:3000/');
});

test.afterEach(async () => {
  await page.close();
  await context.close();
});

test('Sample test', async () => {
  await page.click('text=Open popup');
  await page.click('_react=Button >> nth=0');
  await page.click('text=Close popup');
});

我正在尝试创建一个函数来调用钩子 test.beforeEach() 和 test.afterEach() 以及其中的代码。

在 Playwright Issue 页面中，它说我需要将其移动到单独的 Node 模块，然后我就可以使用它，但我很难理解如何做到这一点。

Answer 1

您给出的示例可以通过实现自定义夹具来解决。Fixtures 是 @playwright/test 定制/扩展测试框架的解决方案。您可以定义自己的对象（类似于浏览器、上下文、页面）并将其注入到测试中，以便测试可以访问它。但他们也可以在每次测试之前和之后做一些事情，例如设置前提条件和拆除它们。您还可以覆盖现有的灯具。

有关包括示例的更多信息，请查看此处： https: //playwright.dev/docs/test-fixtures