Click does not reflect changes in UI or behaves like mouse hover

[Gajanan Mahajan]

I've an AJAX based application and I want to click on element. In order to click on it, I use explicit wait for element to be clickable then click it like - 

WebElement element = new WebDriverWait(driver, 30)
	.ignoring(NoSuchElementException.class)
	.until(ExpectedConditions.elementToBeClickable(By.id("ribbon-connection-accessibleconnections")));
	JavascriptExecutor  js = (JavascriptExecutor) driver;
	System.out.println("Width is " + js.executeScript("return arguments[0].offsetWidth;",new Object[] {element}).toString());
	System.out.println("Height is " + js.executeScript("return arguments[0].offsetHeight;",new Object[] {element}).toString());
	System.out.println("Document ready? " + js.executeScript("return document.readyState === \"complete\""));
	System.out.println("jQuery done? " + js.executeScript("return jQuery.active === 0"));
	System.out.println("jQuery active count " + js.executeScript("return jQuery.active"));
	element.click();

After wait for an element to be clickable, I can see that height width of element is positive value also document ready state is complete and no jQuery request active.(In above code, I just printed it but I wait for them to satisfy). Even though result of all above seems good but I can see on UI page still not loaded completely because after that I can see that some of the components on page are still loading. After this all, I click on an element.

But sometimes, I can see that following behaviour

1. after click whatever component is expected to appear on UI, does not appear(Note  element.click() does not result into any error this indicate click has succeeded)

2. instead of click, UI appears like mouse hover was performed over the element(I can see tooltip of that element and no UI appear which was expected after click)

Could you please suggest how this can be handled? Actually this causing my tests to fail intermittently and fails at any stage randomly. Adding sleep does not cause these issues but that is not right approach.

I've been struggling a lot for stabilizing this but no luck. Your help is highly appreciated.

[Kogul S]

Hi Gajanan, 

 Click method will not work for certain elements. For eg: if the element is in navigation panel or the button has hover & click functionality.  Just try Actions class moveTo\Element & click. It is also a another way to click the element. Have a glance to the below code.  

Actions action = new Actions(driver);

action.moveToElement(webElement).click(webElement).build().perform();

Thanks & Regards, 

S. Kogu

[Mike Hetzer]

Can you try to wait for Ajax to be completed?

Something like using this method below in a page object or base class constructor could handle waiting for Ajax to be completed before any other actions are executed.

I took this one from somewhere online, google search can help you with this.

                private void WaitForAjax()

{

jsExec.ExecuteScript("var callback = arguments[arguments.length - 1];"

+ "var xhr = new XMLHttpRequest();" + "xhr.open('GET', '/Ajax_call', true);"

+ "xhr.onreadystatechange = function() {" + "  if (xhr.readyState == 4) {"

+ "    callback(xhr.responseText);" + "  }" + "};" + "xhr.send();");

}

[Gajanan Mahajan]

Thanks Kogul for the suggestion, but that also didn't help.

[Gajanan Mahajan]

Thanks Kogul for the suggestion but it did not solve the issue either.

[Gajanan Mahajan]

Thanks Mike for the answer but what exactly is 'Ajax_call' there? Will developer help me to get that end point? Will that be only single end point for the application or there can be many? If they are different for different components of application, is above method likely to fail if that Ajax_call not relevant to component?

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/ae531105-418b-449e-bdd9-1bfb118726fd%40googlegroups.com.

[Vikash Narayan]

Hi Gajanan,

can you try this,

public void jsClickElementByXpath(String xpathOfElement) {

JavascriptExecutor js = (JavascriptExecutor) webDriver;
String script = "function getElementByXpath(path) {\n"
+ "  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;\n"
+ "}\n" + "el = getElementByXpath(\"" + xpathOfElement + "\");\n" + "el.click();";
js.executeScript(script);

}

Best Regards,

Vikash Narayan

Qapitol QA [P] Ltd.

Continuous Testing for DevOps Teams

Mobile: +91 8870402195

Email: vika...@qapitol.com

Website: www.qapitol.com

Recommended QA Solutions Provider for 2018 by CIO Insider

Award Winner for Best Contribution to Quality by App Quality Alliance, UK

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CABKxzbD9EAudZ%2B%3DRPw6bWBbN1gSt5zO%2B5tkoWvHDzWKyzZoE5w%40mail.gmail.com.