How to listen to CSS change in Selenium?

Question

I have a div that is a save button that has an awesome font symbol. After clicking the div, a new CSS class disabled is added where the opacity is reduced to visually signal the clicking of the button. After the save event the disabled CSS class is removed again and the button is fully visible again. If I try to verify this by Selenium naively the adding of the CSS class and the removal is too fast for Selenium, i.e.

driver.findElement(By.cssSelector(".save-button")).click();

is working and finds the button and clicks it, but the next find throws a NoSuchElementException:

driver.findElement(By.cssSelector(".save-button .disabled"));

It doesn't work with explicit wait neither (I didn't mention for simplification). Selenium is too slow to recognize the change, i.e. the CSS class is removed before the second find started. Do I need something like a listener started before the click event, maybe via JavaScript solutions of Selenium? Any other approach? Looks like threading a wait before is not possible in Selenium.

Answer 1

Selenium isn't too slow (at least in this case), but the CSS parameter was wrong:

".save-button .disabled" with one space means two elements in a hierarchy (<div class="save-button"><div class="disabled"/></div> whereas ".save-button.disabled" would have been correct and is indeed working.

I didn't notice in the first place, because the Chrome inspector isn't that tight and found the div with this theoretically wrong parameter.

Edit: As mentioned in the comments by JeffC the detail that the inspector matched the element with the wrong parameter cannot be true. I verified it with the comment div from this page and the inspector is not matching here. See screenshot below. I won't analyze this further as my Selenium test is working now.