Clicking on Image Link with Selenium webdriver java - java

I have looked at the answers to similar questions and it seems like the code that I have should work but I get "Cannot click on element" error when the code invokes click on the web element.
Following is html markup segment
<div class="x-tree-node-item">
<a title="Manage Users" class="sidenavmenu_unselected" id="m-22" onclick="toggleMenu('22', '');" href="#">
<img title="" align="bottom" id="mi-22" alt="" src="ca/images/arrow.png" border="0">Manage Users
</a>
<div style="margin-left: 1em;">
<ul class="submenu-show" id="mp-22" style="height: auto; display: none;">
<li>
...
</li>
</ul>
</div>
Java code to locate the link is:
By xpath=By.xpath("//a[contains(#title,'Manage Users')]/img");
WebElement manageUsers = (new WebDriverWait(driver, 10))
.until(ExpectedConditions.presenceOfElementLocated(xpath));
manageUsers.click();
It finds the element but I get error:
org.openqa.selenium.ElementNotInteractableException: Cannot click on element
The ids are generated dynamically so we can't find by id and image source is used by multiple links.
Thank you for your help.
* Update *
The problem was solved with help from JeffC and Xwris. JeffC's last comment showed that there are multiple nodes being found. So, I added following code:
List<WebElement> manageUserImages=driver.findElements(xpath);
for (WebElement manageUserImage:manageUserImages) {
if (manageUserImage.isDisplayed()) {
manageUserImage.click();
}
}
Since there is only element displayed at one time with "Manage Users" as title, this finds the correct elements and delivers the desired results.
#JeffC, if you can post an answer with your comment, we can mark that answer as the correct answer.
Thanks again to everyone who helped.

It looks your xpath is wrong.
Personally I would start from the div and the drill down to the actual < a > tag.
In some cases where your web-element sits under a < li > tag, I would go even further up the tree and select a div which is not hidden.
i.e you instruct it to search for under the specific < div >
Who told you you can select only by id? You can use anything! :)
This should work.
//div[#class='x-tree-node-item']//a[#title='Manage Users']
This should work as well. Correct usage of 'contains' is as follows:
//div[#class='x-tree-node-item']//a[text()[contains(.,'Manage Users')]]
Hope this helps!
PS. notice that text contains is case-sensitive and will match partial text.
So if you searched for:
//a[text()[contains(.,'age User')]]
it will still be a successful match!
Update after OP's comments:
You don't actually need xpath helper. You just hit F12 in your browser and then CTRL+f so you open a search field at the bottom. Please see my example on how I locate the title of your question with partial text match ('Image').
Also notice next to xpath where it says 1 of 1 (meaning that our element is unique). Try to do the same for your case. I suspect that you need to go higher up the tree and start from an earlier < div > so you can locate the rest.

Leave off the "/img" part of your locator. You want to click the anchor (a) not the image itself.
By xpath=By.xpath("//a[contains(#title,'Manage Users')]");
WebElement manageUsers = (new WebDriverWait(driver, 10))
.until(ExpectedConditions.presenceOfElementLocated(xpath));
manageUsers.click();
Alternatively, the locator could be: //a[#id='m-22']

Related

Unable to locate an element even when the xpath is correct

i'm tried to select an element from an auto suggestion field but i got always an error saying that the element could not be found even that i'm sure my xpath is correct
here's my code :
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#class=\"ui-menu-item-with-icon ui-menu-item\"][1]")));
driver.findElement(By.xpath("//*[#class=\"ui-menu-item-with-icon ui-menu-item\"][1]")).click();
it should find //*#class=\"ui-menu-item-with-icon ui-menu-item\" which is the first suggestion albert cammus
here's the outerHtml
<li class="ui-menu-item-with-icon ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">
<span class="item-icon"></span>
Albert Camus (SARCELLES)</a>
</li>"
Your XPath is more or less OK apart from using wildcard which may result into longer processing so you can go for li instead of *.
Another option is sticking to the <a> tag containing the text you would like to click using normalize-space() function something like:
//a[normalize-space()="Albert Camus (SARCELLES)"]
Also your popup may reside within an iframe so you might have to switch the webdriver context to the relevant iframe element.
Why don't you try linkText over Xpath ?
linkText is more stable then Xpath, there's no doubt about that.
Code :
wait.until(ExpectedConditions.visibilityOfElementLocated(By.partialLinkText("Albert Camus (SARCELLES)")));
I'm not very sure about spaces in your HTML, that's the reason why I have used partialLinkText

Clicking on <li> list item not using Selenium Java

