DEV Community


Posted on

Working with throbbers

The throbber. The spinny thing. The loading bar. It's the thing that lets the user know that "something is happening". People will fixate their eyes on it, while they wait on that loading indicator after submitting their food order, or purchase on Ticketmaster, or just waiting for some data to load on a page.

Your automated tests should really be doing the same. Fixating on that throbber. Waiting for it to finally go away so you can continue on your way. Another "speed bump" to implement so your tests run as reliably as possible.

Tests can fail if the throbber is not accounted for:

  scenario "Order is submitted successfully" do
    click_button 'Submit Order'
    page.should have_text 'Thank you for your order!'
Enter fullscreen mode Exit fullscreen mode

If your tests are designed to fail or give up after say, 2 seconds, it is possible that this test can repeatedly fail if the app is very busy "doing its thing".

Here's another thing: What if the app response is so fast, that the throbber barely shows up at all? So fast that maybe Capybara (or whatever automated tool you're using) isn't quick enough to pick up on that element. You certainly wouldn't want your test to fail in that scenario either!

No framework in existence is going to know when your app is really done loading the DOM. It will also have no knowledge of these throbber elements in your apps.

Here is a helper method that is designed to do a couple of things:

  1. If the throbber shows up, let's wait for a set amount of time for it to go away. This puts the test in a position to move forward when it's supposed to.
  2. If the throbber doesn't show up, then no big deal, we move on, and the test should assume that the action has completed.
  3. If the throbber shows up, but never goes away, let's just log an error without failing the test. It is likely/possible that when the test moved on, it will end up failing for another reason that should be investigated.
  def wait_on_loader
    (0..10).each do |i|
      if page.has_css?('#loader', wait: 2)
        sleep 1
    Log.error 'Loading element never finished'
Enter fullscreen mode Exit fullscreen mode

Here, we're initially waiting 2 seconds for the throbber to appear. Once it does, we retry every 1 second to see if it's still there (up to a max of 10 seconds).

I hope this was helpful in figuring out how to incorporate throbbers / waiters / spinners into your test execution, and using them wisely as an indicator as to when your test can proceed safely.

Top comments (1)

citronbrick profile image

You can use syntax highlighting for your code.
I think it's