Playwright测试中如何处理同名data-cy元素及动态ID问题

针对你遇到的多个textarea共享同一data-cy属性、ID动态变化的问题，完全不需要提前手动获取XPath/ID再分配标识，Playwright本身提供了更可靠的定位方案，具体如下：

1. 按索引精准定位单个元素 #

直接通过data-cy选择器结合索引，指定要操作的第N个元素（索引从0开始），绕过严格模式的多元素匹配报错：

// 定位第一个匹配的textarea
await page.locator('[data-cy="zusy_freier_text-TBX_TXT_E_FREIER_TEXT1_SLI-1"]').nth(0).fill('内容1');
// 定位第二个匹配的textarea
await page.locator('[data-cy="zusy_freier_text-TBX_TXT_E_FREIER_TEXT1_SLI-1"]').nth(1).fill('内容2');

2. 结合上下文缩小定位范围 #

如果这些textarea分别属于不同的父容器，先定位父元素，再在父元素的上下文内查找目标textarea，这样能避免跨容器的多元素匹配：

// 先定位第一个textarea的父容器（比如某个带唯一标识的div）
const container1 = page.locator('[data-cy="freier-text-container-1"]');
// 在父容器内查找目标textarea
await container1.locator('[data-cy="zusy_freier_text-TBX_TXT_E_FREIER_TEXT1_SLI-1"]').fill('内容');

3. 批量处理所有匹配元素 #

如果需要操作全部3个textarea，可以一次性获取所有匹配元素的列表，再逐个处理：

const textareas = await page.locator('[data-cy="zusy_freier_text-TBX_TXT_E_FREIER_TEXT1_SLI-1"]').all();
// 遍历所有textarea并执行操作
for (const [index, textarea] of textareas.entries()) {
  await textarea.fill(`第${index+1}个文本框内容`);
  // 可添加其他断言或操作
}

额外建议（若有权限修改前端） #

如果能控制被测页面的代码，建议给每个textarea的data-cy添加唯一后缀（比如zusy_freier_text-TBX_TXT_E_FREIER_TEXT1_SLI-1-0、...-1、...-2），从根源上避免多元素匹配问题，后续测试定位会更直观可靠。

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