如何在Playwright中使用Locator方法处理动态UI-ID？

动态生成的UI-ID（比如#ui-id-4、#ui-id-5）会随页面加载、组件渲染顺序变化而改变，依赖这类属性编写测试用例极易出现不稳定问题，以下是几个可靠的替代方案：

• 优先使用语义化/测试专用属性
  放弃依赖动态ID，转而使用页面中稳定的语义化属性（如aria-label、role）或专门为测试添加的自定义属性（如data-testid）。若页面存在多个"Add"按钮，结合它们所在的稳定上下文容器缩小定位范围：

  // 假设按钮位于带有稳定data-testid的容器内
  await page.locator('[data-testid="product-card"]').getByLabel('Add').first().click();
  await page.locator('[data-testid="product-card"]').getByLabel('Add').nth(1).click();
  
  // 若有权限修改页面，给按钮添加测试属性更可靠
  // 页面端：<button data-testid="add-product-btn" aria-label="Add">Add</button>
  // 测试端：
  await page.getByTestId('add-product-btn').first().click();
  await page.getByTestId('add-product-btn').nth(1).click();
  

• 基于上下文的相对定位
  利用按钮周围的静态文本、稳定组件作为定位锚点，通过相对路径找到目标按钮。比如按钮在某个商品名称的下方：

  // 先定位静态文本，再找其父容器内的Add按钮
  await page.getByText("Product A").locator('..').getByLabel('Add').click();
  await page.getByText("Product B").locator('..').getByLabel('Add').click();
  

• 批量处理多个相同按钮
  如果需要点击所有"Add"按钮，直接定位所有匹配元素后遍历操作，无需关心动态ID：

  const addButtons = page.getByLabel('Add');
  const buttonCount = await addButtons.count();
  
  for (let i = 0; i < buttonCount; i++) {
    await addButtons.nth(i).click();
  }
  

• 万不得已才用索引（需谨慎）
  如果以上方法都不可行，再考虑用索引定位，但要结合其他稳定条件缩小范围，避免因页面结构变动导致索引失效：

  // 仅在按钮上下文稳定时使用
  await page.getByLabel('Add').nth(0).click();
  await page.getByLabel('Add').nth(1).click();
  

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