Clicking on a link with Selenium chromedriver returns error 'element not visible' in C#

Question

I have a website with a link inside a div. The html source inspection from the webpage looks like this:

<div class="add-to-cart-wrapper">
    <button data-tooltip="Only investments from the selected page will be sold." data-theme="dark" data-placement="top" data-tooltip-trigger="hover" data-id-list="48999040" class="btn btn-default tooltip-item trigger-sell-all">
        Sell All
    </button>
    <a href="javascript:;" data-tooltip="Remove all investments from sale" data-placement="top" data-theme="dark" data-tooltip-trigger="hover" data-currency-iso-code="978" class="trigger-remove-all-sales">
        <i class="fas fa-reply-all fa-flip-vertical"></i>
    </a>
</div>

In the browser it looks like this:

What I am actually trying to archieve is to click on those two grey arrows beneath the "Sell All" button. Which matches the <a href="javascript:;" [...]>

Unfortunately the following C# code for Selenium (Chromedriver) returns that the element is currently not visible eventough I can click on it in the Browser manually:

var link = buttonWrapper.FindElement(By.ClassName("trigger-remove-all-sales"));
link.Click();

The Error Message looks like this:

OpenQA.Selenium.ElementNotVisibleException: 'element not visible
(Session info: chrome=68.0.3440.106) (Driver info: chromedriver=2.41.578737 (49da6702b16031c40d63e5618de03a32ff6c197e),platform=Windows NT 10.0.17134 x86_64)'

any suggestions on how to proceed?

EDIT: As per the suggestion, I added a 'wait.Until("element x is visible")' as per the below code. unfortunately I run into a timeout error:

new WebDriverWait(browser, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("div.add-to-cart-wrapper a.trigger-remove-all-sales[data-tooltip='Remove all investments from sale']"))).Click();

OpenQA.Selenium.WebDriverTimeoutException: 'Timed out after 20 seconds'

As per suggestion I tried to locate the Element with .FindElement() What I noticed Is that the Property Displayed=false

I've added a Thread.Sleep(120000) in between and looked up the code freshly to see what would change. This is the testing code:

var buttonWrapper = browser.FindElement(By.ClassName("add-to-cart-wrapper"));
var link = buttonWrapper.FindElement(By.ClassName("trigger-remove-all-sales"));
Thread.Sleep(120000);
buttonWrapper = browser.FindElement(By.ClassName("add-to-cart-wrapper"));
link = buttonWrapper.FindElement(By.ClassName("trigger-remove-all-sales"));

Even after a waiting time of 2 minutes the element is found but still shown as Displayed=false

In the Developer Console of google Chrome I observed the element and found the following property:

There is an event listener to a.trigger-remove-all-sales which might be used

Answer 1

You have to wait until the element is not visible, it is java code, you can also use any locator be it XPath or id or class name

WebDriverWait wait = new WebDriverWait(driver, 15);
WebElement elem = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("")));
elem.click();

or you can also used the elementToBeClickable() method

WebDriverWait wait = new WebDriverWait(driver, 15);
WebElement elem = wait.until(ExpectedConditions.elementToBeClickable(By.id("")));
elem.click();

Convert this code in C sharp as I have not good proficiency in it

Answer 2

I made a very, very dirty workaround by moving the mouse position and performing a click on the position rather than the element.

But this solution is really really dirty and prone to errors when something changes on the website. Therefore I do not want to mark this as answer:

new Actions(browser).MoveToElement(link, 1225, 565).Click().Build().Perform();

to see where the mouse actually is, you can set a pause/break marker before this line, open the Browserdriver, and paste the following js code into the developer console:

// Create mouse following image.
var seleniumFollowerImg = document.createElement("img");

// Set image properties.
seleniumFollowerImg.setAttribute('src', 'data:image/png;base64,'
+ 'iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAA'
+ 'HsYAAB7GAZEt8iwAAAAHdElNRQfgAwgMIwdxU/i7AAABZklEQVQ4y43TsU4UURSH8W+XmYwkS2I0'
+ '9CRKpKGhsvIJjG9giQmliHFZlkUIGnEF7KTiCagpsYHWhoTQaiUUxLixYZb5KAAZZhbunu7O/PKf'
+ 'e+fcA+/pqwb4DuximEqXhT4iI8dMpBWEsWsuGYdpZFttiLSSgTvhZ1W/SvfO1CvYdV1kPghV68a3'
+ '0zzUWZH5pBqEui7dnqlFmLoq0gxC1XfGZdoLal2kea8ahLoqKXNAJQBT2yJzwUTVt0bS6ANqy1ga'
+ 'VCEq/oVTtjji4hQVhhnlYBH4WIJV9vlkXLm+10R8oJb79Jl1j9UdazJRGpkrmNkSF9SOz2T71s7M'
+ 'SIfD2lmmfjGSRz3hK8l4w1P+bah/HJLN0sys2JSMZQB+jKo6KSc8vLlLn5ikzF4268Wg2+pPOWW6'
+ 'ONcpr3PrXy9VfS473M/D7H+TLmrqsXtOGctvxvMv2oVNP+Av0uHbzbxyJaywyUjx8TlnPY2YxqkD'
+ 'dAAAAABJRU5ErkJggg==');
seleniumFollowerImg.setAttribute('id', 'selenium_mouse_follower');
seleniumFollowerImg.setAttribute('style', 'position: absolute; z-index: 99999999999; 
pointer-events: none;');

// Add mouse follower to the web page.
document.body.appendChild(seleniumFollowerImg);

// Track mouse movements and re-position the mouse follower.
$(document).mousemove(function(e) {
$("#selenium_mouse_follower").css({ left: e.pageX, top: e.pageY });
});

after the mouse move code you can set another breakpoint to look where the mouse actually moved in the browser.

Hint: remove the .Click() so you don't click on a link by accident. The mousetracking script has to be reloaded at every page refresh so when you would click on a link, you could not track your mouse anymore. also the script only works if it is initialized BEFORE the mouse movement..

Answer 3

The solution that I used was to use a scriptexecutor to click on the element which worked:

var button = browser.FindElement(By.ClassName("add-to-cart-wrapper"));
((IJavaScriptExecutor)browser).ExecuteScript("arguments[0].click();", button);