如何优化Playwright中基于指定文本元素的缩略图定位器？

原实现通过xpath=../../..回溯DOM层级来定位关联元素，这种方式依赖固定的DOM结构，一旦页面结构调整（比如新增/删除嵌套层级），定位就会失效，不够健壮。以下是几种更符合Playwright最佳实践的优化方案：

方案一：使用filter方法筛选目标行（推荐） #

利用filter方法直接筛选出包含目标文本的表格行，再在该行内定位缩略图，完全不依赖DOM层级：

public getThumbnailForTableRowName(tableRowName: string): Locator {
  return this.page.getByTestId('test-element-table-row')
    .filter({ hasText: tableRowName })
    .getByTestId('thumbnail-image');
}

优势：

• 代码简洁直观，逻辑清晰
• 仅依赖data-test-id和文本内容，不绑定DOM结构，页面调整后只要测试标识和文本不变，定位依然有效
• 符合Playwright优先使用测试属性和语义化定位的最佳实践

方案二：使用has方法匹配包含目标文本的行 #

通过has方法校验表格行是否包含指定的文本元素，再定位缩略图：

public getThumbnailForTableRowName(tableRowName: string): Locator {
  const targetTextLocator = this.page.getByText(tableRowName, { exact: true });
  return this.page.getByTestId('test-element-table-row')
    .has(targetTextLocator)
    .getByTestId('thumbnail-image');
}

优势：

• 与方案一逻辑类似，同样不依赖DOM层级
• 适合需要更精确控制文本元素定位的场景（比如文本元素有特殊匹配规则）

方案三：使用健壮的XPath定位（备选） #

如果必须使用XPath，避免固定层级的回溯，改用基于属性的祖先查找：

public getThumbnailForTableRowName(tableRowName: string): Locator {
  return this.page.getByText(tableRowName, { exact: true })
    .locator('xpath=ancestor::div[@data-test-id="test-element-table-row"]')
    .getByTestId('thumbnail-image');
}

优势：

• 相比../../..，通过ancestor结合data-test-id查找祖先元素，即使中间层级变化，只要祖先的测试ID不变，定位依然有效
• 保留了XPath的灵活性，但比固定层级写法更健壮

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