Phantom js 从外部站点中选取一个元素

Question

我有一个 Phantom JS 脚本，它监视一些外部页面。基本上它只是像这样从这个页面获取状态（打字稿代码）：

const status: string = await page.evaluate(function() {
      return document.getElementsByClassName("status-containing-element")[0].innerHTML;
});

在某些情况下，此元素可能不会在网站上显示，然后我的脚本假定该网站当前不可用。问题是，如果 status-containing-element class 名称将更改，我的脚本将始终认为该站点不可用，直到我注意到 class名称已更改。作为一种解决方案，我尝试使用 phantom 截取页面屏幕截图并检查其中的一部分以确定页面状态，但这对我来说似乎是一种开销。

有什么better/common方法可以避免此类问题，例如自动检测站点结构变化或类似的东西？

Answer 1

除了 class 名称之外，我建议使用 querySelector() 来查询特定的选择器。通常 class 名称可以更改，而一般页面结构保持不变。例如，考虑这样的事情：

document.querySelector('#container > div > div > ul > li:nth-child(2) > span > a');

要查看代表您的元素的选择器是什么，您可以使用 Chrome 开发人员工具：在 "Elements" 菜单中找到它（右键单击 -> 检查），右键单击其代码，复制-> 选择器。然后，您可以过滤 class 名称，如果它们经常更改以仅保留结构。

另请注意，在您的代码中，您检索了多个元素，然后取第一个元素 ([0])，而 querySelector() 将 return 一个项目。如果您需要所有选择器，请使用 querySelectorAll().

Phantom js 从外部站点中选取一个元素

Phantom js picking an element from external site

javascript

phantomjs

monitoring

detection