JavasScript подождет, пока веб-элемент будет виден, и щелкните по нему

Question

Я пытаюсь автоматизировать некоторые задачи с помощью JavaScript. Сайт создается, поэтому я не могу использовать селекторы CSS, так как они меняются при каждом обновлении сайта. Это не показано в примере, но можно манипулировать кнопками с их текстовым содержимым (которое, к сожалению, CSS не может получить).

Я понял (благодаря StackOverflow), как щелкать веб-элемент по его Xpath, но все еще не знаю, как сказать 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, как видно из размещенного кода.

Спасибо за попытку помочь!

EDIT:

После кода @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.')
   }
 })()

всякий раз, когда новый кадр запрашивается вбраузер проверит, существует ли элемент, остановится и сделает все, что вы хотите.он эффективен и чист.

Редактировать:

Я не уверен, что понимаю, почему вы не можете использовать селектор CSS, если вы можете использовать xpath, если вы должны использовать селектор CSS, это будетодин:

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

замените селектор ".some-element" этим.

Answer 2

Наконец мне удалось найти способ заставить 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 за помощь! Очень ценится!

Answer 3

Кнопка будет присутствовать только тогда, когда страница (DOM) полностью загружена. В javascript вы можете использовать событие onload:

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

Или через JQuery:

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

Надеюсь, это то, что вы ищете.