javascript - Phantom js 从外部站点选取元素

Question

我有一个 Phantom JS 脚本，用于监视一些外部页面。基本上它只是从这个页面获取状态，如下所示( typescript 代码):

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

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

有没有更好/常见的方法来避免此类问题，例如自动检测网站结构变化或类似的事情？

Answer 1

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

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

要查看代表您的元素的选择器是什么，您可以使用 Chrome 开发者工具:在“元素”菜单中找到它(右键单击 -> 检查)，右键单击其代码，复制 -> 选择器。然后，如果类名经常更改，您可以过滤它们，仅保留结构。

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