The capybara choose method works well for a radio button which has the label tag next to it with the required text, like below:
<input id="rGEQr-real" type="radio" name="_pgcr6g7j"/>
<label id="rGEQr-cnt" class="z-radio-content" for="rGEQr-real">Web IDE Support</label>
page.choose('Web IDE Support') works fine for this.
But for something like this:
<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>
which doesnt have label tag, the simple choose fails to set radio button.
How can we achieve this in Capybara??
If you need to choose a radio button by anything other than its name, id or label text, you will need to:
Find the radio button, typically with find and a CSS or XPath.
Call the set method
In this case, you will need to use XPath since CSS-selectors do not support locating by text. The XPath will need to check that the following sibling text node is the specified text. This can be done with:
# Select MALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set(true)
# Select FEMALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set(true)
Related
I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.
I'm working on a AA accessible web application where I have a simple form with radio button group. When I have already selected a radio button and change the selection, Android Talkback announces state changes twice.
It would say, "unchecked checked" or "checked unchecked".
My markup is strictly following the accessibility guidelines as described here https://webaim.org/techniques/forms/controls#radio. I'm not even sure if this is a bug or feature.
Codepen: https://codepen.io/bhargavshah/pen/PXVBML
<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>
Expected Result: Talkback should just announce "Checked" on a radio button when selection changes.
Actual Result: Talkback announces "Unchecked checked" on a radio button when selection changes.
I just came across this post as I was looking for an answer to a different question related to checkboxes, but just in case you never got your answer, this is not a defect. This is expected screen reader behavior to tell you the current state of the item followed by the new state.
I'm trying to build a data scraper with Selenium Python that searches a webpage. The search page contains a dojoComboBox that allows you to select a name from a dropdown list.
Here is the HTML for the dojoComboBox:
<span _="whitespace and CR's between tags adds in FF" class="dojoComboBoxOuter dj_khtml dj_safari dropSel" style="null">
<input style="display:none" tabindex="-1" name="txtCaseName" value="" dojoattachpoint="comboBoxValue">
<input style="display:none" tabindex="-1" name="txtCaseName_selected" value="" dojoattachpoint="comboBoxSelectionValue">
<input type="text" autocomplete="off" class="dojoComboBox dropSel" dojoattachevent="key:_handleKeyEvents; keyUp: onKeyUp; compositionEnd; onResize;" dojoattachpoint="textInputNode" style="null">
<img hspace="0" vspace="0" class="dojoComboBox dropSel" dojoattachpoint="downArrowNode" dojoattachevent="onMouseUp: handleArrowClick; onResize;" src="dojo/src/widget/templates/images/combo_box_arrow.png" style="width: 13px; height: 13px;">
</span>
I can get the DojoComboBox scroll menu to open with the following code:
dropdown = browser.find_element_by_css_selector("img.dojoComboBox")
dropdown.click()
However, I can't seem to find a way to actually select one of the values.
Update:
The HTML I posted above is from the page I pull up when I inspect elements (the HTML under the 'Elements' tab of Chrome DevTools). I've been looking at some other files that I found in the 'Source' tab, and I found some code in a page called main.aspx?e=nauqov2blnhlnh45eseztnao that looks also related to the DojoComboBox:
<select name="txtCaseName" id="txtCaseName" class="dropSel"dojotype="ComboBox"
setSelectedValue="dojo.byId('txtCaseName1').value=arguments[0]"
autocomplete="true" dataurl="CaseCode.aspx?match=%{searchString}&lang=e"
mode="remote" maxlistlength="7">
</select>
However, neither of these seem to encode options that I can select. I thought that perhaps the options would be stored in the url labeled 'dataurl' in the piece of HTML above, but when I copy that link into my address bar, it doesn't take me to a valid webpage. From what I've found in the Dojo documentation, it seems like the options should be stored in a separate file/database, but I can't find any suggestions about how to access that file.
Any suggestions? (Thanks!)
you will have to store every options in a list. Then based on some conditions such as name of option, you can choose it and click on it.
all_options = browser.find_elements_by_css_selector("your locator for every options")
for options in all_options:
if "option_name" in options.text.strip():
options.click()
I have a search bar on my web page. What do I use as the src="" if I want to make the link jump to the input section of the search bar, with the cursor blinking there too. I'm using twitter bootstrap 3 if that helps.
Try to use html label for your input.
<input type='text' id='search'/>
<label for='search'>Search</label>
Assuming that you have an input with an id of search like this:
<input type="text" placeholder="Search" class="form-control" id="search">
Then you can do this:
go to search
The preferred way to do this would be with an event handler (versus inline as I've shown above) for maintainability. That would look something like this if you're using jQuery (which I'm just assuming you are since you've marked this with a Twitter Bootstrap tag):
go to search
$(document).ready(function() {
$('.searchlink').on('click', function() {
$('#search').focus();
}):
});
I am working on a Google chrome extension. the idea is that I enter my username and password, click submit and have a new tab open with my website, which will then pick up the submitted form and log me in.
I have managed to open my website in a new tab, but can not get it to pick up the form.
You can use OnClick event in submit button:
<input type="submit" value="submit" onclick="this.form.target='_blank';return true;">
You can create an HTML form in your popup.html as follows:
<form name="input" action="http://example.com/login.php" method="get">
Username: <input type="text" name="user">
Password: <input type="password" name="password">
<input type="submit" value="Submit"></form>
And in the script of your website you can check if the parameters and have been passed, and if correct then create redirect them to the DashBoard on your site, otherwise show them the login page to enter the correct credentials
Since you've got your website loaded, try using jquery to select the textbox and enter a value.
The following selects the where the input is, then finds the input I want, then finally sets the value inside of that box.
$("td[data-key='sku']").find("input.tb-input").val('some text here')
In the jquery code above, the html would look something like this:
<td data-key='sku'>
<input class=tb-input/>
</td>