<div _ngcontent-ucs-c11 class="order__form--name"> ==$0
<label _ngcontent-ucs-c11 class="order__form--label">Symbol</label>
<!---->
<input _ngcontent-ucs-c11 class="form-control form-control-sm ng-untouched ng-pristine ng-invalid" formcontrolname="symbol" type="text" typeahead-editable="false" typeaheadoptionfield="symbolName"typeaheadoptionslimit="50">
<!---->
<!---->
</div>
I'm trying to send_Keys in selenium (python) but am unable to locate the text Web Element. I tried locating by class and xpath:
drive.find_element_by_class_name("form-control form-control-sm ng-pristine ng-invalid ng-star-inserted ng-touched")
driver.find_element_by_xpath("//input[#class='form-control form-control-sm ng-untouched ng-pristine ng-invalid')]")
The class changes from "form-control form-control-sm ng-pristine ng-invalid ng-star-inserted ng-touched" to "form-control form-control-sm ng-untouched ng-pristine ng-invalid ng-star-inserted".
I'm not sure if this is significant but, in addition to this the "_ngcontent-ucs-c11" also changed to "_ngcontent-uji-c7" and might change again to something else.
Also, is it anyway related to typeahead-editable="false" attribute inside input?
For the dynamic element you can use regular expresions.
driver.find_element_by_xpath("//input[contains(#name,'sel')]")
or
driver.find_element_by_xpath("//input[starts-with (#name,'Tut')]")
or
driver.find_element_by_xpath("//input[ends-with (#name,'nium')]")
Pick one that suits in your case(you will use (#class,'Tut')). And read more on https://www.tutorialspoint.com/how-to-use-regular-expressions-in-xpath-in-selenium-with-python
Related
I am trying to find all elements by using find_element_by_xpath. In the below web elements, I am looking for these three elements separetely:
1. <label for="hw-log-mode-none" class="ng-binding">None</label>
2. <label for="hw-log-mode-session" class="ng-binding">Per-Session</label>
3. <label for="hw-log-mode-mapping" class="ng-binding">Per-Mapping</label>
<div class="field ng-scope" ng-if="!isTransparentMode && showNatPool && !policy.isIPv6" ng-show="policy.action == 'accept' && policy.nat == 'enable'">
<label class="ng-binding">Hardware Logging Mode</label>
<div>
<div class="radio-group">
<input type="radio" id="hw-log-mode-none" value="none" ng-model="policy['hw-logging-mode']" class="ng-pristine ng-untouched ng-valid" name="670">
<label for="hw-log-mode-none" class="ng-binding">None</label>
<input type="radio" id="hw-log-mode-session" value="session" ng-model="policy['hw-logging-mode']" class="ng-valid ng-dirty ng-touched" name="671" style="">
<label for="hw-log-mode-session" class="ng-binding">Per-Session</label>
<input type="radio" id="hw-log-mode-mapping" value="mapping" ng-model="policy['hw-logging-mode']" class="ng-valid ng-dirty ng-touched ng-valid-parse" name="672" style="">
<label for="hw-log-mode-mapping" class="ng-binding">Per-Mapping</label>
</div>
</div>
</div>
I can find element #1 and #2 in above list. But when I try to find element #3 using the same way:
elem = driver.find_element_by_xpath("//label[#for='hw-log-mode-mapping']")
I got this error:
Message: element click intercepted: Element ... is not
clickable at point (707, 508). Other element would receive the click:
... (Session info: chrome=77.0.3865.90)
You could try clicking the element using Javascript and see if that works around the error.
elem = driver.find_element_by_xpath("//label[#for='hw-log-mode-mapping']")
driver.execute_script("arguments[0].click();", elem)
If that doesn't work, you could try clicking the input element itself.
elem = driver.find_element_by_xpath("//input[#id='hw-log-mode-mapping']")
driver.execute_script("arguments[0].click();", elem)
Try this, Get list of all the elements as they have same class name as follow:
List<WebElement> elements = driver.findElements(By.xpath(".//label[#class='ng-binding']"));
Now create a method to select the radio options as follow:
public void selectRadioOption(String option){
if(option.equals("None"))
elements.get(0).click();
else if(option.equals("Per-Session"))
elements.get(1).click();
else if(option.equals("Per-Mapping"))
elements.get(2).click();
}
Call this method, pass the option whichever you want to select.
Hope it works for you. You should not find 3 different xpath if you can work with one.
I Tried to locate the input element below (also in the picture), by its content:
<input _ngcontent-c39="" autocomplete="off" class="remove-input-styling mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-touched" matinput="" readonly="true" ng-reflect-owl-date-time="[object Object]" ng-reflect-min="Thu Jun 20 2019 09:38:58 GMT+0" ng-reflect-select-mode="range" ng-reflect-readonly="" ng-reflect-dt-picker="[object Object]" aria-haspopup="true" min="2019-06-20T06:38:58.206Z" id="mat-input-23" aria-invalid="false" aria-required="false">
1.Tried that -
self.driver.find_element_by_xpath("//input[contains(.,'remove-input-styling mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-touched')]")
and
Tried that -
WebDriverWait(self.driver, 30).until(EC.presence_of_element_located((By.XPATH, "//input[#class='remove-input-styling mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-untouched ng-pristine ng-valid'][contains(.,' ')]")))
This is the executing line:
self.driver.execute_script("arguments[0].click();", self.date_element)
Both ways I tried about didn't find the x-path
Have you tried this Xpath?
//input[contains(#id,'mat-input')]
The bottom line for text-field is shown a bit above.
No CSS used ...
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
<label class="mdl-textfield__label" for="phone">Phone</label>
<span class="mdl-textfield__error">Digits only</span>
</div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="demo-input" />
<label class="mdl-textfield__label" for="demo-input">UserName...</label>
</div>
</form>
Take a look at what I got
Take a look at the answer which i posted for the below stackoverflow thread.
Material Design Lite - Bottom Line in text field has a slight gap with colored line
In PHPStorm, when creating a snippet, you can do something like this:
<!-- $VALUE$ Form Input -->
<div class="form-group">
<input type="text" name="$NAME$" class="form-control">
</div>
With variables and such, so you can easily write a value. I'm wondering how to do the same thing with Sublime Text 3. This is what I have in my CDATA tag:
<!-- $VALUE Form Input -->
<div class="form-group">
<input type="text" name="$NAME" class="form-control">
</div>
However, it's not working.
Unfortunately, the only variables that are available in snippets are specified in the docs under snippets environment-variables, as well as any you declare in a .tmPreferences metadata file, or in a .sublime-options file. However, you can have predefined values in snippets. For example, this snippet:
<snippet>
<content><![CDATA[<!-- ${1:VALUE} Form Input -->
<div class="form-group">
<input type="text" name="${2:NAME}" class="form-control">
</div>$0]]></content>
<tabTrigger>form_group</tabTrigger>
<scope>text.html</scope>
</snippet>
gives this result when triggered:
You can then hit Tab and the focus will move from field 1 to field 2:
and again to move to the exit point $0:
I need to generate following html markup in jade
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
My try:-
.checkbox
label Remember me
input(type="checkbox")
generates
<div class="checkbox">
<label>
"Remember me
"
<input type="checkbox">
</label>
</div>
How can we place element "checkbox" infront of "Remember me" label text?
Have you tried nesting it like this?
.checkbox
label
input(type="checkbox")
| Remember me