There is a website I'm testing on that puts up a gray loading div when the site is processing. The problem is that the div is there immediately at the website load and the only way you can tell it's running is that the inline CSS style changes.

basically when running it's:

<div id="loading" class="loading hide" style="display: block;">text</div>

when not running it's:

<div id="loading" class="loading hide" style="display: none;">text</div> 

How can I have selenium wait after it clicks a link until the inline style changes back?

  • What have you tried so far?, Does the inline changes back to none or block ? . How long does the state remains in the state before it changed back to normal ?
    – PDHide
    Dec 16 '19 at 19:04

From the question, it could be inferred that you are not concerned about the visibility of the grey element. Sometimes in angular based websites isenabled isdisplayed etc won't work properly due to the asynchronous nature and the use of non-css way of enabling and disabling elements (eg using jquery to disabled an element than setting disable property)

So it is better to check if the element is present than visible:

WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR , 'div[style="block"][id="loading"]'))
WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, 'div[style="none"][id="loading"]'))

The above code assumes that the grey element takes a few seconds before appearing and then disappearing. So, first, we will wait for it to appear and then wait for it to disappear.

Else, if we directly check if style="none" without checking if it has changed to block first. Then the condition will become true as the change to style="block" hasn't happened yet. So, the scripts try to execute the next line which would be clicking the element but by that time the grey element appears and blocks the click.

Hence, first check for block , and then check for none.


Welcome to the site.

You need to do two things:

  1. wait until //div[@id="loading" and contains(@style, "block")] is visible
  2. wait until //div[@id="loading" and contains(@style, "none")] is visible

If you leave out 1., you might end up in a situation when Selenium is faster than the site, so it continues the script before "block" is there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.