Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Loading element blocks for varying amount of time between page navigation, how to watch for it to disappear and then continue?


#1

Hello,

Here’s a permalink to my monitor:

permalink to monitor

The site I’m trying to monitor has an html element which shows up while the page is loading content from a db query. This can take a varying amount of time depending on the query and several other factors.

I’ve been using a $browser.sleep(5000) just to wait long enough for the page to load but it isn’t always a long enough wait. Additionally I’d like an accurate measurement of the load time. I get this error when the next click step runs before the loading element has disappeared:

UnknownError: unknown error: Element is not clickable at point (249, 11). Other element would receive the click: <div class="ext-el-mask" style="display: block;"></div>

I tried making a function to find the element by the css class name and do a wait until the element is stale

// Step 9 - wait for the loading overlay to disappear
.then(function() {
  return $browser.findElements(By.className("ext-el-mask"))
  .then(function(found){
    if (found.length > 0 === true) {
      var waitForElementToBeRemoved = function() {
        $browser.findElement(By.className("ext-el-mask")).then(function(el) {
            return $browser.wait($driver.until.stalenessOf(el));
        });
        log(9, 'Waiting for loading overlay to disappear');
        return waitForElementToBeRemoved(); }
    }else{
      log(9, 'No loading overlay found, continuing')
    }
  });
})

But I’m getting some inconsistent behavior from this function and I don’t understand why. If I place this before one of my click functions getting the error sometimes it seems to skip right over the function and move to the step after it without writing to the log.

In other cases it will return an error right before the waitForElementToBeRemoved() function runs saying:

UnexpectedAlertOpenError: unexpected alert open

When I get this error I can re-run the monitor and get a different result on the second run.

Others I’ll see it run and log not finding the loading page element and move to the next step.

What I’d really like is a reliable way to check:

  • is the loading element blocking the page? wait for it to disappear then continue.
  • didn’t find the loading element?? continue to the following steps.
  • no $browser.sleep(####) in my monitor.

Can anyone provide some tips?


#2

Hi @atittle - Have a look at the functions under the Pause and Wait conditions for the function which matches your requirement.


#3

Thanks @stefan_garnham for the pointer! I was able to use some of the logic from the function I made and the example on the site you linked. Here’s what I came up with:

.then(function () {
  return $browser.findElements(By.className("ext-el-mask"))
  .then(function(found){
    if (found.length > 0){
      $browser.wait($driver.until.stalenessOf($browser.findElement(By.className("ext-el-mask"))))
      log(13, found.length + " ext-el-mask elements were found, Waiting")
    }else{
      log(13, found.length + " ext-el-mask elements were found, continuing")
    }
    
  })
})

I find elements with the classname of the mask and if the count of elements is greater than 0 it finds the first element and waits until it is stale.

Pushing the element count into the log is a helpful debugging feature so I could be sure I was actually detecting the element, and by breaking it out into it’s own step I know how long the page transition is blocked by the loading element.


#4

Great work @atittle, very elegant solution :smiley: