I am trying to use radio buttons for a number of choices on a page that I am working on. When the button is selected I want to show a small popover that indicates what the button means e.g. A = 'do this' or B = 'don't do that'.
It works fine on a desktop, but on a tablet I have to press the button twice.
Are there any tools that can facilitate this for use on a tablet?
<tr>
<td class="form-group col-md-6">Is there an indication for the drug?</td>
<td id="Indication" class="form-group col-md-6">
<p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Indicated"><input type="radio" name="indication" id="a1" value="0" <?php echo $a1; ?> required>A</input></p>
<p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Marginally Indicated"><input type="radio" name="indication" id="a2" value="0" <?php echo $a2; ?> required>B</input></p>
<p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Not Indicated"><input type="radio" name="indication" id="a3" value="3" <?php echo $a3; ?> required>C</input></p>
</td>
</tr>
Related
I try to get the id from an input submit button. When it's verified that it's the right one, then I want to click it....but I can't find the input of submit type.
I get NoSuchElementException.
Thank you guys in advance :-)
My HTML code
<html>
<body>
<form name="aspnetForm" method="post" action="./river.aspx" id="aspnetForm">
<!--CONTENT START-->
<table width="100%" style="text-align: center">
<tbody>
<tr>
<td style="vertical-align: top">
<span class="CHeading">Choose a river in Stockholm:</span><br>
<input type="submit" name="ctl00$BodyContent$btnChooseRiver00" value="River 00" id="ctl00_BodyContent_btnChooseRiver00" class="CButtonLarge">
<span><br></span>
<input type="submit" name="ctl00$BodyContent$btnChooseRiver01" value="River 01" id="ctl00_BodyContent_btnChooseRiver01" class="CButtonLarge">
</td>
<td style="vertical-align: top">
<span class="CHeading">Choose a river in Solna:</span><br>
<input type="submit" name="ctl00$BodyContent$btnChooseRiver10" value="River 10" id="ctl00_BodyContent_btnChooseRiver10" class="CButtonLarge">
<span><br></span>
<input type="submit" name="ctl00$BodyContent$btnChooseRiver11" value="River 11" id="ctl00_BodyContent_btnChooseRiver11" class="CButtonLarge">
<span><br></span>
<input type="submit" name="ctl00$BodyContent$btnChooseRiver12" value="River 12" id="ctl00_BodyContent_btnChooseRiver12" class="CButtonLarge">
<span><br></span>
<input type="submit" name="ctl00$BodyContent$btnChooseRiver13" value="River 13" id="ctl00_BodyContent_btnChooseRiver13" class="CButtonLarge">
</td>
</tr>
</tbody>
</table>
</form>
</body>
My python code:
try:
trInTable = driver.find_element_by_css_selector("#aspnetForm > table > tbody > tr")
twoTdWithData = trInTable.find_elements_by_css_selector('td')
# I get 2 TD in next step
print(len(twoTdWithData))
#loop the 2 TD
for td in twoTdWithData:
oneChoose = td.find_element_by_css_selector("input[type='submit']")
idInButton = oneChoose.get_attribute("id")
except TimeoutException:
print('TimeoutException')
except NoSuchElementException:
print('NoSuchElementException')
Welcome to SO.
Here is the code.
form = driver.find_element_by_id('aspnetForm')
submitBtns = form.find_elements_by_xpath("//table//tr//td/input[#type='submit']")
for submitBtn in submitBtns:
print submitBtn.get_attribute("id")
I'm struggling with xpath issues. The code is contained in an iframe which is being handled:
<div _ngcontent-c10 class="panel panel-info">
<div _ngcontent-c10 class="panel-heading"> ABC Output </div>
<div _ngcontent-c10 class="panel-body">
<form _ngcontent-c10 novalidate class="ng-untouched ng-pristine ng-valid">
<div _ngcontent-c10 class="row">
<table _ngcontent-c10 class="table tb-striped">
<tbody _ngcontent-c10>
<tr _ngcontent-c10="">
<td _ngcontent-c10="" class="td-fixed-width-35">
<label _ngcontent-c10="">
<input _ngcontent-c10="" type="checkbox" value="" class="ng-untouched ng-pristine ng-valid">
</label>
</td>
<td _ngcontent-c10="" class="td-fixed-width-20 no-side-padding">
<img _ngcontent-c10="" class="outputLogo" src="https://qa-server/Services/content/logos/AAAA1.png" alt="AAA1">
</td>
<td _ngcontent-c10="" class="td-text-bold">
AAA1 Output
<!---->
</td>
</tr>
<tr _ngcontent-c10="">
<td _ngcontent-c10="" class="td-fixed-width-35">
<label _ngcontent-c10="">
<input _ngcontent-c10="" type="checkbox" value="" class="ng-untouched ng-pristine ng-valid">
</label>
</td>
<td _ngcontent-c10="" class="td-fixed-width-20 no-side-padding">
<img _ngcontent-c10="" class="outputLogo" src="https://qa-server/Services/content/logos/BBB1.png" alt="BBB1">
</td>
<td _ngcontent-c10="" class="td-text-bold">
BBB1 Output
<!---->
</td>
</tr>
<tr _ngcontent-c10="">
<td _ngcontent-c10="" class="td-fixed-width-35">
<label _ngcontent-c10="">
<input _ngcontent-c10="" type="checkbox" value="" class="ng-untouched ng-pristine ng-valid">
</label>
</td>
<td _ngcontent-c10="" class="td-fixed-width-20 no-side-padding">
<img _ngcontent-c10="" class="outputLogo" src="https://qa-server/Services/content/logos/CCC1.png" alt="CCC1">
</td>
<td _ngcontent-c10="" class="td-text-bold">
CCC1 Output
<!---->
</td>
</tr>
I'm trying to find the first row in the list to click on Checkbox, these are the ones I tried already:
webElement = Driver.FindElement(By.XPath("//*[contains(text(),'AAA1 Output')]//preceding::label/input[#class='ng-untouched ng-pristine ng-valid'][#type='checkbox']"));
webElement = Driver.FindElement(By.XPath("//*[.,'AAA1 Output')]//preceding::label/input[#class='ng-untouched ng-pristine ng-valid'][#type='checkbox']"));
webElement = Driver.FindElement(By.XPath("//*[contains(text(),'AAA1 Output')]//preceding::input[#class='ng-untouched ng-pristine ng-valid'][#type='checkbox']"));
webElement = Driver.FindElement(By.XPath("//*[.,'AAA1 Output')]//preceding::input[#class='ng-untouched ng-pristine ng-valid'][#type='checkbox']"));
webElement = Driver.Instance.FindElement(By.XPath("//div[#class='panel panel-info']//following::tr[contains(., 'AAA1 Output')]/td[1]"));
webElement = Driver.Instance.FindElement(By.XPath("//[contains(.,'ABC Output']//following::tr[contains(., 'AAA1 Output')]/td[1]"));
However, they can not click on checkbox for first element.
This will get you the first tr in the table with class 'table tb-striped'
//table[#class='table tb-striped']/tbody/tr[1]
If you want to select the row based on the content, for example AAA1 Output, you can use:
//tr[contains(., 'AAA1 Output')]
Let's say you want to get the first td from the tr that contains the text AAA1 Output, you can use the following:
//tr[contains(., 'AAA1 Output')]/td[1]
And to get the checkbox inside this td, use this:
//tr[contains(., 'AAA1 Output')]/td[1]//input[#type='checkbox']
To click on this checkbox, use
driver.FindElement(By.XPath("//tr[contains(., 'AAA1 Output')]/td[1]//input[#type='checkbox']")).Click();
Just make sure you switched to the iframe before attempting to click the checkbox. You can switch to a frame using the following lines
// Find frame by its index (this is zero based)
driver.SwitchTo().Frame(0);
// Find frame by string (name or id)
driver.SwitchTo().Frame("firstFrame");
// Find frame by web element
driver.SwitchTo().Frame(myFrameElement);
Is it possible for selenium to find a label element by its "for" attribute using xpath?
I'm testing a site that has 7 yes or no questions in row. The way the CSS is done, you click on the label instead of the input radio button. Normally I'd just find the element by text content, but there is a yes and no for each question.
I'm thinking that a work-around would be to do a javascript click on the input button to get around the "element is not visible" error that I get when trying to .click() the input directly, but I wanted to see if there was a better way to locate the label which is what users would actually be clicking.
*Edit for all of your who can't remember what a label element looks like. How would you select the middle one from this group?
<label for="superLongSetOfRandomCharacters123" class="common-to-all-buttons"> No </label>
<label for="superLongSetOfRandomCharacters345" class="common-to-all-buttons"> No </label>
<label for="superLongSetOfRandomCharacters456" class="common-to-all-buttons"> No </label>
More specifically, this is how they sit in the DOM
<ul class="list-view list-view-dividers">
<li class="list-view-item">
<div class="content">
<div id="variableValue1" class="multipleChoice">
<div class="form-row">
<label>Question 1</label>
<div class="form-row">
<table class="choices" id="randomlyGenerated-1">
<tbody>
<tr>
<td>
<div class="ui-radio"><label for="randomlyGenerated1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> Yes</label><input id="randomlyGenerated1" type="radio" name="randomlyGenerated1" value="Yes"></div>
</td>
<td>
<div class="ui-radio"><label for="randomlyGenerated2" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> No</label><input id="randomlyGenerated2" type="radio" name="randomlyGenerated2" value="No"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="randomlyGenerated1-Error" class="component-error"></div>
</div>
</div>
</li>
<li class="list-view-item">
<div class="content">
<div id="variableValue2" class="multipleChoice">
<div class="form-row">
<label>Question 2</label>
<div class="form-row">
<table class="choices" id="randomlyGenerated-2">
<tbody>
<tr>
<td>
<div class="ui-radio"><label for="randomlyGenerated21" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> Yes</label><input id="randomlyGenerated21" type="radio" name="randomlyGenerated21" value="Yes"></div>
</td>
<td>
<div class="ui-radio"><label for="randomlyGenerated22" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off"> No</label><input id="randomlyGenerated22" type="radio" name="randomlyGenerated22" value="No"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="randomlyGenerated2-Error" class="component-error"></div>
</div>
</div>
</li>
</ul>
It works for selecting all labels with target 'for':
label[#for='superLongSetOfRandomCharacters123']
or you can leave #for='' blank for selecting all labels with any values (i.e. label[#for])
I guess, the XPath-Option you are looking for would be "#". so in your case something like [...]/label/#for would return you that for-value, which you could then use to check where you are ;)
Cheers
D
Use find_element_by_xpath
label = self.browser.find_element_by_xpath('//label[#for="id_field"]')
AM using bootstrap 3 for my python web application. I want to use the application in mobile devices also. but the input form fields are become responsive to the width of the device. I want in input field width to be static as in browser . please advice how to achieve this?
below is the html which am using
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-2 pull-left">
Add Timesheet Details
</div>
<div class="col-md-8 text-center">
<label class="control-label" for="timesheet_no">Time Sheet Number:01</label>
</div>
</div>
</div>
<div class="panel-body">
<form id="add_detail" class="form-horizontal" action="" method="post" name="page">
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1434973923##5ac019cd8821a1dfda978dde3710893c8b0ced33"></div>
<div class="form-group">
<div class="repeat" id="dimdetail-fieldset">
<div class="col-md-12">
<div class ="table-responsive">
<table id="table_id" class="wrapper table table-bordered">
<thead>
<tr>
<th class="col-md-2"><button type="button" class="add btn btn-primary pull-left" id="add_time"><i class="glyphicon glyphicon-plus"></i>  Time</button></th>
</tr>
</thead>
<tbody class="container">
<tr class="success">
<th class="col-md-2">Project</th>
<th class="col-md-2">Total Hours</th>
<th class="col-md-2">TPI Inspector Name</th>
<th class="col-md-2">Inspection Type</th>
<th class="col-md-2">Remarks</th>
<th></th>
</tr>
<tr >
<td class="form-group col-md-2">
<select class="form-control" id="timesheet_time_details-0-project_id" name="timesheet_time_details-0-project_id" style="width:100%"><option value="">-- please choose --</option>
<option value="12997">12997</option></select>
</td>
<td class="form-group col-md-2">
<input class="form-control" id="timesheet_time_details-0-total_hours" name="timesheet_time_details-0-total_hours" type="text" value="10.0">
</td>
<td class="form-group col-md-2">
<input class="form-control" id="timesheet_time_details-0-tpi_inspector_name" name="timesheet_time_details-0-tpi_inspector_name" type="text" value="Ram">
</td>
<td class="form-group col-md-2">
<select class="form-control" id="timesheet_time_details-0-testmethod" name="timesheet_time_details-0-testmethod" style="width:100%"><option value="__None">-- please choose --</option><option selected value="1">UltraSonic Inspection</option></select>
</td>
<td class="form-group col-md-2">
<textarea class="form-control" id="timesheet_time_details-0-remarks" name="timesheet_time_details-0-remarks" rows="3">ok</textarea>
</td>
<td class="col-md-1">
<button class="remove btn btn-danger" type="button" id=""><i class='glyphicon glyphicon-trash'></i> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 pull-left">
<button class="btn btn-primary" type="submit" value="Save" name="Save"><i class="glyphicon glyphicon-save"></i>  Save</button>
<button class="btn btn-success" type="submit" value="Submit for Approval" name="Save"><i class="glyphicon glyphicon-ok-circle"></i>  Submit for Approval</button>
<button id="delete" class="btn btn-danger" type="submit" value="Delete" name="Save"><i class="glyphicon glyphicon-trash"></i>  Delete</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Add the below css
.form-control {width:150px} /*the width you want*/
make sure it renders after your bootstrap css. You are however getting rid of the responsiveness of the row that contains the inputs.
here is a bootply example
I have another dynamic question for you. I have three input fields that I need to enter values for. These "dijit_form_DateTextBox_36" are created dynamically (the 36 is variable). There is a value earlier in the code that is unique and can be searched for. I know I need to use something like:
driver.findElement(By.xpath("//div[contains(., 'QA GM 04012014 1424 Item Name')]/parent::...somepath.sendKeys("...");
But I am still too new to this stuff to be able to figure it out. And if someone can assist me with what I need to put, as well as how they figured it out, I would greatly appreciate it. I'd really love to solve these on my own! Code is below. Bolded portion is the static text that can be searched. Bolded and italicized lines are the three controls that need to be modified. NOTE: The id="shipDate0_0" is also dynamic, it can be shipDate0_0, shipDate1_0, etc. So can't key on that.
<tr class="tableControlHeader twTableHeaderTR"></tr>
<tr class="tableControlDataRow evenRow twTableTR">
<td class="twTableTD details" align="center" rowspan="2"></td>
<td class="twTableTD details" align="center" rowspan="2">
<p>
<b>
QA GM 04012014 1424 Item Name
</b>
</p>
<br></br>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</td>
<td class="twTableTD" align="center" rowspan="2"></td>
<td class="twTableTD" align="center"></td>
<td class="twTableTD" align="center"></td>
<td id="shipDate0_0" class="twTableTD" align="center">
<div style="padding-right: 20px;">
<div id="dateWrap-projectedFirstShipDate_0_0" class="inputText_Full twControl twDateSelector" ;="" onblur="updateAvgPerWeek(0,0)" initialvalue="" value="" name="tw#local#quoteComparison#0#country#0#projectedFirstShipDate" style="white-space:nowrap;">
<div id="projectedFirstShipDate_0_0" lang="" dojoattachpoint="pickerDiv" widgetid="projectedFirstShipDate_0_0" name="tw#local#quoteComparison#0#country#0#projectedFirstShipDate">
<span dojoattachpoint="leftPicker">
<div id="widget_dijit_form_DateTextBox_36" class="dijit dijitReset dijitInlineTable dijitLeft dateSelectionSin…tBox dijitComboBox dijitDateTextBox dijitComboBoxOpenOnClick" role="combobox" widgetid="dijit_form_DateTextBox_36">
<div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" role="presentation" dojoattachpoint="_buttonNode, _popupStateNode" popupactive="true"></div>
<div class="dijitReset dijitValidationContainer"></div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="dijit_form_DateTextBox_36" class="dijitReset dijitInputInner" type="text" aria-haspopup="true" role="textbox" dojoattachpoint="textbox,focusNode" autocomplete="off" aria-valuenow="null" aria-invalid="false" tabindex="0" value="" style="" delocalized="null" aria-disabled="false"></input>
<input type="hidden" value=""></input>
</div>
</div>
</span>
<span dojoattachpoint="rightPicker"></span>
<span style="position: absolute;" dojoattachpoint="calImage"></span>
<input id="projectedFirstShipDate_0_0" type="text" isdatefield="true" name="tw#local#quoteComparison#0#country#0#projectedFirstShipDate" style="display:none" dojoattachpoint="hiddenInput" delocalized="null"></input>
</div>
</div>
</div>
</td>
<td id="InDate0_0" class="twTableTD" align="center" ;="" onclick="updateAvgPerWeek(0,0)">
<div style="padding-right: 20px;">
<div id="dateWrap-inDate_0_0" class="inputText_Full twControl twDateSelector" ;="" onblur="updateAvgPerWeek(0,0)" initialvalue="" value="" name="tw#local#quoteComparison#0#country#0#inDate" style="white-space:nowrap;">
<div id="inDate_0_0" lang="" dojoattachpoint="pickerDiv" widgetid="inDate_0_0" name="tw#local#quoteComparison#0#country#0#inDate">
<span dojoattachpoint="leftPicker">
<div id="widget_dijit_form_DateTextBox_35" class="dijit dijitReset dijitInlineTable dijitLeft dateSelectionSin…tBox dijitComboBox dijitDateTextBox dijitComboBoxOpenOnClick" role="combobox" widgetid="dijit_form_DateTextBox_35">
<div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" role="presentation" dojoattachpoint="_buttonNode, _popupStateNode" popupactive="true"></div>
<div class="dijitReset dijitValidationContainer"></div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="dijit_form_DateTextBox_35" class="dijitReset dijitInputInner" type="text" aria-haspopup="true" role="textbox" dojoattachpoint="textbox,focusNode" autocomplete="off" aria-valuenow="null" aria-invalid="false" tabindex="0" value="" style="" delocalized="null" aria-disabled="false"></input>
<input type="hidden" value=""></input>
</div>
</div>
</span>
<span dojoattachpoint="rightPicker"></span>
<span style="position: absolute;" dojoattachpoint="calImage"></span>
<input id="inDate_0_0" type="text" isdatefield="true" name="tw#local#quoteComparison#0#country#0#inDate" style="display:none" dojoattachpoint="hiddenInput" delocalized="null"></input>
</div>
</div>
</div>
</td>
<td id="OutDate0_0" class="twTableTD" align="center" onclick="updateAvgPerWeek(0,0)">
<div style="padding-right: 20px;">
<div id="dateWrap-outDate_0_0" class="inputText_Full twControl twDateSelector" ;="" onblur="updateAvgPerWeek(0,0)" initialvalue="" value="" name="tw#local#quoteComparison#0#country#0#outDate" style="white-space:nowrap;">
<div id="outDate_0_0" lang="" dojoattachpoint="pickerDiv" widgetid="outDate_0_0" name="tw#local#quoteComparison#0#country#0#outDate">
<span dojoattachpoint="leftPicker">
<div id="widget_dijit_form_DateTextBox_34" class="dijit dijitReset dijitInlineTable dijitLeft dateSelectionSin…tBox dijitComboBox dijitDateTextBox dijitComboBoxOpenOnClick" role="combobox" widgetid="dijit_form_DateTextBox_34">
<div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" role="presentation" dojoattachpoint="_buttonNode, _popupStateNode" popupactive="true"></div>
<div class="dijitReset dijitValidationContainer"></div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="dijit_form_DateTextBox_34" class="dijitReset dijitInputInner" type="text" aria-haspopup="true" role="textbox" dojoattachpoint="textbox,focusNode" autocomplete="off" aria-valuenow="null" aria-invalid="false" tabindex="0" value="" style="" delocalized="null" aria-disabled="false"></input>
<input type="hidden" value=""></input>
</div>
</div>
</span>
<span dojoattachpoint="rightPicker"></span>
<span style="position: absolute;" dojoattachpoint="calImage"></span>
<input id="outDate_0_0" type="text" isdatefield="true" name="tw#local#quoteComparison#0#country#0#outDate" style="display:none" dojoattachpoint="hiddenInput" delocalized="null"></input>
</div>
</div>
</div>
</td>
<td id="BuyQuantity0_0" class="twTableTD" align="center" onblur="updateAvgPerWeek(0,0)" name="BuyQuantity0"></td>
<td id="TotalCost0_0" class="twTableTD" align="center" name="TotalCost0"></td>
<td id="NumberOfWarehouses0_0" class="twTableTD" align="center" onblur="updateAvgPerWeek(0,0)" td=""></td>
<!--
# of Warehouses
-->
<td id="AveragePerWarehouse0_0" class="twTableTD" align="center" name="AvgPerWhouseWeek0"></td>
<!--
Cost per Warehouse
-->`enter code here`
<td id="ProjectedSellPrice0_0" class="twTableTD" align="center" td=""></td>
<!--
Projected Sell Price
-->
<td id="PercentOfTotal0_0" class="twTableTD" align="center"></td>
<td class="twTableTD" align="center" rowspan="2"></td>
</tr>
The best xpath I am able to come up with is this:
//td[normalize-space()='QA GM 04012014 1424 Item Name']/following-sibling::td[contains(#id, 'shipDate')]//input[contains(#class,'dijitInputInner')]
Let me explain:
This part finds the td element with the text you're looking for, the normalize-space() call is just like text(), but trims any whitespace before/after the text & I've found it to be invaluable since discovering it a short time ago. text() will return whitespace and is often difficult to match
//td[normalize-space()='QA GM 04012014 1424 Item Name']
This next part finds ALL td's after the previous element. From the code snippet provided this will find ALL 13 td's that follow
/following-sibling::td
Narrow down that set of 13 by finding only the td containing the ID you're interested in, this is better than using a hardcoded number like /following-sibling::td[2] to find the second td
/following-sibling::td[contains(#id, 'shipDate')]
Then find the input field that you're interested in, there are number of ways you could do this, choose whichever you prefer
//input[contains(#class,'dijitInputInner')]
//input[contains(#id,'dijit_form_DateTextBox')]
I hope that's clear enough & works well for you, please let me know if not