如何用Playwright定位关联特定文本的指定testid的div元素

要定位关联“Internal Description”的data-testid="rich-text-editor"元素，你可以使用以下几种Playwright定位方式：

方法1：利用父容器层级定位 #

先找到包含目标文本的元素，回到其共同父容器后，再定位内部的编辑器元素：

await page.getByText('Internal Description')
  .locator('..') // 回到包含文本和编辑器的父div
  .getByTestId('rich-text-editor');

方法2：使用XPath精准匹配 #

通过XPath直接筛选父容器包含指定文本的目标元素：

await page.locator('//div[div[text()="Internal Description"]]//div[@data-testid="rich-text-editor"]');

如果文本可能包含空格或换行，可改用contains进行模糊匹配：

await page.locator('//div[contains(div, "Internal Description")]//div[@data-testid="rich-text-editor"]');

方法3：通过filter筛选元素 #

对所有匹配rich-text-editor的元素进行过滤，只保留祖先容器包含目标文本的那个：

await page.getByTestId('rich-text-editor')
  .filter({ hasAncestor: page.locator('div:has-text("Internal Description")').locator('..') });

内容的提问来源于stack exchange，提问作者one-hand-octopus