Playwright Or定位器提取首个结果文本异常原因及修复方案

你使用的.or()定位器会同时匹配两类元素：第一种HTML结构下匹配.foo元素；第二种结构下会同时匹配.foo > .bar子元素和.foo父元素。First方法会选取DOM中出现顺序更早的元素——也就是.foo父元素，它的InnerText会包含所有子元素的文本内容，自然就带上了.baz里的world，导致返回结果包含多余内容。

有两种可靠的修复方式：

方式一：用复合CSS选择器精准覆盖两种场景 #

直接通过CSS选择器逻辑同时适配两种HTML结构，无需依赖.or()：

await page.Locator(".foo > .bar, .foo:not(:has(> .bar))").First.InnerTextAsync();

该选择器的逻辑是：优先匹配.foo下的.bar子元素；如果.foo没有.bar子元素，则直接匹配.foo本身。不管哪种结构，都能精准定位到目标文本所在的元素。

方式二：分情况判断元素存在性 #

先检查.bar元素是否存在，存在则取它的文本，否则取.foo的文本：

var barLocator = page.Locator(".foo > .bar");
string targetText;

if (await barLocator.IsVisibleAsync())
{
    targetText = await barLocator.InnerTextAsync();
}
else
{
    targetText = await page.Locator(".foo").InnerTextAsync();
}

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