网站可以阻止您在其页面上使用 CSS 选择器吗？

Posted 2023-02-19

【中文标题】网站可以阻止您在其页面上使用 CSS 选择器吗？

【英文标题】：Can a site stop you from using css selectors on their pages?

【发布时间】：2022-01-23 22:15:10

【问题描述】：

我正在寻找使用 Puppeteer 并希望使用 CSS 选择器来识别页面上的元素。

在 W3Schools（和所有其他）上，这可以正常工作，您可以在屏幕截图的左侧看到

但在 EA（屏幕截图右侧）我无法选择任何元素

在这两个页面上，我都通过输入和 id 进行搜索。它适用于 W3Schools，但当我在 EA 上尝试时没有返回任何内容

我做错了什么还是 EA 可能限制任何人这样做？如果是这样，他们是如何做到的？有没有办法解决它？

链接：

https://www.w3schools.com/cs-s-ref/css_selectors.asp https://www.ea.com/games/fifa/pro-clubs/ps4-xb1-pc/rankings#platform=ps4

【问题讨论】：

在开发控制台中查看“shadow-root (open)”。这就是为什么。您尝试访问的元素位于 Shadow DOM 中。

你可以试试这个答案：***.com/a/54077446/4074148

@Veve 谢谢这就是我想要的。很高兴从 Alohci 和 Tomas 那里知道为什么我不能轻易刮擦，但我想知道如何绕过它。我会给出答案的

【参考方案1】：

从代码看来，EA 网站是使用 Web 组件创建的，而您尝试访问的部分代码位于 Shadow DOM 中。

引用Wikipedia:

Shadow DOM 是一种允许 Web 浏览器呈现的功能 DOM 元素，无需将它们放入主文档 DOM 树中。

这就是你的 XPath 找不到它的原因。