如何仅选择Playwright定位器的直接子元素？

要仅获取.foo定位器对应元素的直接子<div>，你需要结合CSS的:scope伪类和直接后代选择器>，写法如下：

const locator = page.locator('.foo');
const directChildDivs = locator.locator(':scope > div');

为什么之前的写法无效？ #

• 直接用locator.locator('div')会匹配所有后代<div>，包括孙元素、曾孙元素，这是后代选择器的默认行为。
• 单独用locator.locator('>div')无效，是因为Playwright没有明确将当前定位器的元素作为选择上下文，导致选择器无法正确限定到直接子元素。

:scope伪类的作用是明确以当前定位器对应的元素作为选择的根节点，再配合>选择器，就能精准匹配它的直接子<div>，不会包含更深层级的后代元素。

另外还有一种替代写法，用filter方法结合父元素定位器，但相对繁琐：

const directChildDivs = page.locator('div').filter({ hasParent: page.locator('.foo') });

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