我是否需要无头浏览器来抓取 CSS 属性

Question

我的目标是从网页中提取特定的CSS属性值。我已经使用Guzzle和Symfony的css选择器设置了一个抓取器。但是，我已经意识到css选择器的工作方式与jQuery不同，据我所知，没有.attr()方法。

我是否正确地认为我需要使用无头浏览器、貂皮、无头铬、幻影.js来呈现页面，然后找到属性？

Answer 1

PhantomJS(http://phantomjs.org/)是一个很好的，我用它来进行单元测试。

Chrome 刚刚在 v59 中发布了以无头模式运行浏览器的功能。 但是，它确实适用于Windows。

Headless Chrome 在 Chrome 59 中发布。这是运行Chrome的一种方式 无头环境中的浏览器。从本质上讲，在没有的情况下运行Chrome 铬！它带来了由 Chromium 和 Blink 渲染引擎到命令行。

为什么有用？

无头浏览器是自动化测试和服务器的绝佳工具 不需要可见 UI 外壳的环境。例如，您 可能想对真实网页运行一些测试，创建一个 PDF 它，或者只是检查浏览器如何呈现 URL。

注意：无头模式在 Chrome 59 的 Mac 和 Linux 上可用。 Windows支持将在Chrome 60中推出。检查哪个版本的 您拥有的 Chrome，请打开 chrome://version。

您可以在此处找到更多信息：https://developers.google.com/web/updates/2017/04/headless-chrome

Answer 2

Mink 是一个不错的选择，因为它提供的 API 以及它允许与多个驱动程序(goutte、gecko/firefox 等)交互的功能。

如果生成的 css 没有被 javascript 修改，mink+goutte 可能是最好的选择，但如果 css 被 javascript 以某种方式修改，mink+selenium 配置可能是最好的(或 mink+zombie)。请记住，第二种方法比"痛风"方法更难设置且速度慢。

你访问 dom 的方式与 jQuery 不同，但选择器大致相同，事实上 mink 为您提供了 4 种类型的选择器。

你几乎可以使用"xpath"选择器做所有事情。我还建议考虑"css"+NodeElement方法，因为它更简单，在大多数情况下都有帮助。

在这里，您是基于维基百科的一个例子，有两种方法：

想象一下，你去 wikiperia.org，你想保留英文条目链接：

$xPath = '//a[@id="js-link-box-en"]/@href';
$nodeElement = $this->getSession()->getPage()->find('xpath', $xPath);
$theHrefValue = $nodeElement->getText();

或者：

$nodeElement = $this->getSession()->getPage()->find('css', '#js-link-box-en')
$theHrefValue = $nodeElement->getAttribute('href');

我希望它能帮助您做出决定:)