We Keep Coding

Unable to locate and click checkbox ::before using Selenium Webdriver

I'm trying to click a checkbox but it's keep clicking the link 'terms and conditions'. Although my xpath (mentioned below) work on a minimized window but it's failing to click the checkbox when the window is maximized because the href (image) appears in the second line next to checkbox. Looking for some suggestions on clicking the checkbox widget on maximized window. I need to get a focus on it.
Interestingly, when i hover over the ::before (css selector) only than the widget gets highlighted.
<div class="checkbox u-mar-bot-5">
<div class="checkbox__container">
<input class="checkbox__input" type="checkbox" id="basket-contact-terms" required data-parsley-multiple="basket-contact-terms" style>
<label class="checkbox__label checkbox__label--has-link checkbox__label--small" for="basket-contact-terms" style>
::before
"I have read and agree to " <a class="text-link text-link--base text-link- small" href="/terms-conditions" target="_blank">Terms and Conditions</a>
</label>
</div>
</div>
image: Terms and Conditions
I tried a few options that keep failing to check the box and instead the link 'terms and conditions' gets the click. I must be missing something basic.
driver.findElement(By.xpath("//label[#for='basket-contact-terms']")).click();
driver.findElement(By.xpath("//label[contains(#class,'checkbox__label checkbox__label--has-link checkbox__label--small')]")).click();
I did looked around and found someone suggested to use this (below) so i tried but didn't work:
WebElement elem = driver.findElement(By.xpath("//div[contains(#class,'checkbox u-mar-bot-5')]"));
Actions action = new Actions(driver);
action.moveToElement(elem).click().build().perform();
Any suggestion would be appreciated.

Since you tried the ID of the INPUT and it threw an error that it wasn't visible, I would first try a wait to see if it will become visible. (I'm assuming it won't but it's worth a try first).
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("basket-contact-terms"))).click();
If that doesn't work, I would next try to click a different position on the element. By default, Selenium clicks on the center of the element. In your case, I think this is what's causing the issue. You can use Actions to click the upper left (1,1) of the element.
WebElement label = driver.findElement(By.xpath("//label[#for='basket-contact-terms']"));
new Actions(driver).moveToElement(label, 1, 1).click().perform();

You can try with
WebElement elem = driver.findElement(By.id("basket-contact-terms"))

Clicking on Image Link with Selenium webdriver 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']

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

Insert a button into a div on a jsp using document ready

I have a layout.jsp that I am using to build a page using multiple other jsp's.
In my main content jsp pages I have a button or two. In the current version I am positioning the div with the buttons relatively.
I am switching the way the page is designed. I created a div in my layout page to place the buttons into. I gave it an appButtonDiv class.
The issue I am running into is I do not know how to create a button insert it into the div. I would like to do this on document ready.
Here is the div I want to put the button(s) into.
<div class="row-fluid verticalmenubottom">
<div class="span12 verticalMenuCell appButtonDiv"></div>
</div>
Below is a example button.
<button type="submit" id="searchButton" name="searchButton"
value='<spring:message code="Generic.Search"/>'/>
Search</button>
There are some cases where I will have multiple buttons.

I haven't JSP competence, however you are asking how to add content to an element on document ready.
Using JQuery, you can do this:
$(document).ready(init);
else without JQuery, you might use the onload event of your body element:
<body onload="init()">...</body>
Then declare this function in your script tag:
function init() {
//this executes on document ready
//create your elements
var externDiv = document.createElement('div');
var internDiv = document.createElement('div');
externDiv.className = 'row-fluid verticalmenubottom';
internDiv .className = 'span12 verticalMenuCell appButtonDiv';
externDiv.appendChild(internDiv);
//find your button and put the new elements in it (check that your jsp don't change the id client-side)
var btn = document.getElementById('searchButton');
btn.appendChild(externDiv);
}
That's it!

You mean u want to insert a button inside a button?
or create another button inside the div?
<div class="row-fluid verticalmenubottom">
<div id="button1" class="span12 verticalMenuCell appButtonDiv"></div>
<div id="button2" class="span12 verticalMenuCell appButtonDiv"></div>
</div>
or i miss something ## ?

Disabling a link on leftnavigation pane once clicked

Using Javascript how to disable a link after clicking it once.
The scenario is that:
I have a left navigation pane, having links to distinct JSP's which get displayed in .What I want to accomplish is that after I click a link it should open in the center and the hyperlink should be disabled in the left pane.
I am able to navigate through the left navigation pane. But not able to disable the link of the page which shows up in center.
Any help would be greatly appreciated.

create an hidden span next to the link.
your link
<span style="display:none">your alter link text</span>
then on the script do
$("#myLink").click(function(){ $(this).hide().next().show(); });

You need to declare a hidden element and give it a flag value that keeps if the link is disabled or not. Now whenever you click on the link the hidden element will be read by the server and in the second load you can disable your link according to the value of the flag with a simple check in the jsp.

Something like the following should work:
<a onclick="
var el = this;
setTimeout(function(){el.onclick=function(){return false;}},1);
" ... >link</a>

You can do that way:
jQuery(document).ready( function() {
jQuery("a#yourLinkId").click( function(event) {
jQuery(this).attr('disabled', '');
// You can optionally prevent default processing and implements your own:
event.preventDefault();
});
});

$("#click").click(function(e){
...
e.preventDefault();
$(this).unbind('click');
});