I am having a UI as given below.
<div class="BtyD1c WFUbU" jsname="Y3PF3">
<div>.........</div>
<div>.........</div>
<div>.........</div>
<div>.........</div>
<div>.........</div>
<div jsname="YCbqLe" style="display: block;">
<div>.........<div>
<div class="qh jxzYFc ZlpBcf XWx4Gf IbyGtb Tea E5 OI LtchOd oj" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV;" jsshadow jsname="NuJwOd">
<div class="PI jh">
<div class="D5 fda">
<div class="F5">
<input type="text" class="Ij Sl" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Text input area where you can input a URL for the action." maxlength="1500" value="" autofocus="" data-initial-value="enter url here" badinput="false" dir="ltr" aria-invalid="false">
</div>
<div>.........</div>
I need to enter some input in this input field.For that i have used a locator
".Xz2Gac .WFUbU div:nth-child(6) .jxzYFc input"
But it says ElementNotVisibleError: element not interactable. But when i am giving the locators as
".Xz2Gac .WFUbU div:nth-child(7) .jxzYFc input"
then it is successfully entering the input data into that input field.I am not understanding why it so?because the input field is in 6th div of class 'WFUbU'.Am i right?.
if you exam the html sample that you provided, you can see that there is 6 childs only.
For the css matcher, possibly it ignore the condition to find the 7 child (which does not exist) and continue with matching next case.
With the following experiment:
.WFUbU .jxzYFc input
you will get the input
.WFUbU div:nth-child(6) .jxzYFc input
you again get again the input
Here is full explanation about nth:child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Note: avoid creating such locators based on child of elements, due
dynamic changes of creation/updating a website.
If the unique jsname is always constat use something like:
CSS selector
input[jsname='YPqjbf']
Xpath selector
//input[#jsname='YPqjbf']
Try following two css locator manually in Chrome DevTool.
.Xz2Gac .WFUbU > div:nth-child(6) .jxzYFc input
.Xz2Gac .WFUbU div:nth-child(6) .jxzYFc input
If both locator find the same input, means there are one invisible input and one visible input. You should use .Xz2Gac .WFUbU div:nth-child(7) .jxzYFc input to find the visible input.
If they find different input, I think .Xz2Gac .WFUbU > div:nth-child(6) .jxzYFc input should find the visible input that's what you want.
> in css locator means to fine direct/first layer child.
(blankspace) in css locator means to find descendants which includes direct/first layer child
Related
I need some help. Chrome (v 75.0.3770.100) using Selenium Basic ChromeDriver (v 75.0.3770.140) in Excel (2013) VBE. There's an input box which generates a dynamic list if the customer id# exists. I wish to fill in the customer id# then select from the dynamic drop down. But first step, I'm struggling to input my text to the box. I'm able to click on the box with
obj.FindElementById("selectcustTxt").Click
but when I try to fill in the box with:
obj.FindElementById("selectcustTxt").Value = "1111"
I get an error Run-time error '424': Object required
I tried the following FindElementByXPath with both .Value and .Text but get the same Run-time error '424': Object required
obj.FindElementByXPath("//input[#class='form-control cust-autosuggest ng-pristine ng-valid ng-touched'][#id='selectcustTxt']").Value = "1111"
Here's the HTML:
<div class="form-group search-field"><input id="selectcustTxt" type="text" class="form-control cust-autosuggest ng-valid ng-touched ng-dirty ng-valid-parse" autocomplete="off" plshholder="Enter Cust name" autocomplepte="off" ng-model="cust" suggest-type="custService" sh-autosuggest="custAddresses" data-validation="required">
To send a character sequence within the desired element you can use either of the following Locator Strategies:
Using FindElementByCss:
obj.FindElementByCss("input.form-control.cust-autosuggest.ng-valid.ng-touched.ng-dirty.ng-valid-parse#selectcustTxt").SendKeys ("1111")
Using FindElementByXPath:
obj.FindElementByXPath("//input[#class='form-control cust-autosuggest ng-valid ng-touched ng-dirty ng-valid-parse' and #id='selectcustTxt']").SendKeys ("1111")
Reference
You can find a couple of relevant discussions in:
How to send text to some HTML elements?
Need help to fill number into Chrome input box with Selenium
I want to get the value of the "tabindex" selector of this HTML code:
<input name="ctl00$ctl00$placeContent$placeTopContent$filter$textAccount" type="text" value="110111102" id="ctl00_ctl00_placeContent_placeTopContent_filter_textAccount" style="width: 130px;" data-kpxc-id="ctl00_ctl00_placeContent_placeTopContent_filter_textAccount" tabindex="-1">
I tried with it with the following code, but I only get the value of "value". How can I correctly check for it?
driver.find_element_by_xpath('//*['#id="ctl00_ctl00_placeContent_placeTopContent_filter_textAccount" and #tabindex]').get_attribute('value')
Use attribute tabindex and following code.
driver.find_element_by_xpath('//input[#id="ctl00_ctl00_placeContent_placeTopContent_filter_textAccount"]').get_attribute('tabindex')
You can also use css selector.
driver.find_element_by_css_selector('#ctl00_ctl00_placeContent_placeTopContent_filter_textAccount').get_attribute('tabindex')
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
I have written a python selenium script that selects a state value from a drop down. The HTML for the drop down element is copied below:
<div class="hQSHyh4QFG0Xh0d-6pxTF" tabindex="0" style="height: 238px; display: none;">
<div class="SD_7vnwWhO0KG80czzPb3 option-0 al-option">AL</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-1 ak-option">AK</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-2 as-option">AS</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-3 az-option">AZ</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-4 ar-option">AR</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-5 ca-option">CA</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-59 um-option">UM</div>
</div>
Problem: the automation script locates the same state value ("CA") using a hard-coded xpath statement (See code snippet from script below). Instead, I would like to select the state value using a stored variable called "state".
state_selection = self.driver.find_element_by_xpath("/html/body/div[2]/div/div[2]/div/div/div[2]/div[1]/form/div/div[2]/div[2]/div[3]/div[2]/div/div[3]/div[6]")
state_selection.click()
Additional Notes: I have tried using other methods to locate the state value (see below) but, so far, I have only been successful using the hard-coded xpath above.
I also tried to locate the drop down element using the Selenium Select Method but I got messages telling me that "Select only works on <select> elements, not on 'div' "
driver.findElement(by.xpath("//select[#SD_7vnwWhO0KG80czzPb3='']/option[#value='CA']")).click()
Try to select required option by its text content:
state = "CA"
state_selection = self.driver.find_element_by_xpath("//div[.='%s']" % state)
state_selection.click()
I want to get the title called "ABCD" as output from below :
Note I can't use input id to search and have to use classname. Also, note that I have several <div class="promptChoiceListBox" > and class="promptTextField promptTextFieldReadOnly" exist and this is just one example.
Also this Title is dynamic and changed with dropdown selection.
How can I check it in onclick event if the text inside the text is changed?
How can I achieve this ? any help is appreciated.
<div class="promptChoiceListBox" >
<input id="xyz123" type="text" class="promptTextField promptTextFieldReadOnly" readonly="" title="ABCD">
I have tried below and it doesn't work:
console.log($('.promptTextField').attr('title'));
thanks
Javascript way of doing it:
console.log(document.getElementById("xyz123").title);
JQuery (on-click example):
$("input:promptTextField promptTextFieldReadOnly").click(function(){
$("input:promptTextField promptTextFieldReadOnly").toggle();
});
$('.promptTextField').map(x=>x.title)