I am using Coded UI for creating some test cases for a web application, while doing the same I have encountered an issue. The page contains 3 tables with mutiple check boxes, I am not able to click on checkboxes reading data from excel.Someone help me to find a solution
Here is my html code:
Table 1 - HTML:
<table id="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01">
<tbody>
<tr>
<td>
<input
id="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_0"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPEC01_01$0"
value=" Ambu-bag ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_0"> Ambu-bag </label>
</td>
<td>
<input
id="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_1"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPEC01_01$1"
value=" apnea monitor ">
<label
for="ContentPlaceHolder1_ctl04_cbl_CCPEC01_01_1"> apnea monitor </label>
</td>
<td>
</tr>
</tbody>
</table>
Table 2 - HTML:
<table id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01">
//table 2
<tbody>
<tr>
<td><input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_0"
type="checkbox" name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$0"
value=" Universal ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_0"> Universal </label>
</td>
<td>
<input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_1"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$1" value=" Aspiration ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_1"> Aspiration </label>
</tr>
</tbody>
</table>
Here is my sample code.But not working fine.
Table 1 - Code:
String valueEquipmentChecklist = data.getEquipmentChecklist().get(rowCnt);//data reading from excel
List<WebElement> equipChecklist = driver.findElements(By.xpath("//input[#type='checkbox']"));
List<String> equipmentChecklistList = new ArrayList<String>(Arrays.asList(valueEquipmentChecklist.split(",")));
for (String equipmentChecklistCheck : equipmentChecklistList) {
for (WebElement equipmentChecklistChk : equipChecklist) {
if (equipmentChecklistChk.getAttribute("value").equalsIgnoreCase(equipmentChecklistCheck)) {
if (!equipmentChecklistChk.isSelected()) {
equipmentChecklistChk.click();
}
}
}
}
Table 2 - Code:
String valueOngoingPrecuations = data.getOngoingPrecuations().get(rowCnt);
List<WebElement> ongoingPrecuations = driver.findElements(By.xpath("//input[#type='checkbox']"));
List<String> ongoingPrecuationsList = new ArrayList<String>(Arrays.asList(valueOngoingPrecuations.split(",")));
for (String ongoingPrecuationsCheck : ongoingPrecuationsList) {
for (WebElement ongoingPrecuationsChk : ongoingPrecuations) {
if (ongoingPrecuationsChk.getAttribute("value").equalsIgnoreCase(ongoingPrecuationsCheck)) {
if (!ongoingPrecuationsChk.isSelected()) {
ongoingPrecuationsChk.click();
}
}
}
}
accoring to HTML you provided value of checkboxes contains spaces, possibly in your excel file this spaces are not exist, so you should delete spaces in value of checkbox before comparing or use "contains" instead of "equals"
Related
I need to get disabled from <input> tag.
HTML snippet is like:
<tr>
<td><input type="radio" name="orderChoice" value="1" checked></td>
<td>Audi A4, Auto, A/C, $50.00/day</td>
<td>user</td>
<td>Иванов Иван Иванович 1983-10-03 АВ954326 Святошинським РУ ГУ МВС України у м. Києві 2001-06-05</td>
<td>2021-07-10 18:00:00.0</td>
<td>2021-07-20 14:00:00.0</td>
<td>500.00</td>
<td> <input type="checkbox" name="processed" disabled> </td>
<td> <input type="checkbox" name="rejected" disabled> </td>
<td></td>
<td> <input type="checkbox" name="picked" disabled> </td>
<td> <input type="checkbox" name="returned" disabled> </td>
<td> <input type="checkbox" name="damaged" disabled> </td>
<td></td>
<td></td>
<td> <input type="checkbox" name="paid" disabled> </td>
</tr>
I have the loop which looks like:
for (Element tableRow : tableRows) { // iterate over all the table rows (tr elements)
Element row = tableRows.get(tableRow.elementSiblingIndex());
String vehicle = row.select("tr > td").get(1).text();
Element td = row.select("tr > td").get(10); // <td> <input type="checkbox" name="picked" disabled> </td>
Elements checkbox = td.select("td > input[type=checkbox]"); // <input type="checkbox" name="picked" disabled>
String picked = checkbox.attr("name"); // picked
tableList.add(new Table(picked, vehicle));
}
and I need to get disabled from input tag.
Can someone suggest me, please, the way how can I get it without specifying the value explicitly, since checkbox can be changed dynamically?
Thanks to #PeterMmmm and #dan1st suggestions, I've solved using attributes().hasKey("disabled") and first() methods like:
for (Element tableRow : tableRows) { //iterate over all the table rows (tr elements)
Element row = tableRows.get(tableRow.elementSiblingIndex());
String vehicle = row.select("tr > td").get(1).text();
Element td = row.select("tr > td").get(10);
Element input = td.select("td > input[type=checkbox]").first();
Elements checkbox = td.select("td > input[type=checkbox]");
String picked = checkbox.attr("name");
if (input.attributes().hasKey("disabled")) {
//...
} else {
//...
}
}
I'm trying to check multiple Checkbox in a table via reading data from Excel, it is actually able to read data from excel and locate the Checkbox but it does not check/click the checkbox. The ongoingPrecuationsChk.click(); is not working and it does not show any exception(skips execution of the line), can somebody explain to me why it's not checking/clicking the checkbox? Below is my html code:
<table id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01">
<tbody>
<tr>
<td>
<input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_0"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$0"
value=" Universal ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_0"> Universal </label></td>
<td><input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_1"
type="checkbox"
name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$1"
value=" Aspiration ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_1"> Aspiration </label></td>
<td><input id="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_2"
type="checkbox" name="ctl00$ContentPlaceHolder1$ctl04$cbl_CCPOP01_01$2"
value=" Respiratory ">
<label for="ContentPlaceHolder1_ctl04_cbl_CCPOP01_01_2"> Respiratory </label></td>
</tr>
</tbody>
I have tried the following code:
String valueOngoingPrecuations = data.getOngoingPrecuations().get(rowCnt);//data reading from excel(Aspiration,Universal)
List<WebElement> ongoingPrecuations = driver.findElements(By.xpath("//input[#type='checkbox']"));
List<String> ongoingPrecuationsList = new ArrayList<String>(
Arrays.asList(valueOngoingPrecuations.split(",")));
for (String ongoingPrecuationsCheck : ongoingPrecuationsList) {
for (WebElement ongoingPrecuationsChk : ongoingPrecuations) {
if (ongoingPrecuationsChk.getAttribute("value").equalsIgnoreCase(ongoingPrecuationsCheck)) {
ongoingPrecuationsChk.click();
}
}
}
Use xpath based on id of tbody like below.
//tbody[contains(#id,'tableBodyId')]//input
This will give you list of checkboxes. Then use
WebElement btn = driver.findElement(By.xpath("xpath"));
btn.click();
I have a blur function that writes to the data base
$(".thoughts_box").blur(function(){
var box_id= $(this).attr("id").split("_")[$(this).attr("id").split("_").length-1];
writeListValue(1,box_id,$(this).val());
});
Here is my table
<td><input class="printArea_1 thoughts_box" name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" name="_1" /></td>
</tr>
here is how I am printing it out
function print_list() {
$('input[id=printLoad_1]').val($('input[class=printArea_1]').val());
$('input[id=printLoad_2]').val($('input[class=printArea_2]').val());
$('input[id=printLoad_3]').val($('input[class=printArea_3]').val());
$('input[id=printLoad_4]').val($('input[class=printArea_4]').val());
$('input[id=printLoad_5]').val($('input[class=printArea_5]').val());
for( var i=1; i<=5; i++ ) {
if( document.getElementById('printLoad_'+i).value === '' ) {
document.getElementById('num_'+i).style.display = 'none';
}
}
$(".printing_list").printElement(
{
overrideElementCSS:[
'/css/print_fixer.css',
{ href:'/css/print_fixer.css',media:'print'}],
//leaveOpen:true,
//printMode:'popup',
});
}
here is the page that prints out I need to find a way to dynamically print out what the user puts into the text fields. can anybody please help me.
<div class="printing_list" id="printList" >
<img id="print_logo" src="/images/print_header_med.png">
<div align="left" id="printHead_text"></div>
<br />
<div align="left" class="listPrint_info" style="width:700px;"></div>
<br /><br />
<table width="100%" style="line-height:0px; margin-left:20px;" >
<tr id="num_1">
<td><input id="printLoad_1" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_2">
<td><input id="printLoad_2" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_3">
<td><input id="printLoad_3" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_4">
<td><input id="printLoad_4" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_5">
<td><input id="printLoad_5" type="text" style="width:700px;" />
</td>
</table>
</div>
elclanrs has the right idea. The code you wrote isn't maintainable. Try something like this:
// My print_list function assumes that I have some textboxes that are class
// textboxClass
function print_list() {
Array.filter( document.getElementsByClassName('textboxClass'), function(elem){
$(".printing_list").printElement( elem );
});
}
If you assign class textboxClass to all of your text boxes, this will loop through each of them, and you can do whatever you want.
I have a multi-select Box and I'm doing some javascript to sort the order of the elements in the box. I want to submit the whole array after sorting back to the Java and not just the select items. How can I achieve this?
JSP:
<script type="text/javascript">
$(document).ready(function(){
$("#mup")[0].attachEvent("onclick", moveUpItem);
$("#mdown")[0].attachEvent("onclick", moveDownItem);
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}
</script>
<table width="100%">
<tr>
<td width="50%" align="center">
<h1>DET Column Maintenance</h1>
</td>
</tr>
</table>
<form action="process.det_column_order" method="post" name="detColumnSortorder" >
<table class="data_table">
<tr align="center">
<td>
<select id="list" name="fieldNames" size="35" multiple="multiple" style="width: 250px;">
<c:forEach var="field" items="${detFields}">
<option value="${field.fieldName}">${field.displayName}</option>
</c:forEach>
</select>
</td>
<tr>
<td style="text-align: center;">
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
</td>
</tr>
<tr>
<td style="text-align: center;">
<input name="action" type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
FORM:
private String[] fieldNames;
public String[] getFieldNames() { return this.fieldNames; }
public void setFieldNames(String[] val) { this.fieldNames = val; }
Since forms only submit the selected values, you'll need a little more JS and another form field.
Introduce a hidden form field that will hold the values you care about:
<input type="hidden" name="fieldNamesOrder" id="fieldNamesOrder"/>
And after every click of Move Up/Move Down:
var order = [], sel = document.getElementById("list");
for(var i = 0, len = sel.options.length; i < len; i++) {
order.push(sel.options(i).value);
}
document.getElementById("fieldNamesOrder").value = order.join(",");
Then, on the server side, you can read your ordered field names out of that posted field.
You either need to create a hidden text field in your HTML form that stores the values from each of your options... or you need to programatically select all of the options before the form is submitted.
I have written a javascript function.
function wellChecked(state) {
if (state)
{
wellDropDown.style.visibility = 'visible';
}
else
{
wellDropDown.style.visibility = 'hidden';
}
}
I have a checkbox after the Well Modification <td> as given below,
<tr>
<td>On Call</td>
<td><html:checkbox property="onCall"/></td>
<td>Well Modification</td>
<td><input type="checkbox" onclick="wellChecked(this.checked)" /></td>
</tr>
When that checkbox is clicked I want the drop down list given under the div id=wellDropDown to be displayed. Defaultly, if the check box is not clicked, the drop down should not be displayed.
<tr>
<td>Active</td>
<td><html:checkbox property="active"/></td>
<div id="wellDropDown" style="visibility:hidden;">
<td>
<html:select property="wellFormatId">
<html:option value="">(Select)</html:option>
<bean:define id="wellFormatColl" name="wellFormats" scope="request"/>
<logic:iterate id="wellFormats" name="wellFormatColl" indexId="index" type="com.astrazeneca.compis.data.WellFormatVO">
<% Long wellId = wellFormats.getWellFormatId();%>
<% String wellIdNo = wellId.toString(); %>
<html:option value="<%=wellIdNo%>">
<bean:write name="wellFormats" property="wellFormatName"/>
</html:option>
</logic:iterate>
</html:select>
</td>
</div>
</tr>
When I tried executing this code, I could see the drop down list getting displayed irrespective of the checkbox checked or not.
Where I have went wrong in this scenario? Please give ur suggestions or ways to implement my requirement.
Your HTML is invalid. You may not have a div enclose a td like this. Either make the td itself visible or invisible, or put the div inside the td, instead of putting it around the td.
Also, unless wellDropDown is a global JS variable, the code should be
document.getElementById("wellDropDown").style.visibility = 'visible';
with jquery you could do this :
<tr>
<td>On Call</td>
<td><html:checkbox property="onCall"/></td>
<td>Well Modification</td>
<td><input type="checkbox" id="myCheckBox" /></td>
</tr>
...
<script>
$('#myDropDown').click(
function () {
$("#wellDropDown").toggle();
});
);
</script>