I got page with list of checkbox and labels assigned to them, its look like this:
x label1
x label2
x label3
As html it looks like this:
<div class="default-row">
<span class="row">
<input type="checkbox" value="on" id="gwt-uid-329" tabindex="0" >
<label for="gwt-uid-329"></label>
</span>
<div class="row-label" title="out1">test1</div>
</div>
<div class="default-row">
<span class="row">
<input type="checkbox" value="on" id="gwt-uid-321" tabindex="0" >
<label for="gwt-uid-321"></label>
</span>
<div class="row-label" title="out1">test2</div>
</div>
<div class="default-row">
<span class="row">
<input type="checkbox" value="on" id="gwt-uid-322" tabindex="0" >
<label for="gwt-uid-322"></label>
</span>
<div class="row-label" title="out1">test3</div>
</div>
And what I would like to achieve is to be able to select checkbox with specific label. Currently I got something like this:
//div[contains(text(), 'test1')]//preceding::input[#type='checkbox'][1]
but somehow it is selecting me first and last elements. 'test1' text is only placeholder, I am aiming for same xPath for each checkbox with only different label. Any ideas?
I can not change/add any new class names or id's.
Ok, so I just made some stupid mistake. Answer is:
//div[contains(text(), 'text1')]//preceding-sibling::span//input[#type='checkbox']
I will leave post. Maybe it will help someone. Cheers.
Related
Code:
<label class="form__label" for="urgency">Urgency</label>
<input class="form__input no-input-animation" id="urgency" name="urgency" type="radio" required>
<div class="urgency-text critical">Critical</div>
<div class="urgency-text high">High</div>
<div class="urgency-text medium">Medium</div>
<div class="urgency-text low">Low</div>
This shows one radio button with each urgency div as one option collectively. I can understand why.
I would like my buttons to have no radio checkbox and each of the divs be its own option, with a value attribute.
EXAMPLE:
Choose Status:
[ Available ] [ Idle ] [ Do Not Disturb ]
Each item in square brackets [] is clickable and has it's own value attribute, e.g. available
How do I make this work inside a form?
Thanks.
I will suggest you to refer to this as an example. I believe this is exactly what you're looking for.
<div class="container">
<div class="segmented-control" style="width: 100%; color: #5FBAAC">
<input type="radio" name="sc-1-1" id="sc-1-1-1">
<input type="radio" name="sc-1-1" id="sc-1-1-2">
<input type="radio" name="sc-1-1" id="sc-1-1-3" checked>
<label for="sc-1-1-1" data-value="High">High</label>
<label for="sc-1-1-2" data-value="Medium">Medium</label>
<label for="sc-1-1-3" data-value="Low">Low</label>
</div>
CodePen Example <-- Is what youre looking for.
Visit this blog for more information.
I am trying to reference a checkbox next to a label of a certain name containing an underscore.
An example DOM looks like
<div id="form-2143">
<div id="wrap-1353">
<label id="numberfield-1234-label">
<span class="x-form-label">admin_user </span>
</label>
<input type="checkbox" id="checkbox-1353"
class="form-field" componentid="cb1353">
</div>
...
</div>
The aim is to select the input element so I can click it in Selenium.
The below XPath to my understanding should work
//label[span[contains(string(),"admin_user")]]../input
The problem is that the above works but only with 'admin' not 'admin_user'.
Using just with 'admin' gets multiple results. I can only guess it is to do with the '_' though it could easily be a quirk with the site i am testing.
I also can't guarantee the order of the label and input, hence the go up then down
An underscore (_) requires no special provision in XPath (sub)string testing.
Given your HTML corrected to be well-formed,
<div id="form-2143">
<div id="wrap-1353">
<label id="numberfield-1234-label">
<span class="x-form-label">admin_user </span>
</label>
<input type="checkbox" id="checkbox-1353"
class="form-field" componentid="cb1353"/>
</div>
...
</div>
this XPath,
//div[label[contains(., 'admin_user')]]/input
selects the input element contained within the div that contains a label whose string value contains the substring admin_user.
You have forgotten to make level up again
//label//span[contains(text(),'admin_user')]/../../input
For example: with two examples of "admin_user" and "admin_test"
<div id="form-2143">
<div id="wrap-1353">
<label id="numberfield-1234-label">
<span class="x-form-label">admin_user</span>
</label>
<input type="checkbox" id="checkbox-1353" class="form-field" componentid="cb1353">
</div>
<label id="numberfield-1234-label">
<span class="x-form-label">admin_test</span>
</label>
<input type="checkbox" id="checkbox-1353" class="form-field" componentid="cb1353">
</div>
</div>
I have the following code and I'm trying to isolate the radio buttons into two xpath expressions so I can click on them in nightwatch for QA.
Please keep in mind this page in particular has many other radio buttons so the expression needs to be specific to this. Also the reactid's are dynamic and change so can't hook into that. Much appreciated
<div class="form-group" data-reactid=".0.1.0.1.0.0">
<label class="control-label" data-reactid=".0.1.0.1.0.0.$label">
<span data-reactid=".0.1.0.1.0.0.$label.1" style="">Able to change e-mail</span>
</label>
<div class="wrapper" data-reactid=".0.1.0.1.0.0.$wrapper" style="">
<input type="radio" name="allow_change_email" checked="" data-reactid=".0.1.0.1.0.0.$wrapper.0:0" style="">
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:1" style=""> Allow</span>
<br data-reactid=".0.1.0.1.0.0.$wrapper.0:2">
<input type="radio" name="allow_change_email" data-reactid=".0.1.0.1.0.0.$wrapper.0:3" style="">
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:4" style=""> Disable</span>
</div>
This is one possible XPath : (formatted for readability)
//label[span='Able to change e-mail']
/following-sibling::div[1]
/input[#type='radio' and following-sibling::span[1][normalize-space()='Allow']]
explanation :
//label[span='Able to change e-mail'] : find label element where child span content equals "Able to change e-mail"
/following-sibling::div[1] : from such label, find the nearest following sibling div element
/input[#type='radio' and following-sibling::span[1][normalize-space()='Allow']] : from such div, return input element where type attribute equals "radio" and the nearest following sibling span equals "Allow"
xpathtester demo
output :
<input checked="" data-reactid=".0.1.0.1.0.0.$wrapper.0:0" name="allow_change_email" style="" type="radio"/>
First, you don't have valid XML.
If you manage to correct it you can use this:
//input[#type='radio']
'Corrected' XML:
<?xml version="1.0" encoding="utf-16"?>
<div class="form-group" data-reactid=".0.1.0.1.0.0">
<label class="control-label" data-reactid=".0.1.0.1.0.0.$label">
<span data-reactid=".0.1.0.1.0.0.$label.1" style="">Able to change e-mail</span>
</label>
<div class="wrapper" data-reactid=".0.1.0.1.0.0.$wrapper" style="">
<input type="radio" name="allow_change_email" checked="" data-reactid=".0.1.0.1.0.0.$wrapper.0:0" style="" />
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:1" style=""> Allow</span>
<br data-reactid=".0.1.0.1.0.0.$wrapper.0:2" />
<input type="radio" name="allow_change_email" data-reactid=".0.1.0.1.0.0.$wrapper.0:3" style="" />
<span data-reactid=".0.1.0.1.0.0.$wrapper.0:4" style=""> Disable</span>
</div>
</div>
I found a solution for anyone else that may be in the same situation.
//*[text()="Able to change email"]/following::span[text()= " Allow"][1]/preceding-sibling::input[1]
For Allow:-
//div[#class='wrapper']/input[1][#type='radio']
For Disable:-
//div[#class='wrapper']/input[2][#type='radio']
I am having trouble getting the reset button to clear checkboxes on a Foundation 4 custom form. I haven't found anything specifically talking about this issue so far. I found this post (which is Foundation 5): http://foundation.zurb.com/forum/posts/3317-refresh-form-on-click-of-cancel-button , which is slightly similar to my issue.
I modified the Codepen in the zurb forum above to help troubleshoot the issue to demonstrate my problem. As you can see, the reset button does not clear the checkbox. If I remove the "custom" class, the reset works. However, the look and functionality of the form relies on the custom class, so that's not an option.
http://codepen.io/jdkoelsch/pen/jzLgB
Here is the code from Codepen (stack overflow wants me to include code if I link to codepen.io)
<form class="custom" data-abide>
<div class="row">
<div class="small-12 medium-6 columns field1">
<label for="field1">Field1 <span class="required">Required</span>
<input id="field1" maxlength="20" name="field1" type="text" required pattern="alpha" placeholder="Field1">
<small class="error">Please enter something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field2">
<label for="field2">Field2 <span class="required">Required</span>
<input id="surname" maxlength="20" name="field2" type="text" required pattern="alpha" placeholder="Field2">
<small class="error">Please something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field3">
<label for="field3">Field23 <span class="required">Required</span>
<input id="chkbox" name="field3" type="checkbox">
<small class="error">Please something valid.</small>
</label>
</div>
</div>
</form>
<div class="row">
<button class="clear">Clear</button>
</div>
Is there anything I can do (besides updating to Foundation 5) to get the reset button to work?
Looks like in your codepen example your not choosing the right selector, try "form div label". Also set the focus_on_invalid:false. Try the js below -
$(document).foundation({
abide : {
live_validate : true,
focus_on_invalid : false
}
});
$(".clear").on("click",function(){
$("form")[0].reset();
$("form div label").removeClass("error");
});
I have the following html
<div class="row">
<div class="col-lg-6">
<label class="radio">
<input type="checkbox">
</label>
</div>
<div class="col-lg-1">
<input type="text" disabled="" class="col-lg-2 form-control" name="notes_33">
</div>
</div>
there is an on click event on the checkbox input in "col-lg-6" div, i want to get the value input text under "col-lg-1", here is my way to get it
$("#medication").on('click', ':checkbox', function(){
var $note = $(this).parent().parent().siblings('.col-lg-1').find(":text");
//... change the value of $note
});
is my way is good? is there any better way to traverse to the input filed starting from the check box?
This looks like simpler:
$(this).closest('.row').find(':text')
Edit:
Here is the comparisons between closest and parents:
http://jsperf.com/jquery-parents-vs-closest