The Issue

Functionality tests of a Static Web Page are relatively a breeze, but testing a Dynamic Web Page can be a more nuanced task to solve. Modern Web Applications typically use AJAX to dynamically load/refresh specific elements on a page even after the page has loaded. Thus, a time lag can be seen while reloading the web pages and reflecting the web elements, which frequently results in breaking tests if you use traditional approaches such as static wait times.

Now you might overcompensate by adding longer a “Sleep”, which ends up fixing the problem, but results in inefficient and longer tests. The tests will remain brittle and susceptible to failure in the event of slower connections.

The Answer

To tackle this problem Selenium, has a built-in solution: Explicit Wait. This enables the user to pass a condition and a maximum time limit. The script will wait until the condition is true, after which it will advance to the next step. However, if the condition is not met and/or the maximum time limit is reached, a time-out error will be prompted once the code executes for the maximum time specified by the user.

The Code

We will navigate to the Yahoo Finance website and wait until ‘Nasdaq’ text appears on the page.

In the above example, the explicit wait is 5 seconds (e.g. 5).until), looking for the link with the ‘Nasdaq’ text (e.g. @driver.find_element(xpath: ‘//a[text()=’Nasdaq’]’)), and seeing if it is displayed (e.g. .displayed?).

If we set the timeout too low (e.g. timeout: 2), Selenium won’t wait long enough for the page to load, which will trigger the timeout threshold and throw an exception (e.g. until’: timed out after 2 seconds (Selenium::WebDriver::Error::TimeOutError)).

And if we didn’t use an explicit wait at all, the test would have failed because Selenium would have tried to check for the ‘Nasdaq’ text before it displayed, and returned a NoSuchElement exception (e.g., Unable to locate element: {“method”:”css selector”,”selector”:”#finish”} (Selenium::WebDriver::Error::NoSuchElementError)).

The Result

Incorporating the Explicit Wait stated above we observe that:

  • Browser opens
  • Browser navigates to “Yahoo Finance website”
  • Waits for “Nasdaq” text to be located on the web page
  • Validates that “Nasdaq” text is included on the page

The Takeaway

Locating and testing dynamic elements using fixed wait times is not considered a practical approach. But using Explicit Waits can solve this issue as indicated above. The right use of implicit and explicit wait times can enable us to have the right foundation for testing various dynamic web pages. You can check out our previous posts on Implicit Waits and Explicit Waits in Watir Webdriver for additional examples.