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"]
Related
I have the following form (using Forminator plugin) and I want to style it.
<form id="forminator-module-4712" class="forminator-ui forminator-custom-form forminator-custom-form-4712 forminator-design--default forminator_ajax" method="post" data-forminator-render="0" data-form-id="4712" novalidate="novalidate">
<div class="forminator-row">
<div id="email-1" class="forminator-col forminator-col-12 popup-email-field">
<div class="forminator-field"><input type="email" name="email-1" value="" placeholder="Email address" id="forminator-field-email-1" class="forminator-input forminator-email--field" data-required="true" aria-required="true">
</div>
</div>
</div>
<div class="forminator-row">
<div id="checkbox-1" class="forminator-col forminator-col-12 popup-checkbox">
<div role="group" class="forminator-field" aria-labelledby="forminator-checkbox-group-62f1212b1309c-label">
<label for="forminator-field-checkbox-1-1-62f1212b1309c" class="forminator-checkbox" title="I'd like my free gift!"><input type="checkbox" name="checkbox-1[]" value="TRUE" id="forminator-field-checkbox-1-1-62f1212b1309c" data-calculation="0" checked="checked"><span class="forminator-checkbox-box" aria-hidden="true"></span><span class="forminator-checkbox-label">I'd like my free gift!</span></label>
</div>
</div>
</div>
<input type="hidden" name="referer_url" value="">
<div class="forminator-row forminator-row-last">
<div class="forminator-col">
<div class="forminator-field">
<button class="forminator-button forminator-button-submit popup-submit">Sign Up</button>
</div>
</div>
</div>
</form>
The problem is, that I have another forminator form on the same site which I styled already.
I want to style the above form differently, but the element names (for buttons and inputs) are not unique.
Is there any way to select specific elements using CSS but in a unique way, so the styles are only applied to this specific form? How would I select email/submit button/etc on this form in a unique way?
I tried the following (but I'm missing something):
#forminator-module-4712 input.forminator-input[type="text"]
#forminator-module-4712 input#forminator-field-email-1
And other combinations.
I just needed element element selectors, this works:
#forminator-module-4712 input{}
Source: https://www.w3schools.com/cssref/sel_element_element.asp
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
I got page with list of checkbox and labels assigned to them, its look like this:
x label1
x label2
x label3
As html it looks like this:
<div class="default-row">
<span class="row">
<input type="checkbox" value="on" id="gwt-uid-329" tabindex="0" >
<label for="gwt-uid-329"></label>
</span>
<div class="row-label" title="out1">test1</div>
</div>
<div class="default-row">
<span class="row">
<input type="checkbox" value="on" id="gwt-uid-321" tabindex="0" >
<label for="gwt-uid-321"></label>
</span>
<div class="row-label" title="out1">test2</div>
</div>
<div class="default-row">
<span class="row">
<input type="checkbox" value="on" id="gwt-uid-322" tabindex="0" >
<label for="gwt-uid-322"></label>
</span>
<div class="row-label" title="out1">test3</div>
</div>
And what I would like to achieve is to be able to select checkbox with specific label. Currently I got something like this:
//div[contains(text(), 'test1')]//preceding::input[#type='checkbox'][1]
but somehow it is selecting me first and last elements. 'test1' text is only placeholder, I am aiming for same xPath for each checkbox with only different label. Any ideas?
I can not change/add any new class names or id's.
Ok, so I just made some stupid mistake. Answer is:
//div[contains(text(), 'text1')]//preceding-sibling::span//input[#type='checkbox']
I will leave post. Maybe it will help someone. Cheers.
How can I concatenate string in HTML Attribute. I am using angular controller and in the part where I write some array in HTML (Code is below), I want to give input tag name that is "kolicina" + {{idhrana}} witch is attribute of object jelo.
<div class = "rezultat" ng-repeat="jelo in hrana | filter:pretrazi_namirnice">
<div> {{jelo.naziv}} </div>
<div> {{jelo.energijaKCal}}</div>
<div> {{jelo.proteini}}</div>
<div> {{jelo.uglj_hidrati}}</div>
<div> {{jelo.masti}}</div>
<div><input type=text nama="kolicina"+{{idhrana}}></div>
<div><input type="button" ng-click = 'dodaj(jelo)' value="Dodaj"></div>
</div>
You can do it like so:
<input type=text name="kolicina{{idhrana}}"></div>
No need to explicitely concatenate it.
Also, I think you had a typo with nama versus the name-attribute.
http://plnkr.co/edit/uJcDZkrGNqzSibpgkTc9?p=preview
<input type=text name="kolicina {{idhrana}}">
working plnkr for understanding. hope this will help you.
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 </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>