Question

我正在尝试使用JavaScript自动执行某些任务。网站正在生成中，所以我不能使用CSS选择器，因为每次网站刷新时它们都会改变。它未在示例中显示，但可以通过按钮的文本内容来操作按钮（不幸的是，CSS无法获得按钮内容）。

我已经弄清楚了（由于StackOverflow）如何通过Xpath单击Web元素，但是仍然不知道如何告诉JS等待它出现。

点击元素的代码（有效）：

var xPathRes = document.evaluate ('//*[@id="tsf"]/div[2]/div/div[3]/center/input[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
xPathRes.singleNodeValue.click();

尝试等待元素出现，然后单击它（不起作用）：

var selector = "//*[@id='tsf']/div[2]/div/div[3]/center/input[1]";
var time = 500;
    if(document.evaluate (selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)) {
        selector.singleNodeValue.click();
        return;
        }
    else {
        setTimeout(function() {
        waitForElementToDisplay(selector, time);
        }, time);    
    }

您可以在示例中看到的代码是Google.com搜索按钮。

我一直使用Python Selenium来做这些事情，但是在这种情况下我确实不能。

PS。从已发布的代码可以明显看出，我很喜欢JS。

谢谢您的帮助！

编辑：

在@folo代码之后，我写了这样的东西：

var element = '//*[@id="tsf"]/div[2]/div/div[3]/center/input[1]';
(function checkIfElemExists() {
   if (!document.evaluate (element, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)) {
     console.log('nope')
     window.requestAnimationFrame(checkIfElemExists);
   } else {
     console.log('okay i exist now! lets do something.') 
   }
 })()

问题是它总是返回“好吧，我现在已经存在！）。即使我在不包含此元素的网站上运行它，也是如此。

Answer 1

如果我对您的理解正确，那么您想确定DOM中何时开始存在某个元素？

如果是这样，您应该使用requestAnimationFrame

 (function checkIfElemExists() {
   if (!document.querySelector('.some-element')) {
     window.requestAnimationFrame(checkIfElemExists);
   } else {
     console.log('okay i exist now! lets do something.')
   }
 })()

每当浏览器中请求一个新框架时，它将检查元素是否存在，如果存在，它将停止并执行您想做的任何事情。有效而干净。

编辑：

我不确定我是否理解为什么如果可以使用xpath就不能使用css选择器，如果要使用css选择器，那将是一个：

#tsf>div:nth-of-type(2)>div>div:nth-of-type(3)>center>input:nth-of-type(1)

用它替换“ .some-element”选择器。

Answer 2

仅当页面（DOM）完全加载时，该按钮才会出现。在javascript中，您可以使用“ onload”事件：

window.onload = function () { 
   //Code to execute when page is loaded.
}

或通过JQuery：

$( document ).ready(function() {
    //Code to execute when page is loaded.
});

我希望这是您想要的。

Answer 3

最后，我设法找到一种方法来告诉Javascript等待网站上的Xpath元素：

var element = '//*[@id="tsf"]/div[2]/div/div[3]/center/input[1]'; 
var clickButton = document.evaluate (element, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 
(function checkIfElemExists() { 
   if (clickButton == null) { 
     console.log('nope') 
     window.requestAnimationFrame(checkIfElemExists); 
   } else { 
     console.log('okay i exist now! lets do something.') 
     clickButton.click() 
   } 
})()

感谢@folo的帮助！非常感谢！

JavasScript等待Web元素可见并单击它

3 个答案: