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

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 来做这样的事情，但在这种情况下我真的不能。

附注。我很讨厌 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.});我希望这就是你正在寻找的。