如何在Playwright中实现对话框与表格的可复用测试用例？

核心问题原因 #

Playwright的测试运行器依赖静态分析识别测试用例，它会在执行代码前扫描所有test和test.describe定义。如果把test放在动态调用的异步函数里，运行器无法提前扫描到这些测试，自然识别不了。

正确实现方案 #

我们可以把测试逻辑拆成两层：

1. 底层封装通用的对话框操作/断言函数
2. 同步的测试生成函数，在模块顶级调用，让Playwright能静态扫描到所有测试用例

第一步：封装通用对话框工具函数

把重复的操作逻辑提取到单独的工具文件（比如dialogTestUtils.ts），方便复用：

// dialogTestUtils.ts
import { Page } from '@playwright/test';

export async function DialogCloseWithNoInput({ page, submitButtonName }: { page: Page; submitButtonName: string }) {
  // 具体操作逻辑：打开对话框后直接提交，验证对话框关闭
  await page.getByRole('button', { name: submitButtonName }).click();
  await expect(page.getByRole('dialog')).not.toBeVisible();
}

export async function DialogNotCloseWithInput({ inputName, page, submitButtonName }: { inputName: string; page: Page; submitButtonName: string }) {
  // 具体操作逻辑：输入内容后提交，验证对话框仍显示
  await page.getByLabel(inputName).fill('测试输入');
  await page.getByRole('button', { name: submitButtonName }).click();
  await expect(page.getByRole('dialog')).toBeVisible();
}

export async function DialogAlertDialogOpenBehavior({ inputName, page, submitButtonName }: { inputName: string; page: Page; submitButtonName: string }) {
  // 具体操作逻辑：输入无效内容提交，验证警告弹窗打开
  await page.getByLabel(inputName).fill('');
  await page.getByRole('button', { name: submitButtonName }).click();
  await expect(page.getByRole('alertdialog')).toBeVisible();
}

export async function DialogAlertDialogCloseBehavior({ inputName, page, submitButtonName }: { inputName: string; page: Page; submitButtonName: string }) {
  // 具体操作逻辑：打开警告弹窗后关闭，验证对话框回到初始状态
  await page.getByLabel(inputName).fill('');
  await page.getByRole('button', { name: submitButtonName }).click();
  await page.getByRole('button', { name: '确定' }).click();
  await expect(page.getByRole('alertdialog')).not.toBeVisible();
  await expect(page.getByLabel(inputName)).toHaveValue('');
}

第二步：编写测试生成函数并在模块顶级调用

在你的.spec文件里，创建同步的测试生成函数，直接在模块顶级调用，让Playwright静态扫描到所有测试用例：

// your-test-file.spec.ts
import { test } from '@playwright/test';
import { 
  DialogCloseWithNoInput, 
  DialogNotCloseWithInput, 
  DialogAlertDialogOpenBehavior, 
  DialogAlertDialogCloseBehavior 
} from './dialogTestUtils';
import { en } from './locales';

// 同步的测试生成函数，负责创建测试套件结构
function checkDialogDefaultBehavior(describeName: string, testParams: { submitButtonName: string; inputName: string }) {
  test.describe(describeName, () => {
    test('无输入时提交可关闭对话框', async ({ orgManagementPage }) => {
      await DialogCloseWithNoInput({ 
        page: orgManagementPage, 
        submitButtonName: testParams.submitButtonName 
      });
    });

    test('有输入时提交不关闭对话框', async ({ orgManagementPage }) => {
      await DialogNotCloseWithInput({ 
        inputName: testParams.inputName, 
        page: orgManagementPage, 
        submitButtonName: testParams.submitButtonName 
      });
    });

    test('提交空内容会打开警告弹窗', async ({ orgManagementPage }) => {
      await DialogAlertDialogOpenBehavior({ 
        inputName: testParams.inputName, 
        page: orgManagementPage, 
        submitButtonName: testParams.submitButtonName 
      });
    });

    test('关闭警告弹窗后对话框保持初始状态', async ({ orgManagementPage }) => {
      await DialogAlertDialogCloseBehavior({ 
        inputName: testParams.inputName, 
        page: orgManagementPage, 
        submitButtonName: testParams.submitButtonName 
      });
    });
  });
}

// 在模块顶级调用生成函数，Playwright能直接扫描到所有测试用例
checkDialogDefaultBehavior('创建组织对话框默认行为', {
  submitButtonName: '提交',
  inputName: en.name
});

// 如果还有其他对话框需要测试，直接调用生成函数即可
checkDialogDefaultBehavior('编辑用户对话框默认行为', {
  submitButtonName: '保存',
  inputName: en.username
});

关键注意事项 #

• 必须在模块顶级调用生成函数：不能把生成函数放在test、test.describe或异步函数内部，否则Playwright的静态扫描器无法识别测试用例。
• 不要用异步函数生成测试：Playwright加载文件时会同步扫描所有测试定义，异步生成的测试会被遗漏。
• 移除eslint禁用注释：工具函数里已经包含expect断言，不需要再禁用playwright/expect-expect规则。

内容的提问来源于stack exchange，提问作者TeePlunder