使用Playwright获取定位器紧邻兄弟元素遇超时，求可行方案

问题背景 #

给定如下DOM结构，需要定位文本为abc的元素的紧邻兄弟（即文本为123的.right标签）：

<div class="row">
  <label class="left">foo</label>
  <label class="right">bar</label>
  <label class="left">baz</label>
  <label class="right">qux</label>
  <label class="left">abc</label>         <!-- 已知元素 -->
  <label class="right">123</label>        <!-- 目标元素 -->
</div>

已尝试的两种写法均出现超时，且ElementHandle方案也未成功：

await page.Locator(".row").GetByText("abc").Locator("+ .right").InnerText();

await page.Locator(".row").Locator(":right-of(:text('abc'))").InnerTextAsync();

更新说明：已尝试Playwright的:right-of特殊语法，仍超时，该场景下常规方案无效，非重复问题。

可行解决方案 #

1. 精准CSS相邻兄弟选择器 #

问题大概率出在定位器精度上，比如GetByText("abc")可能匹配到非精确文本的元素，导致后续兄弟选择器失效。可以合并选择器并开启精确匹配：

// 合并选择器，直接定位目标元素
var targetText = await page.Locator(".row label.left:text-is('abc') + label.right").InnerTextAsync();

// 或分步骤定位，确保上下文准确
var abcLocator = page.Locator(".row").GetByText("abc", new() { Exact = true });
var targetLocator = abcLocator.Locator("+ .right");
var targetText = await targetLocator.InnerTextAsync();

text-is或Exact = true能确保只匹配文本完全为abc的元素，避免歧义导致的超时。

2. XPath 轴定位 #

XPath的following-sibling轴可以精准锁定紧邻的下一个兄弟元素，稳定性更高：

// 基础写法：定位abc的下一个兄弟label
var targetText = await page.Locator(".row").Locator("//label[text()='abc']/following-sibling::label[1]").InnerTextAsync();

// 更精确写法：指定class，避免匹配其他兄弟元素
var targetText = await page.Locator(".row").Locator("//label[@class='left' and text()='abc']/following-sibling::label[@class='right'][1]").InnerTextAsync();

3. 元素句柄+JS遍历 #

如果上述选择器仍有问题，可以通过JS直接获取下一个兄弟节点：

var abcElement = await page.Locator(".row").GetByText("abc", new() { Exact = true }).FirstAsync();
var targetElement = await abcElement.EvaluateHandle("el => el.nextElementSibling");
var targetText = await targetElement.InnerTextAsync();

这种方式绕开Playwright的定位器解析，直接通过DOM API获取节点，适合复杂场景。

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