测试加载微调硒

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

Answer 3

To Handle Spinner in Selenium. We have to use Explicit wait-
1- WebdriverWait
2- FluientWait

As you mention Spinner has two states 1- style.display="block and 2-style.display="none"
style.display="block" : Indicates Spinner is running.
Below code will return true if spinner is disappear else timeout exception

public static boolean waitTillSpinnerDisable(WebDriver driver, By by)
{
  FluentWait<WebDriver> fWait = new FluentWait<WebDriver>(driver);
  fWait.withTimeout(10, TimeUnit.SECONDS);
  fWait.pollingEvery(250, TimeUnit.MILLISECONDS);
  fWait.ignoring(NoSuchElementException.class);

  Function<WebDriver, Boolean> func = new Function<WebDriver, Boolean>() 
   {
     @Override
     public Boolean apply(WebDriver driver) {
    WebElement element = driver.findElement(by);
    System.out.println(element.getCssValue("display"));         
    if(element.getCssValue("display").equalsIgnoreCase("none")){
    return true;
       }
        return false;
     }
   };

   return fWait.until(func);
}

By : pass the spinner locator (eg By.Id, By.css, By.xpath) etc..
For Complete demo How handle Spinner in Selenium visit on : Handling Spinner in Selenium

Answer 4

This is what I am using in NodeJS and TypeScript to wait for all spinners. It checks the alt text and src text attributes.

public async WaitForAllSpinners(): Promise<void> {
    const elements = await this.driver.findElements(By.css("img"));
    const keywords = ["loading", "loader", "spinner"];

    for (const element of elements) {
        let altText = "";
        let srcText = "";

        //Element may be stale by the time we check it
        try {
            altText = await element.getAttribute("alt");
        } catch (error) {}

        //Element may be stale by the time we check it
        try {
            srcText = await element.getAttribute("src");
        } catch (error) {}

        let identifiedByAltText = false;
        let identifiedBySrcText = false;

        for (const keyword of keywords) {
            if (altText && altText.toLowerCase().indexOf(keyword) >= 0) {
                identifiedByAltText = true;
                break;
            }
            if (srcText && srcText.toLocaleLowerCase().indexOf(keyword) >= 0) {
                identifiedBySrcText = true;
                break;
            }
        }

        if (identifiedByAltText || identifiedBySrcText) {
            //Element may be stale by the time we wait for it
            try {
                await this.driver.wait(until.elementIsNotVisible(element), this._testConfig.DefaultElementTimeout);
            } catch (error) {}
        }
    }
}