Search code examples
seleniumxpathcss-selectorswebdriverwaitlinktext

Selenium finds the element (anchor) but still says element not visible?

I have a "clear all" button which is an anchor. The HTML structure is like this:

<div class="form-row toggle-closed" id="ProductFilters" style="display: block;">
    <div class="form-row__filter">
        <ul class="form-row__filter__bg-display">
            <li class="filter__group__item__small">
                <a id="ProductFiltersFilterText" class="f-right" data-select-all="ProductFilters" href="#">clear all</a>
            </li>
        </ul>
    </div>  
</div>

Then in the Selenium test I'm trying to find the a tag using this:

SeleniumHelper.ExpandFilterSection(_webDriver, "#ProductFilters");
var clearAllButton = _webDriver.FindElement(By.CssSelector("div.form-row__filter>ul>li>#ProductFiltersFilterText"));
clearAllButton.Click();

THen I started debugging, in the automated Chrome window I could see that by executing ExpandFilterSection, the filter was expanded, the "clear all" button was exposed, then a bug said:

OpenQA.Selenium.ElementNotVisibleException: 'element not visible'

How ever in the Autos I see: enter image description here

It seems that the "clear all" button is found, why does it say "element not visible"? Functionality of the button is trigger by JavaScript though.

Solution

  • To click() on the element with text as clear all you have to induce WebDriverWait for the desired ElementToBeClickable() and you can use either of the following Locator Strategies:

    • linkText:

      SeleniumHelper.ExpandFilterSection(_webDriver, "#ProductFilters");
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.LinkText("clear all"))).Click();

    • cssSelector:

      SeleniumHelper.ExpandFilterSection(_webDriver, "#ProductFilters");
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("div#ProductFilters>div.form-row__filter>ul.form-row__filter__bg-display>li.filter__group__item__small>a#ProductFiltersFilterText"))).Click();

    • xpath:

      SeleniumHelper.ExpandFilterSection(_webDriver, "#ProductFilters");
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div[@id='ProductFilters']/div[@class='form-row__filter']/ul[@class='form-row__filter__bg-display']/li[@class='filter__group__item__small']/a[@id='ProductFiltersFilterText']"))).Click();