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

Question

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:

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.

`var element = driver.FindElement(By.id("ProductFilters")); Actions actions = new Actions(driver); actions.MoveToElement(element); actions.Perform();` this should bring the element to visible area. — supputuri, Sep 16 '19 at 13:30
@supputuri the code gave me errors, can you post an answer to explain your comment? — one-hand-octopus, Sep 16 '19 at 13:55
((IJavaScriptExecutor)Driver).ExecuteScript("arguments[0].scrollIntoView(false);", element); — Somber, Sep 16 '19 at 13:55
@DMart tried to use id, could see the same element in the Auto but same error happened. — one-hand-octopus, Sep 16 '19 at 13:57

undetected Selenium · Accepted Answer · 2019-09-16T14:03:53.453

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();

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

1 Answers1

Linked

Related