React旧项目无可靠HTML属性，如何编写稳定的Playwright测试

针对你在React旧项目中编写Playwright E2E测试遇到的元素定位问题，这里给出几个落地性强的方案：

1. 规范data-testid命名，确保唯一性 #

不要用泛化的label-span这类testid，而是采用**「模块-功能-元素类型/标识」**的命名规则，让每个元素的testid唯一：

• 比如学习率对应的文本span，命名为model-param-learning-rate-label
• 批量大小的输入框，命名为model-param-batch-size-input

在React代码里，直接给目标元素绑定唯一testid：

<div data-testid="model-param-learning-rate-label">Learning Rate</div>

测试时直接通过唯一testid定位，完全不需要过滤：

await page.getByTestId('model-param-learning-rate-label').innerText();

这种方式彻底避免了同属性重复、过滤逻辑失效的问题。

2. 用「容器testid + 文本/关联元素」替代复杂结构选择器 #

对于还没来得及加唯一testid的元素，放弃nth-child这类依赖DOM结构的选择器，改用父容器testid + 文本过滤的组合定位：
比如你之前的复杂选择器，可以改成：

// 先定位父容器，再找包含目标文本的子容器，最后取span
await page.getByTestId('model-params-editor')
  .locator('div', { hasText: 'Learning Rate' })
  .locator('span')
  .innerText();

只要父容器的testid不变，且目标文本未修改，即使DOM结构调整（比如增加/减少嵌套div），定位依然有效。

如果文本重复，还可以结合关联元素过滤，比如要找“保存”按钮，它在表单底部容器里：

// 先定位底部容器，再找文本为保存的元素
await page.getByTestId('model-form-footer').getByText('Save').click();
// 或者用filter结合关联元素
await page.getByText('Save').filter({ has: page.getByTestId('model-form-footer') }).click();

这种方式通过上下文容器限定范围，不会因为其他同文本元素的增减而失效。

3. 给自定义元素补全ARIA Role，增强定位灵活性 #

对于用div模拟的按钮、输入框等元素，补全role属性，同时搭配testid双重保障：

<div role="button" data-testid="submit-model-btn">提交</div>
<input role="textbox" data-testid="model-name-input" />

这样既可以用testid精准定位，也可以用Playwright的getByRole方法：

// 两种方式都能定位，增加容错性
await page.getByRole('button', { name: '提交' }).click();
await page.getByTestId('submit-model-btn').click();

对于旧项目，可以优先给测试中频繁用到的自定义元素补全role，逐步提升可测试性。

4. 列表类元素用动态生成的唯一testid #

针对重复出现的列表项（比如参数列表），在React中根据项的唯一标识动态生成testid：

{params.map(param => (
  <div key={param.id} data-testid={`model-param-item-${param.name}`}>
    <span>{param.name}</span>
    <input value={param.value} />
  </div>
))}

测试时直接通过动态生成的testid定位目标项：

// 定位学习率对应的列表项
const learningRateItem = page.getByTestId('model-param-item-LearningRate');
// 获取项内的文本或操作输入框
await learningRateItem.locator('span').innerText();
await learningRateItem.locator('input').fill('0.01');

这种方式完全不需要依赖列表顺序，即使列表项顺序调整，定位依然稳定。

内容的提问来源于stack exchange，提问作者utkarsh-k