I need to read text value from span tag inside a selected radio button using capyvara
I have a list of radio button followed by text and its count in brackets.
For eg: radiobutton with Thank You(82)
What I want is to read the selected radio button count 82 inside bracket.
I used following code..but it is not working
value=page.find(".cardFilterItemSelection[checked='checked'] + span.itemCount").text
and tried using Xpath but not getting anything
value=page.find(:xpath,"//input[#class = 'cardFilterItemSelection' and #checked = 'checked']/span[#class = 'itemCount']/text()")
How it is possible?
<label id="thankyou_label" for="thankyou_radio" class="itemName radio">
<input checked="checked" tagtype="Occasion" value="Thank You" id="thankyou_radio" name="occasionGroup" class="cardFilterItemSelection" type="radio">
<span class="occasion_display_name">
Thank You
</span>
<span class="itemCount">
(82)
</span>
</label>
<label id="spring_label" class="itemName radio" for="spring_radio">
<input id="spring_radio" class="cardFilterItemSelection" type="radio" name="occasionGroup" value="Spring" tagtype="Occasion">
<span class="occasion_display_name">
Spring
</span>
<span class="itemCount">
(0)
</span>
</label>
I think you were on the right track. But you should have query not for the text node contained by span, but for the span itself and use XPath axes
span = page.find(:xpath,"//input[#class = 'cardFilterItemSelection' and #checked = 'checked']/following-sibling::span[#class = 'itemCount']")
value = span.text
However I personally find css selectors more readable (unless you need to make complex query)
span = page.find(:css, 'input.cardFilterItemSelection[checked=checked] ~ span.itemCount')
value = span.text
Related
Is there any option to access input in code like this:
(...)
<div class="dialogProp">
<div class="gwt-Label">Name</div>
<div class="floatLeft">
<div>
<input type="text" class="textBox">
</div>
<div class="notVisible"></div>
</div>
<div class="dialogProp">
<div class="gwt-Label">Surname</div>
<div class="floatLeft">
<div>
<input type="text" class="textBox">
</div>
<div class="notVisible"></div>
</div>
(...)
As you can see I got two inputs and only difference between them is label inside of div with different text inside. This kind of pattern can be found all around of website and I cannot change this. I can not add id's as well.
Do you know if there is possibility to add to the xPath this different text inside of div's?
Let's say I would like to access first input.
Of course I could use some ass long xPath, but I would like to reuse this with text inside of gwt-Label as variable.
Use below to locate input by label text:
//div[#class="gwt-Label" and .="Name"]/following-sibling::div//input
In Python you can pass label from variable:
label = "Name"
xpath = '//div[#class="gwt-Label" and .="%s"]/following-sibling::div//input' % label
To access the input with respect to the label text you can use the following solution:
labelText = "Name"
#or labelText = "Surname"
xpath = "//div[#class='gwt-Label' and contains(.,'" +labelText+ "')]//following::div[1]//input"
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
The cheatsheets and docs on Watir show something like this to set a radio button
b.radio(:id => "radio").set
How can I select a Radio button based on the text next to it?
Sometimes this text is inside the label tag , sometimes its just inside some div/form tag. How do we handle this in Watir??
(Label texts in CAPS in below examples)
Example 1:
<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>
Example 2 :
<div class="isoversixteen_false_container">
<input id="isoversixteen_false" class="radio" type="radio" value="0" name="isoversixteen" autocomplete="off"/>
<label class="isoversixteen_false_label" for="isoversixteen_false">
<span class="label_main">UNDER 16</span>
</label>
</div>
<div class="isoversixteen_true_container">
<input id="isoversixteen_true" class="radio" type="radio" value="1" name="isoversixteen" autocomplete="off" checked="checked"/>
<label class="isoversixteen_true_label" for="isoversixteen_true">
<span class="label_main">16 OR OVER</span>
</label>
</div>
Orde's comment about using attributes of the input element is a good idea as it is the easiest to program. However, to answer the question:
Example 1 - Adjacent text node
In this example, the desired text is in an adjacent text node. Given that the radio buttons share the same parent, I think the easiest solution would be to use XPath:
browser.radio(xpath: '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set
browser.radio(xpath: '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set
The XPath says to:
Find an input element where
The following text node - ie the [1]
Has the text "MALE" or "FEMALE", ignoring the leading/following spaces - ie the [normalize-space(.) = "FEMALE"]
Example 2 - Label text
In this example, the checkboxes have a properly associated label element - ie the id of the checkbox matches the for attribute of the label. Watir supports locating elements by their label text through the :label locator:
browser.radio(label: 'UNDER 16').set
browser.radio(label: '16 OR OVER').set
Example - First following non-blank text node
If you want a single solution that works with both examples, the following seems to work:
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "UNDER 16"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "16 OR OVER"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "MALE"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "FEMALE"]]').set
The intent here is to find the first text node after the checkbox that has text (the [normalize-space(.) != ""][1] portion) and that text matches the expected text (the [normalize-space(.) = "UNDER 16" portion).
This is HTML structure I have in my example:
<div class="radio-inline">
<label for="job_type">Second Type</label>
<input id="job_service" name="job" type="radio" value="remote">
</div>
Normally I'd select it with:
#browser.input(:value => 'remote').click
However, per your question, I tried to see if I could select by text. I found this works, but may be dependent on the labels being nested in a div.
#browser.label(:text => /Second Type/).click
The / around "Second Type" were due to some weird line breaks in the HTML, may work with just quotes.
I have to click on element whose Id is changeable,means dynamic value assign to text box everytime . I have to insert value in text box.
Following is the inspect element code of text box
<div class="invoicing-details">
<div>
<label for="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca"> To </label>
<input id="PaidToContactID" type="hidden" value="" name="PaidToContactID">
<div class="controls">
<input id="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca" type="hidden" style="display:none;" value="" name="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca">
<input id="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_value" class=" autocompleter field " type="text" style="width:127px;" tabindex="10" value="" maxlength="255" name="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_value" autocomplete="off">
<div id="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_suggestions" class="autocomplete" style="display: none; height: 200px; width: 200px;"> </div>
<script type="text/javascript">
</div>
</div>
"PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_value" this is text box id.
I used following code
self.set_text_value('div.invoicing-details input' ,"my value",true)
but it does not work and getting syntax error.
Can anyone help me and provide syntax how to write ruby script for seleinum.
Dynamic ids very bad for automation. You can try to add other property to input element with stable name. As i clearly understood you need to click on element and then input text in it?! I'm not good at ruby, but i think this should look like:
element = driver.find_elements(:css,".invoicing-details .autocompleter")
element.click
element.send_keys "Some text"
You can try to find id of an element using next xpath: //input[#id=(//label[contains(text(),'To')]/#for)]. Here you find a label by its text and then get for attribute (it is needed id).
element = driver.find_elements(:xpath,"//input[#id=(//label[contains(text(),'To')]/#for)]")
element.click
element.send_keys "Some text"
I have a very basic hide/show div function set up for when people click a certain radio button. In one of the hidden divs I need to create a form however when I add input fields to the hidden div my function stops working.
<div id="tabs">
<div id="nav">
<input type="radio" name="primary_contact_director" value="Yes" class="div1">Yes</input>
<input type="radio" name="primary_contact_director" value="No" class="div2">No</input>
</div>
<div id="div1" class="tab">
<p>this is div 1</p>
</div>
<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
This code works however when I add
<label class="title">First Name:</label>
<input type="text" name="first_name" class="form">
<label class="title">Last Name:</label>
<input type="text" name="last_name" class="form">
<label class="title">Business Address:</label>
<span class="instructions">Please enter a physical address. P.O. Boxes are not acceptable for filing.<br>
If your business is run out of your home, please list that address.</span><br>
<input type="text" name="business_address" class="form">
<label class="title">City:</label>
<input type="text" name="business_city" class="form">
<label class="title">State</label>
<select name="business_state">
<option value="California">California</option>
</select>
<label class="title">Zip Code:</label>
<input type="text" name="business_zip" class="form">
<label class="title">Business Phone Number:</label>
<input type="text" name="business_phone" class="form"><br>
to my div2 it stops working.
Hopefully this is a clear explanation. Any help is always appreciated!
In your hideTabs() function, you've got two typos.
First, you're iterating through the tab[] array, but you're checking it against the length of the nav[] array. This works because you have the same number of elements in your first example, but that's just a coincidence. If you evaluate it against the tab[] array's length, it will work better. The other problem you have is that your for loop ends at greater-than-or-equal-to length. THe problem is that arrays start counting at zero, so if the length is 3, the items on the list are tab[0], tab[1], and tab[2]. your code was trying to set something for tab[3], which didn't exist.
Here's the working code:
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<tab.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
In the future, you should look into using the javascript console in Chrome (or any other browser) to check for errors if your scripts stop working—usually there's an error that that will give you hints as to what's happening.