Testing loading spinner selenium

Question

I'm trying to automate a test case about a loading spinner which is displayed when navigating between the different page categories while the page is loading.

The spinner has two states: When is not visible - "display: none;"

Visible state while the page is loading - "display: block;"

The problem is when navigate between the different categories I'm using a method

selectCategory("Gallery");

and then not sure how to assert that the spinner is visible while the page is being load. It's like webdriver is looking for the spinner when it's already gone and the category is load.

Answer 1

If I understand the question correctly, sometimes spinner is shown and sometimes it's not, and in that case you need to wait for it to be gone. I have similar situation with webpages I'm writing tests for, so I wrote some kind of solution for that.

First, I have a helper function isElementDisplayed which wraps isDisplayed method and does some exception handling so it only returns true of false for convenience:

public static boolean isElementDisplayed(WebElement element) {
    try {
        WebDriverWait wait = new WebDriverWait(driver, 1);
        wait.until(ExpectedConditions.visibilityOf(element));
        return element.isDisplayed();
    } catch (org.openqa.selenium.NoSuchElementException
            | org.openqa.selenium.StaleElementReferenceException
            | org.openqa.selenium.TimeoutException e) {
        return false;
    }
}

I inserted only 1 second for element waiting here because we know for sure that spinner will appear shortly on page and there is no point for waiting longer than that.

Second, I have a method that waits for spinner to be gone if it is detected on page:

public static void waitForElementToBeGone(WebElement element, int timeout) {
    if (isElementDisplayed(element)) {
        new WebDriverWait(driver, timeout).until(ExpectedConditions.not(ExpectedConditions.visibilityOf(element)));
    }
}

By tweaking timeout time I was able to cover all cases of lengthy spinner actions in my application. Also it allows you to speed up tests execution because you avoid spending time waiting for spinner if it's not there.

Answer 2

As per query, on selectCategory("Gallery"); spinner will display before Gallery category is loaded, right.

You can try this assertion in couple of ways, say simply

if loader has id="loader" then

Assert.assertTrue(driver.findElement(By.id("loader")).isDisplayed());

If you want to assert by attribute as mentioned query then

Assert.assertEquals(driver.findElement(By.id("loader")).getCssValue("display"), "block or something as per requirement");

this link helps you to get cssvalue