I have a problem locating the input tag that is inside the div tag - selenium-chromedriver

I need send text to the input tag, but return error: "Unable to locate element".
The element input is inside the div tag and do not is posible locate it.
I use xpath:
driver.findElement(By.xpath("//*[#id=\"tabla_filter\"]/label/input")).sendKeys("text to send");
How can select the element?
<div class="col-xa-12 col-sm-6 col-md-6">
<div id="table_filter" class="dataTables_filter">
<label>
"Buscar:"
<input type="search" class="form-control input-sm" placeholder aria-controls="tabla"> == $0
</label>
</div>
</div>

Use below xpath
//*[#id='tabla_filter']/label/input

Related

Boolean variable for attribute required in angular

Hi I am trying to make one input form field required based on one boolean variable in my component.
Component:
public myDivHidden: boolean = true;
In my html
<form #railForm="ngForm" (ngSubmit)="executeRailForm(railForm.value);" *ngIf="railFormData" ngNativeValidate>
...
<div [hidden]="myDivHidden">
...
<div class="form-group">
<label for="myName">My Name</label>
<input type="text" name="myName" [(ngModel)]="railFormData.myName" required="!myDivHidden">
</div>
...
</div>
...
</form>
I am trying to avoid required if div is hidden and make it required if div is visible. I am getting error: An invalid form control with name='myName' is not focusable.
How I can make required field required when div is visible and not required when div is invisible in html page?
try [attr.required]="!myDivHidden" or required="{{!myDivHidden}}"

How to select html element with XPATH based on inner element?

In a html document I have the following situation:
...
<div data-v-16ed3604="" class="ivu-select ivu-select-single ivu-select-small">
<div tabindex="0" class="ivu-select-selection xh-highlight">
<input type="hidden" value="">
<div>
<span class="ivu-select-placeholder">Prop</span>
...
<div data-v-16ed3604="" class="ivu-select ivu-select-single ivu-select-small">
<div tabindex="0" class="ivu-select-selection xh-highlight">
<input type="hidden" value="">
<div>
<span class="ivu-select-placeholder">Something else</span>
...
Here I want to select the first div element with class ivu-select-selection (second row). The XPATH to get the elements with class ivu-select-selection is
//div[#class="ivu-select-selection"]
but it selects two elements. I just want the element which has the span element with the text Prop below it. I want to select just the second row of this html example. .
How to do that?
Try this,
//span[contains(text(),'Prop')]//ancestor::div[#class='ivu-select-selection xh-highlight']
Try to use below XPath to get required output:
//div[#class="ivu-select-selection" and .//span="Prop"]

XPath to input element near a label?

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&nbsp</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>

Angularjs ng-checked not working

I am generating checkboxes trough ng-repeat , for all columns of some grid
<div ng-repeat="(key, val) in gridData[0]">
<!--<label>{{columnShowSelect[1].columnNumber}}</label>-->
<div class="section col-md-6">
<label>
<u>
<h5>{{key}}</h5>
</u>
</label>
</div>
<div class="section col-md-4">
<u>
<label class="block mt15 option option-primary">
<input type="checkbox" id="chbEnableCol" name="chbColumnName" value="{{$index+1}}" ng-checked="columnShowSelect[{{$index}}].columnNumber == {{$index+1}}" />
<span class="checkbox"></span>Enable this column</label></u>
</div>
</div>
I also want to check checkboxes which i have already decided to be checked , so i am getting json with columnNumbers , that is columnShowSelect.columnNumber ,but for some reason it doesnt check it , if i put {{columnShowSelect[$index].columnNumber}} and go inspect element of checkbox , i can clearly see that it says ng-checked= "1 == 1" , but checkbox is not checked , any help ?
You don't need {{}} in ng-checked because it takes JavaScript expression.
ng-checked="columnShowSelect[$index].columnNumber == $index+1"

how to get the value on input filed in another div?

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