I'm trying to automate some tasks with JavaScript. Website is being generated so I cannot use CSS selectors as they change with every website refresh. It is not shown in the example but it is possible to manipulate buttons with their text content (which CSS, sadly, cannot get).

I have figured out (thanks to StackOverflow) how to click web element by its Xpath but still don't know how to tell JS to wait until it is present.

Code for clicking element (working):

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();

Attempt to wait for element to be present and then click it (not working):

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);    
    }

As you can see code in the example is Google search button.

I have always used Python Selenium to do such things but in this case I really cannot.

PS. I suck at JS as it is evident from posted code.

Thank you for trying to help!

EDIT:

Following @folo code I wrote something like this:

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.') 
   }
 })()

The problem is that it always returns "Okay i exist now!). Even when i run it on a website that does not contain this element.

I'm trying to automate some tasks with JavaScript. Website is being generated so I cannot use CSS selectors as they change with every website refresh. It is not shown in the example but it is possible to manipulate buttons with their text content (which CSS, sadly, cannot get).

I have figured out (thanks to StackOverflow) how to click web element by its Xpath but still don't know how to tell JS to wait until it is present.

Code for clicking element (working):

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();

Attempt to wait for element to be present and then click it (not working):

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);    
    }

As you can see code in the example is Google. search button.

I have always used Python Selenium to do such things but in this case I really cannot.

PS. I suck at JS as it is evident from posted code.

Thank you for trying to help!

EDIT:

Following @folo code I wrote something like this:

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.') 
   }
 })()

The problem is that it always returns "Okay i exist now!). Even when i run it on a website that does not contain this element.

• javascript
• google-chrome
• browser
• automation

• 1 how is waitForElementToDisplay defined? – mattemyo Commented May 26, 2019 at 12:32
• 1 I just realized that it is not. Thx for pointing this out, this is a code copied from Stack. – ugabuga77 Commented May 26, 2019 at 12:55

3 Answers 3

If I understand you correctly you want to determine when an element starts to exist in the DOM?

If so you should use requestAnimationFrame

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

whenever a new frame is requested in the browser it will check if the element exists, if it does it will stop and do whatever you want to do. its effective and clean.

Edit:

im not sure i understand why you can't use a css selector if you can use xpath, if you were to use a css selector this would be the one:

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

replace the ".some-element" selector with that.

Finally I managed to find a way to tell Javascript to wait for Xpath element on website:

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() 
   } 
})() 

Thank you @folo for your help! Much appreciated!

The button will only be present when the page (DOM) is pletely loaded. In javascript you can use the 'onload'-event:

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

Or via JQuery:

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

I hope this is what you are looking for.