I have a Apply button on my site page. When you press Apply it is animation icon appears near this button and hides when apply is completed.
My site is powered by angularjs. Animation icon markup is:
<img class="saving-icon" src=".../loading.gif")" data-ng-hide="!isSaving" alt="" />
I'd like to notice that data-ng-hide do not detach element from DOM tree and just applies css.
In my C# test with WebDriver i have a step - PressApplyButton()
public void PressApplyButton()
{
Waf.Driver.FindElement(By.ClassName("apply-button")).Click();
new WebDriverWait(Driver, TimeSpan.FromSeconds(5))
.Until(_ => !Driver.FindElement(By.ClassName("applying-icon")).Displayed);
}
In this step WebDriver will click Apply button and after that will wait for (max) 5 seconds while animation icon 'applying-icon' is displayed. When icon will be hidden test will continue.
The problem that always one of all tests, which use this step, fail in exact this step in Until condition with exception:
Element is no longer attached to the DOM
This exception is related to this element:
Driver.FindElement(By.ClassName("applying-icon"))