Shadow DOM 的类型

1. open 模式（你遇到的是这种）

const shadow = element.shadowRoot;  

2. closed 模式

const shadow = element.shadowRoot;  

为什么你的 Playwright 代码能工作？

为什么 XPath 不行？

如何识别 Shadow DOM？

在 Chrome 开发者工具中：

1. 看到 #shadow-root 就表示有 Shadow DOM

<my-component>
    ▼ #shadow-root (open)
        <div class="internal">内容</div>
    <div class="external">外部内容</div>
</my-component>

2. 元素面板中会有特殊的标记

   • #shadow-root 条目

   • 灰色背景的区域

操作 Shadow DOM 的方法

1. Playwright（最简单）

2. Selenium（需要 JavaScript）

3. JavaScript（原生）

总结

Shadow DOM = 网页组件的小黑盒 🔲

• ✅ 优点：隔离、封装、可复用

• ❌ 缺点：外部访问需要特殊方法

• 🔑 关键：需要工具/框架支持才能方便操作

这就是为什么你的 Playwright 代码能工作，而普通的 XPath 不行——因为 Playwright 内置了打开这个"小黑盒"的能力！

selector="button:has-text('版本') >> nth=0" 能工作？

1. Playwright 的 Selector 引擎穿透 Shadow DOM

Playwright 的 selector 语法内置了对 Shadow DOM 的支持！当你在 Playwright 中使用 CSS 选择器时，它会自动穿透 Shadow DOM 边界。

2. :has-text() 伪类

这是 Playwright 特有的伪类，可以在任何元素上根据文本内容匹配：

• :has-text('版本') 匹配任何包含"版本"文本的元素

• 比 XPath 的 contains(text(),'版本') 更强大

3. >> 组合器

Playwright 的 >> 是一个强大的组合器，可以：

• 穿透 Shadow DOM 边界

• 组合不同的选择器策略

• 在 iframe 之间导航

4. nth=0 索引

选择匹配到的第0个（第一个）元素，避免多个匹配的问题。

Playwright Selector 方式

Playwright Selector 的强大特性