如何使用Playwright与TypeScript处理动态自定义表单字段？

针对后端动态生成的文本框、复选框、下拉框等字段，核心思路是基于DOM结构的通用规则批量识别+数据驱动匹配，以下是具体实现方案：

1. 定位统一的字段容器 #

动态字段通常会被包裹在具有统一类名/属性的父容器中，先获取所有字段容器的列表，避免逐个定位的麻烦：

// 假设所有动态字段都在class为custom-field-group的容器下，每个字段是.field-item
const fieldContainers = await page.locator('.custom-field-group .field-item').all();

2. 提取字段的唯一标识 #

优先依赖后端渲染时嵌入的data-*属性（比如data-field-key）作为字段的唯一标识，比解析label文本更可靠：

for (const container of fieldContainers) {
  // 获取后端定义的字段标识
  const fieldKey = await container.getAttribute('data-field-key');
  if (!fieldKey) continue; // 跳过无标识的字段
}

如果没有data-*属性，再退而求其次解析字段的label文本：

const labelText = await container.locator('label').textContent();
const fieldKey = labelText?.trim();

3. 识别控件类型并执行对应操作 #

针对不同控件类型，在容器内定位对应的元素并执行操作，结合测试数据驱动完成填充：

示例：完整的批量处理逻辑 #

// 测试数据：键为字段标识，值为对应操作内容
const testData = {
  "user_real_name": "John Doe",
  "subscribe_newsletter": true,
  "preferred_language": "English",
  "remarks": "Automated test via Playwright"
};

const fieldContainers = await page.locator('.custom-field-group .field-item').all();

for (const container of fieldContainers) {
  const fieldKey = await container.getAttribute('data-field-key');
  if (!fieldKey || !testData.hasOwnProperty(fieldKey)) continue;

  // 处理文本框/文本域
  const textInput = container.locator('input[type="text"], textarea');
  if (await textInput.count() > 0) {
    await textInput.fill(testData[fieldKey] as string);
    continue;
  }

  // 处理复选框
  const checkbox = container.locator('input[type="checkbox"]');
  if (await checkbox.count() > 0) {
    const shouldCheck = testData[fieldKey] as boolean;
    shouldCheck ? await checkbox.check() : await checkbox.uncheck();
    continue;
  }

  // 处理原生下拉框
  const select = container.locator('select');
  if (await select.count() > 0) {
    await select.selectOption({ label: testData[fieldKey] as string });
    continue;
  }

  // 处理自定义下拉框（非原生select）
  const dropdownTrigger = container.locator('.custom-dropdown-trigger');
  if (await dropdownTrigger.count() > 0) {
    await dropdownTrigger.click();
    // 匹配选项文本并点击
    const targetOption = container.locator(`.dropdown-option:text("${testData[fieldKey]}")`);
    await targetOption.click();
  }
}

4. 优化与注意事项 #

• 等待字段加载完成：动态字段可能异步渲染，可在获取容器前添加等待逻辑：

  await page.waitForSelector('.custom-field-group .field-item', { state: 'visible' });
  

• 处理必填字段：可通过容器上的required类或data-required属性识别，确保必填字段都被填充：

  const isRequired = await container.getAttribute('data-required') === 'true';
  

• 调试日志：添加日志方便排查问题：

  console.log(`Processed field: ${fieldKey} with value: ${testData[fieldKey]}`);
  

• 兼容特殊控件：如果有日期选择器、文件上传等特殊控件，可在循环中增加对应的识别和处理分支。

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