The following list represents page navigation buttons:
<div class="list">
<ul class="pageNav">
<li class="paginate_button ">
1</li>
<li class="paginate_button ">
2</li>
<li class="paginate_button ">
3</li>
</ul>
</div>
To go to the second page for instance, I am using this Selenium Java code:
//after setting up webdriver
List<WebElement> li = driver.findElements(By.className("pageNav"));
System.out.println(li.get(2).getText());
li.get(2).click();
It's printing the text correctly "2", but not clicking or navigating correctly as if I was manually doing it on the actual website. I also tried replacing the link with an actual link like:
Visit our page
But still no luck. What am I doing wrong?
Thank you in advanced!
Try any of these below code.
In your tried code, I have noticed that you were using class locator to click on links element. But your <ul> tag does not contains the link. Inside <ul> tag, <li> tag is present and each <li> tag contains separate <a> tag.
so, here you should go with xpath or cssSelector locator.
Method 1) By using xpath locator
List<WebElement> links = driver.findElements(By.xpath("//ul[#class='pageNav']/li/a"));
System.out.println(links.size());
links.get(1).click(); //indexing start from 0, if you want to click on second link then pass indexing as 1.
Suggestion:- Instead of using absolute xpath, use relative xpath.
Method 2) By using cssSelector locator
List<WebElement> links = driver.findElements(By.cssSelector("ul.pageNav>li>a"));
System.out.println(links.size());
links.get(1).click(); //indexing start from 0, if you want to click on second link then pass indexing as 1.
Try below code
//getting all the anchor tag elements and storing in a list
List<WebElement> links = driver.findElements(By.xpath("//ul[#class='pageNav']//li[starts-with(#class,'paginate_button')]/a"));
System.out.println(links.size());
//performs click on second links
links.get(1).click();
If you're facing any abnormal difficulty which you are not able to handle directly , then you can first try to move to that element using actions class then click it as below:
WebElement we = driver.findElement(By.cssSelector("div.list > ul.pageNav li:nth-child(2));
Actions action = new Actions(driver);
action.moveToElement(we).click().build().perform();

How to access div ids using xpath?[selenium webdriver]

<div class="col-lg-3 col-sm-4 col-xs-6">
<div class="logo">..................</div> </div>
logo is inner div.
I need to acces col-lg-3 col... div content using xpath.
I did this in java:
WebElement mydiv = driver.findElement(By.className("col-lg-3 ")) ;
but it does not work - because it has spaces in the name.
How do I access this using xpath?
In CSS, you could access it like this:
driver.findElement(By.cssSelector(".col-lg-3 .logo"));
Since you asked, in XPath, it could be:
driver.findElement(By.xpath("//div[contains(#class, 'col-lg-3')]/div[contains(#class, 'logo')]")
As you can see, the CSS selector is much simpler.
To see xpath, I suggest to install Firebug and FirePath; those extensions are Firefox.
Example:
Can you see the image? xpath
Imagine that you don't have id neither name locators or you need to use xpath
Open Firefox.
Click on "Firebug". (#1)
There a panel.
Click on "Click an element in the page to inspect" icon (#2)
Click on "FirePath" tab. (#3)
Select the element that you wish (#4)
It displays the xpath into textbox. (#5)
So, you need to add this line:
driver.findElement(By.xpath("html/body/form/fieldset/p[1]/input"));

Click on jsp <span> tree element

I am having a tree element from a jsp page. When clicking this span tag then I get more of the tree.
<span class="tree " onmouseout="onMouseOutTreeNode(this)" onmouseover="onMouseOverTreeNode(this)" onclick="onToggleTree('product_main', this)">
Categories
</span>
Any recommendations how to click with selenium on this span element to expand it more?
I appreciate your answer!
UPDATE
All these tree elements look the same. The only difference is their tag text.
Try this code (Assuming, there is just a single span tag in the webpage, with innerHTML/text as "Categories") :
driver.findElement(By.xpath("//span[#class='tree ' and contains(text(),'Categories')]")).click();
vote up for the answer, what concerns your further issues, if your code is really as posted so the class being with the blank, you need to access it via xpath with the blank as well
driver.findElement(By.xpath("//span[#class='tree ' and contains(text(),'Categories')]")).click();

WebDriver Select Option from Javascript CSS drop menu works in IDE, not in code

I am having trouble selecting an item from a Javascript dropdown (i.e. the items in the drop list are not hidden in DOM tree, they are not present at all until link is clicked). I have tried using the Actions class in ways like this:
Actions cursor = new Actions(driver);
cursor.moveToElement(linkThataDropsMenu).perform();
cursor.click();
I have tried using the clickAndWait() function but it apparently does not exist in the Java webDriver libraries, and I have tried many variations of pausing and clicking in my code, including clicking twice. clickAndHold() also does nothing.
Below is the DOM tree after the menu has been generated. The only thing that changes on clicking is the insertion of div class="menu"
<div id="divIdActive_2" class="data number active" style="min-height: 21px;">
<a class="opencnl" href="#">
<span id="opencnlSpan" class="active" style="background-color:
transparent;">800-852-2222</span>
</a>
<img class="tollFree" title="Display name(s) for Toll free function properly on
Verizon Wireless devices, but may be omitted by other carriers on
their devices." src="img/nil.gif">
<input id="customNum" type="hidden" value="8008522222" name="number_2">
<div class="menu">
<a class="edit" href="#">Change Custom Number</a>
<a class="copy" href="#">Copy Settings for 0 Selected Lines</a>
<a class="clear" href="#">Clear Settings For this Line</a>
</div>
</div>
Here's the strange part though - I can get the menu to drop from the IDE, using click() or clickAndWait(), and the exact same locator. From my Java code I can use my locators to gather the text of the element I want to click, but I can't click the element. I have hundreds of other click commands in my Java code that work perfectly well, but not here. Any ideas? Thanks for reading at least!
Have you tried using isDisplayed() function ? Whichever option you want to click on should be visible before it can be clicked on . So , instead of the clickAndWait() that selenium 1 had, we have element.isDisplayed(). This has an implicit wait ( which is set when the browser driver is created , check documentation ) . By default, when Selenium encounters an isDisplayed function, it waits for that much amount of time before going forward.
I got it! The trick was to mouse over the item, then click, then mouse over the item again, which leaves the cursor there, and then grab the newly rendered objects. My guess now is that before I added that second moveToElement(), as soon as the click happened the cursor was done doing everything it was asked to do and was garbage collected. Here's my code for that - hope it helps somebody!
Actions cursor = new Actions(driver);
cursor.moveToElement(customNumberLink).perform();
cursor.click();
// move to SAME element to leave cursor where it is while Javascript runs.
cursor.moveToElement(customNumberLink).perform();
// now grab newly generated elements
WebElement clearLink = customNumberCell.findElement(By.cssSelector("a.clear"));
clearLink.click();

Categories