I use sendkeys method to enter a value in a Kendo UI autocomplete input field. Then, I tab off the field. After tabbing off the field, the entered value is disappeared.
How can I wait until the entered value is populated on the field before I tab off the field?
<td class="k-edit-cell" role="gridcell" tabindex="0" data-role="editable">
<span class="k-widget k-autocomplete k-header k-state-default" tabindex="-1" role="presentation" style="width: calc(100% - 30px);">
<td class="k-edit-cell" role="gridcell" tabindex="0" data-role="editable">
<input id="ddAssetID" class="k-input" style="width: 100%;" data-bind="value: AssetNumber" data-role="autocomplete" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="ddAssetID_listbox" aria-autocomplete="both" type="text">
<span class="k-icon k-loading" style="display:none"></span>
Thanks
For the Kendo UI autocomplete box sample (http://demos.telerik.com/kendo-ui/autocomplete/index) you could use the following Java snippet to type "Aus" into the box, wait for the "Austria" element to be clickable, and then click on it so that "Austria" gets added:
driver.get("http://demos.telerik.com/kendo-ui/autocomplete/index");
driver.findElement(By.id("countries")).sendKeys("Aus");
WebElement austria = new WebDriverWait(driver, 5).until(ExpectedConditions.elementToBeClickable(By.xpath("//li[contains(text(), 'Austria')]")));
austria.click();
assertTrue(driver.findElement(By.id("countries")).getText().contains("Austria"));
Related
In my application page, have a web table with multiple rows and columns loaded dynamically based on the data added. In a one of the "td" the data will be sometimes a "p" tag or "button" tag (but will look like a link) based on the status of the account on that row. And also I need to click that button to do some additional action. Here i need to validate a case, need to take all the rows and columns data and store it. But while on this particular td, as it varies based on the account status, how can I dynamically check and take the status text like check if it is "button" or "p" control?
Table looks like below
Code for both the rows looks like (sammple)
<td class="Table2Cell account-list-cell va--middle pl--2" tabindex="0" style="width: 24%; min-height: 120px; max-height: 120px;">
<div class="FlexBox FlexBox__direction FlexBox__direction--row FlexBox__justify--start">
<div class="FlexItem FlexItem__align-self--top FlexItem__align-self--base-top">
<svg class="Icon status-action Icon--rotate-0 Icon--size-small-tight" focusable="false" name="icon-alert-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin-top: 2px;">
<use xlink:href="/static/fonts/icons/icon-defs.svg#alert-circle"></use>
</svg>
</div>
<div class="FlexItem FlexItem__align-self--center FlexItem__align-self--base-center">
<div style="padding-left: 4px;">
<button aria-disabled="false" aria-label="Upload Check Image" class="Button px--0 py--0 Button--link" formnovalidate="" type="button" style="min-height: 0px; line-height: 16px; margin-bottom: 5px; margin-top: 5px;">
<span class="Button__text Button__text--link">Upload Check Image</span>
</button>
<p class="text--dark text--small">Action Required
</p>
</div>
</div>
</div>
</td>
=============
<td class="Table2Cell account-list-cell va--middle pl--2" tabindex="-1" style="width: 24%; min-height: 120px; max-height: 120px;">
<div class="FlexBox FlexBox__direction FlexBox__direction--row FlexBox__justify--start">
<div class="FlexItem FlexItem__align-self--top FlexItem__align-self--base-top">
<svg class="Icon status-verified Icon--rotate-0 Icon--size-small-tight" focusable="false" name="icon-checkmark-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin-top: 2px;">
<use xlink:href="/static/fonts/icons/icon-defs.svg#checkmark-circle"></use>
</svg>
</div>
<div class="FlexItem FlexItem__align-self--center FlexItem__align-self--base-center">
<div style="padding-left: 4px;">
<p class="text--regular flex-grow--0">Verified</p>
<p class="text--dark text--small">Status
</p>
</div>
</div>
</div>
</td>
any help on this?
Comma in css selectors button, p.text--regular return both or existing one element. Using the css selector you'll get button or p. Parent element should be a row element. Use it to get an element and check the tag.
WebDriverWait wait = new WebDriverWait(driver, 5);
WebElement statusElement = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("button, p.text--regular")));
String tag = statusElement.getTagName();
Both Action Required and Verified, Status is in P tag. However there's a difference between Action Required p tag and that is it has a preceding-sibling (button) that has text Upload Check Image.
I have a work around for this Problem (Only cons is that it has a bad time complexity) :
use findElements() instead :
2 cases :
Let's say for most of the time you see Action Required the do this :
The below code is for a particular td not a list of tds
if(driver.findElements(By.xpath("//span[text()='Upload Check Image']")).size() > 0 ){
// do what ever you wanna do here when **Action Required** is visible in UI.
}
When most of the time it is Verified :
if(driver.findElements(By.xpath("//p[contains(#class, 'text--
regular') and text() = 'Verified']")).size() > 0 ){
// do what ever you wanna do here when **Verified** is visible in
UI.
}
In my web page I want to click on the txtbox which will drop down a list, and then click on the first option. I can't use the selector option since the it isn't a select type. So I am using the Action in selenium to move my mouse to click. When in the web page if I click over the textbox the dropdown will list the items. But in my selenium code it can find the txtbox element, but when I click it, it can't element in the list. I don't think the list appears when I click on the txtbox. Heres my current code:
Webelement txtbox = driver.findElement(By.xpath("//*[#id=\"lob\"]"));
Webelement inpt =driver.findElement
(By.xpath("/html/body/div[2]/div/div/div/div[2]/div/div/div[1]"));
mouseHoverAction(txtbox);
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.elementToBeClickable(inpt));
Utils.mouseHoverAction(inpt);
public static void mouseHoverAction(WebElement mainElement){
Actions action = new Actions(driver);
action.moveToElement(mainElement).perform();
action.click();
action.perform();
Log.info("Click action is performed on the selected Product Type");
}
In my Log file it never says that the click action was performed but it does say the textbox was found.
Here is the HTML before I click on textbox:
<div class="ant-select margin___3sLIj ant-select-lg ant-select-single
ant-select-show-arrow" name="lineOfBusiness" style="width: 100%;">
<div class="ant-select-selector">
<span class="ant-select-selection-search">
<input id="lob" autocomplete="off" class="ant-select-selection-search-input"
role="combobox" aria-haspopup="listbox" aria-owns="lob_list" aria-autocomplete="list"
aria-controls="lob_list" aria-activedescendant="lob_list_0"
readonly="" unselectable="on" value="" style="opacity: 0;" aria-expanded="false">
</span>
<span class="ant-select-selection-placeholder">Please select one
</span>
</div>
>
Here is HTML after I click drop down and insepct first element in list "Business Enablement"
<div class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft
ant-select-dropdown-hidden" style="min-width: 205px; width: 205px;
left: 182.984px; top: 614.984px;">
<div>
<div role="listbox" id="lob_list" style="height: 0px; width: 0px; overflow: hidden;">
<div aria-label="Business Enablement" role="option"
id="lob_list_0" aria-selected="false">Business Enablement</div>
<div aria-label="Capital Markets" role="option"
id="lob_list_1" aria-selected="false">Capital Markets</div>
</div>
<div class="" style="height: 256px; overflow-y: auto; overflow-anchor: none;">
<div style="height: 480px; position: relative; overflow: hidden;">
<div class="" style="display: flex; flex-direction: column; transform: translateY(0px);
position: absolute; left: 0px; right: 0px; top: 0px;"><div aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active">
<div class="ant-select-item-option-content">Business Enablement
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
<div class="ant-select-item-option-content">Capital Markets
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
<div class="ant-select-item-option-content">Caribbean Banking
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
<div class="ant-select-item-option-content">Cloud
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
</div>
</div>
</div>
</div>
I need help selecting "Business Enablment"
Extra Pics
This is how you can attempt to try it -
Click the dropdown
Right click on the first element of the dropdown, inspect . After the developer option is open, right click on that element, copy full xpath. Now you will need to tweak the xpath to capture everything from the list. Sometimes you can just use //li and get content of the list or sometimes you will have to add * to either table, tr depending on the xpath
Once you get the xpath to capture the list, store it in List
List brand = driver.findElements(By.xpath("use your custom xpath"));
Iterate through the list and store the text
Search for the value you want to click
Click the element when you find
This is one of the method I have written for my project
public void selectBrand(String Brand) {
List<WebElement> brand = driver.findElements(By.xpath("//li"));// this will store all elements from brands dropdown, again you will need to use your custom xpath
for (WebElement brandlist : brand)
{
String brandName = brandlist.getText();// store all text from dropdown
if (brandName.length() > 1) {
if (brandName.contains(Brand))// search for the value to click
{
brandlist.click();// click
}
}
}
}
My list has approximate 190 items and items also getting traced one by one in for loop. I applied the condition to a specific text. however, debugger entering into condition but selecting always the first element from the drop-down. In mentioned code country "America" present on the 4th index of my drop-down.
List<WebElement> options=driver.findElements(By.xpath("//*[#id='Countryitems_popup']/div[1]/ul//li/span"));
for(int i=0;i<options.size();i++)
{
WebElement select=options.get(i);
String innerhtml=select.getAttribute("innerHTML");
if(innerhtml.contentEquals("America"))
{
select.click();
break;
}
}
HTML is mentioned below:
<div id="Countryitems_popup" class="e-scroll e-js e-wid" tabindex="" style="height: auto; display: block;">
<div class="h-con" style="height: 150px; width: 158.891px;">
<ul class="H-Kl" role="listbox">
<li data-value="001" id="004" role="option" unselectable="on" class="">
<span class=" e-ddltxt">Country 1</span>
</li>
<li data-value="676" id="006" role="option" unselectable="on" class="">
<span class=" e-ddltxt">Country 2</span>
</li>
<li data-value="765" id="009" role="option" unselectable="on" class="">
<span class=" e-ddltxt">Country 3</span>
</li>
<li data-value="0067" id="065" role="option" unselectable="on" class="">
<span class=" e-ddltxt">America</span>
</li>
</ul>
</div>
</div>
Use for each loop for more readability. Try with this code :
List<WebElement> options= driver.findElements(By.xpath("//[#id='Countryitems_popup']/div[1]/ul//li/span"));
for(WebElement option : options) {
if(option.getText().trim().equals("America")) {
option.click();
break;
}
}
This should work, provided the xpath should be correct.
Without seeing the page to test it, it's hard to know exactly what the issue is but if it's like other pages I've seen you will need to:
Click the "dropdown" to open it (and make the options visible)
Wait for the desired option to be clickable (indicating the list is open and visible)
Click the desired option
My recommendation is to put this all in a method called selectCountry() (or something similar) and pass in the desired country name.
public void selectCountry(String countryName)
{
// I'm assuming this is the container for the dropdown. Clicking it should open the dropdown
driver.findElement(By.id("Countryitems_popup")).click();
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[#id='Countryitems_popup']//span[.='" + countryName + "']))).click();
}
You can achieve it with selector itself without loop. The xpath to find the list element with text 'America' will be as,
driver.findElement(By.xpath("//[#id='Countryitems_popup']/div[1]/ul//li[conatins(text(), 'America')]")).click()
I do appreciate there are variants of this question already posted, however, I have read and tried all options from those posts without success. I think there is something within the HTML in my case which is preventing the solutions from working, specifically the css class ui-helper-hidden-accessible.
The following is my HTML
<div id="myform:selectCharacteristic" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<input id="myform:selectCharacteristic_focus" type="text" autocomplete="off" role="combobox" aria-haspopup="true" aria-expanded="false" />
</div>
<div class="ui-helper-hidden-accessible">
<select id="myform:selectCharacteristic_input" tabindex="-1" data-p-con="javax.faces.Integer" data-p-hl="onemenu">
<option value="1">Hatchback</option>
<option value="2">Estate</option>
<option value="3">Saloon</option>
</select>
</div>
<label id="myform:selectCharacteristic_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
<div id="myform:selectCharacteristic_panel" class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
<div class="ui-selectonemenu-items-wrapper" style="height:200px">
<ul id="myform:selectCharacteristic_items" class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" role="listbox">
<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Hatchback" tabindex="-1" role="option">Hatchback</li>
<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Estate" tabindex="-1" role="option">Estate</li>
<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Saloon" tabindex="-1" role="option">Saloon</li>
</ul>
</div>
</div>
I have tried a variety of things including
org.openqa.selenium.support.ui.Select.selectByIndex() and org.openqa.selenium.support.ui.Select.selectByVisibleText() as trying to perform a click using Actions and then sending Keys.UP and Keys.DOWN. However these options have not been successful.
I would really appreciate a solution which can select an item from the drop down list starting with only label value. That is, if I want to select "Saloon", I do not necessarily know that it has an index value of 3. Also, the drop down can contain many more options which require a scroll on the drop down menu.
Many thanks
https://prnt.sc/k227pf
in your case "Select" from selenium is not works, because JSF override base select, you need to write your own methods for select dropdown items.http://prntscr.com/k22c9v
it could be something like this:
`
//xpath_for_element_that_can_open_dropdown
#FindBy(xpath = "//div[contains(#class, 'ui-selectonemenu-trigger')]/span")
private WebElement SELECT_CORNER;
//xpath_for_all_elements_indropdownlist
#FindBy(xpath = "//div[#class='ui-selectonemenu-items-wrapper']//li")
private List<WebElement> DROPDORN_LIST_ELEMENTS;
public void selectSomeOption(String dropdownItemToBeSelected){
SELECT_CORNER.click();
for (WebElement dropdownListElement : DROPDORN_LIST_ELEMENTS) {
if (dropdownItemToBeSelected.equals(dropdownListElement.getText())){
dropdownListElement.click();
break;
}
}
}
`
As per the HTML you have provided the options Hatchback, Estate and Saloon seems to be <li> items. To select Saloon you can use the following solution:
driver.findElement(By.xpath("//input[#id='myform:selectCharacteristic_focus']")).click();
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//ul[#class='ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset' and #id='myform:selectCharacteristic_items']//li[#class='ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all' and #data-label='Saloon']"))).click();
I tried this and it's working fine.
System.setProperty("webdriver.chrome.driver", "chromedriver");
driver = new ChromeDriver();
driver.get("file:///Desktop/test.html");
Thread.sleep(1000);
Select dropdown = new Select(driver.findElement(By.id("myform:selectCharacteristic_input")));
dropdown.selectByVisibleText("Saloon");
Thread.sleep(1000);
This code is selecting the Saloon value from the dropdown.
Please see the code below where I need to click on dropdown so that list is displayed
<span class="k-widget k-dropdown k-header" style="" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-dropdown-wrap k-state-default k-state-hover k-state-focused" unselectable="on">
<span class="k-input" unselectable="on">Is equal to</span>
<span class="k-select" unselectable="on">
<span class="k-icon k-i-arrow-s" unselectable="on">select</span>
</span>
</span>
driver.FindElement(By.CssSelector(".k-widget k-dropdown k-header")).click()
I think you again have to try by clicking using JavascriptExecutor
WebElement element1 = driver.findElement(By.xpath("//span[#class='k-widget k-dropdown k-header' and #role='listbox']"));
JavascriptExecutor executor1 = (JavascriptExecutor) oBrowser;
executor1.executeScript("arguments[0].click();", element1);
If above Xpath didn't work then try below:-
//span[#class='k-widget k-dropdown k-header']
Hope it will help you :)
I ran across this exact issue the other day. The problem is the Kendo UI <span> element you are referencing uses a <ul> element to get it's innertext but it's the <ul> list that handles the option change/selection. You won't be able to select an option from the pop-up/dropdown you see when clicking the <span>, you have to click the <li> element that holds the text options referenced by the span.
In your example, somewhere else in the HTML document you'll find a <ul> list similar to...
<ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="off" data-role="staticlist" role="listbox">
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" data-offset-index="0">is equal to</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="1">another option</li>
</ul>
Using Selenium 3, if you wanted to select "another option":
driver.findElement(By.xpath("//li[text()='another option']")).click();
You should see your <span> innertext change to 'another option' and you can continue on your testing journey.