I have correct XPath but selenium is not clicking in Highcharts popup

Question

My application is Angular JS and we are using Highcharts. I am trying to click close button on popup and I have the correct xpath, both relative and absolute which finds the correct element.

When I check it manually, but when I run from Selenium with Java and it does not click it. It does not throw any error as well. I also tried with Javascript and it is not clicking, but again when I execute JavaScript manually from console it works.

Selenium Version : 3.141.59

Button:

Console:

HTML Snippet :

<button type="button" style="float:right" class="btn btnclose " data-dismiss="modal" aria-hidden="true">
 <i class="fa fa-2x fa-times-circle">
</i></button>

Code:

document.getElementsByClassName('btn btnclose ')[1].click()

public static void clickByJS(WebDriver driver){     
    JavascriptExecutor js = (JavascriptExecutor)driver;
    driver.switchTo().activeElement();
    js.executeScript("document.getElementsByClassName('btn btnclose ')[1].click()"); 
}

Note : I checked with other elements of the pop-up as well and I can verify the xpath works and finds the element when I tried in browser manually, but with Selenium does not click. It is not page load issue as I have tried with multiple explicit waits and not much luck. For some reason the element is not visible/intractable.

undetected Selenium · Answer 1 · 2020-06-12T06:46:09.853

getElementsByClassName()

getElementsByClassName() method returns a collection of all elements in the document with the specified class name.

So you can't pass multiple classes using getElementsByClassName(). You can try passing a single class e.g. btnclose. So your effective code block will be:

public static void clickByJS(WebDriver driver){     
    JavascriptExecutor js = (JavascriptExecutor)driver;
    driver.switchTo().activeElement();
    js.executeScript("document.getElementsByClassName('btnclose')[1].click()"); 
}

Update

As getElementsByClassName() still doesn't works, I would suggest you to try with the much proven WebDriverWait as follows:

Using cssSelector:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button.btn.btnclose[data-dismiss='modal'] > i.fa.fa-2x.fa-times-circle"))).click();

Using xpath:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='btn btnclose' and @data-dismiss='modal']/i[@class='fa fa-2x fa-times-circle']"))).click();

Further, you can use JavascriptExecutor with WebDriverWait as well as follows:

Using cssSelector:

((JavascriptExecutor)driver).executeScript("arguments[0].click();", new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button.btn.btnclose[data-dismiss='modal'] > i.fa.fa-2x.fa-times-circle"))));

Using xpath:

((JavascriptExecutor)driver).executeScript("arguments[0].click();", new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='btn btnclose' and @data-dismiss='modal']/i[@class='fa fa-2x fa-times-circle']"))));

Thank you. Tried your suggestion but it did not work. 'btn btnclose ' is the name of the class and I am giving [1] index to click that specific class. I have attached screen shot to show all the classes — ktmrocks, Jun 11 '20 at 05:10
when I execute the JavaScript in console with the class "btnclose" works but when run by Selenium it does not work, but again in console class "btn btnclose " also works. document.getElementsByClassName('btnclose')[1].click(); — ktmrocks, Jun 11 '20 at 05:27
Possibly the _button_ is not present in the DOM when you are trying to invoke JS click. AS a side note, I see you using Java clients, why are you resorting to JS click? — undetected Selenium, Jun 11 '20 at 05:33
I had tried all the tricks from Selenium with Java side like WebDriver wait for the element to be visible and clickable but it was not working. At times I was getting the error the element is not intractable, so I was trying with JavaScript as well. — ktmrocks, Jun 11 '20 at 14:59
@ktmrocks Checkout the answer update and let me know the results. — undetected Selenium, Jun 12 '20 at 06:46

score 0 · Answer 2 · answered Jun 11 '20 at 05:52

Make sure your locator is unique. It can be assured using chrome console too as shown below:

It could be synchronization issue. For instance while your model about to pop on the page Selenium does the click meanwhile. so in this case click would be performed without any error. You can introduce explicit wait in this case to make sure element is ready to perform action.

WebDriverWait wait = new WebDriverWait(driver, 20);
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("button.btn.btnclose")));
element.click();

OR for debugging purpose you can put some hardcoded wait using Thread.sleep in your script to ensure whether its timing issue. Please note hardcoded wait not recommended. Refer below code:

Thread.sleep(5000);
driver.findElement(By.cssSelector("button.btn.btnclose")).click();

Alternative Javascript method to perform click.

WebElement element = driver.findElement(By.cssSelector("button.btn.btnclose"));
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].click();",element);

Another alternative of to perform click is Actions class

WebElement element = driver.findElement(By.cssSelector("button.btn.btnclose"));
Actions action = new Actions(driver);
action.moveToElement(element).click().perform();

I tried all the suggested methods but did not work
1.With action class and CSS selector it did not click. No error message.
2. JavsScript did not click and no error. Tried both method.
3. Tried explicit waits for 1 minute. Failed with expected condition with waiting for Visibility of element. Actual page was loaded within 10 seconds.
4. Tried with CSS selector. Error org.openqa.selenium.ElementNotInteractableException: element not interactable — ktmrocks, Jun 11 '20 at 23:00

I have correct XPath but selenium is not clicking in Highcharts popup

2 Answers2

getElementsByClassName()

Update