title: Webdriver, detect DOM changing and wait for it
body: <p>I am using Webdriver in Java and I encountered an issue repeatedly that I can't find a proper solution yet.</p>
  
  <p>It is to do with doing actions on a page that will cause this page DOM to change (for example, Javascript lightbox), then my JUnit test is expecting new elements after the DOM change but my test is getting the old DOM element.</p>
  
  <p>To give you an example, I have a scenario as below.</p>
  
  <p>First of all click “Add item” button in the below image and the light box appears:
  <img src="https://i.stack.imgur.com/2XgjA.png" alt="enter image description here"></p>
  
  <p>Then fill in all the item details and click "Add &amp; Close". You will see the screen below:
  <img src="https://i.stack.imgur.com/F4iGw.png" alt="enter image description here"></p>
  
  <p>Notice that now there is an info message <code>Your item ... has been added</code>.</p>
  
  <p>Now I put keywords in the Search text box and hit enter and the info message will be changed to below:
  <img src="https://i.stack.imgur.com/z25R0.png" alt="enter image description here"></p>
  
  <p>In my JUnit test, the flow is like below:</p>
  
  <pre><code>....
      itemDetailsPage.clickAddAndClose();
      itemDetailsPage.searchItemBy("Electricity");
      assertEquals("Your search for 'electricity' returned 2 results.",
          itemDetailsPage.getInfoMsg());
  ....
  </code></pre>
  
  <p>Now this test is not very robust, because if the network is slow, most of the times, <code>getInfoMsg()</code> will return the previous info message <code>Your item ... has been added</code> instead of the latest info message, which causes the test to fail. Just a side note that these two info message have share the same html element id.</p>
  
  <p>The solution I am trying to implement here are:</p>
  
  <ol>
  <li><p>add explicit wait in clickAddAndClose()
  So it looks something like:</p>
  
  <pre><code>public void clickAddAndClose() {
      ...
      clickWhenReady(driver, By.id(addAndCloseButtonId));
      ...
      waitForElementByLocator(driver,By.id(itemInfoMsgId),10);
  }
  </code></pre>
  
  <p>The second wait proves to be useless because, <code>itemInfoMsgId</code> already exist when the user added the item from the add item lightbox.</p></li>
  <li><p>add <code>waitForPageLoaded()</code> method at the end of <code>clickAddAndClose()</code> to try to wait for the page to finish reloading. The generic method for <code>waitForPageLoaded()</code> below:</p>
  
  <pre><code>public void waitForPageLoaded(WebDriver driver) {
      ExpectedCondition&lt;Boolean&gt; expectation = new ExpectedCondition&lt;Boolean&gt;() {
          public Boolean apply(WebDriver driver) {
              return ((JavascriptExecutor) driver).executeScript(
              "return document.readyState").equals("complete");
          }
      };
      Wait&lt;WebDriver&gt; wait = new WebDriverWait(driver, 30);
      try {
          wait.until(expectation);
      } catch (Throwable error) {
          assertFalse("Timeout waiting for Page Load Request to complete.",
          true);
      }
  }
  </code></pre></li>
  </ol>
  
  <p>I am expect at the end of <code>clickAddAndClose()</code>, it will see this page is still being updated so it will wait until the info message has been updated. But this does not seem to work either.</p>
  
  <p>That leaves me to the last choice will is to add a thread sleep at the end of <code>clickAddAndClose()</code>. I want to avoid using it.</p>
  
  <p>Is there a generic way of solving this kind of problem? How do I detect that the page DOM is still changing and tell Webdriver to wait until it finishes refreshing?</p>