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
}
}
}
}
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.
}
I am trying to click Add New button. But it is throwing an error, saying org.openqa.selenium.ElementNotVisibleException: element not interactable
<div id="left-tabs-example-pane-metastore" aria-labelledby="left-tabs-example-tab-metastore" role="tabpanel" aria-hidden="false" class="fade tab-pane active in">
<div class="title col-sm-12"><button class="custom-btn create-new-button" style="float: right;">Add New</button></div>
<div class="test_table custom-test_table">
<div class="divTable">
<div class="divTableHeading">
<div class="row" style="margin: 0px 3px; border-bottom: 1px solid rgb(221, 221, 221); padding: 15px;">
<div class="col-sm-3">Name</div>
<div class="col-sm-3">Created by</div>
<div class="col-sm-3">Created on</div>
<div class="col-sm-2">Status</div>
<div class="col-sm-1">Actions</div>
</div>
</div>
<div class="divTableBody">
<div class="row" style="margin: 0px 3px; border-bottom: 1px solid rgb(221, 221, 221); padding: 15px;">
<div class="col-md-3" title="beta-stage-metastore" style="text-overflow: ellipsis; display: inline-block; white-space: nowrap; overflow: hidden;">beta-stage-metastore</div>
<div class="col-md-3">betaorg-admin</div>
<div class="col-md-3">9th February at 13:17 hrs</div>
<div class="col-md-2" style="overflow-wrap: break-word;">STOPPED</div>
<div class="col-sm-1">
<span class="dropdown custom_dropdown option-custom_dropdown" style="border-right: none;">
<img src="images/more.png">
<ul class="dropdown-menu">
<li><a>Start</a></li>
</ul>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried following:
driver.findElement(By.cssSelector(".custom-btn.create-new-button")).click();
Xpath for Add New button generated using chrome extension is:
/html/body/div[#id='app']/div[#class='_loading-overlay']/main/div[#class='container-fluid search_table_container']/div[#class='col-md-12 test_tab_wrapper']/div[#class='test_subtab_container']/div[#id='left-tabs-example']/div[#class='col-sm-12'][2]/div[#class='tab-content']/div[#id='left-tabs-example-pane-resources']/div/div[#class='workflowtab_box']/div[#class='row vertical_tab_panel_container']/div[#id='left-tabs-example']/div[#class='col-sm-9']/div[#class='tab-content']/div[#id='left-tabs-example-pane-metastore']/div[#class='title col-sm-12']/button[#class='custom-btn create-new-button']
Basically, there are four reasons why an element is not interactable.
1) Timing - the time it takes for elements to load. For this, you need to check how to use implicit an explicit wait
2)Check if the element is in a frame. For this, switch to the frame.
3) Incorrect locator
4) Wrong implementation of responsiveness. This still stems from no 3). Some websites have only one code turned on for mobile and web versions. So, the element will have more than one instance when you check the xxxxx.size. You will have to search through the list for the one whose display != none. Then, you can append the position of the element to your xpath or whatever locator you are using. E.g. xxxx/yyyyy/zzzz[3] if the position is 4 in the list.
Use this code for java,
Assumptions
a)the locator type is id
b)name of the list is nameOfYourElements
List nameOfYourElements = wd.findElements(By.id("nameOfYourID"));
System.out.println(nameOfYourElements.size());
To click on the element with text as Add New you can use either of the following solutions:
cssSelector:
driver.findElement(By.cssSelector("div.tab-content>div#left-tabs-example-pane-metastore>div.title>button.custom-btn create-new-button")).click();
xpath:
driver.findElement(By.xpath("//div[#class='tab-content']/div[#id='left-tabs-example-pane-metastore']/div[contains(#class, 'title')]/button[#class='custom-btn.create-new-button' and text()='Add New']")).click();
Please give some wait time to webdriver to visible the element.Please try this.
WebDriverWait wait = new WebDriverWait(driver, 40);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div/button[#class='custom-btn create-new-button']"))).click();
Try the xpath: driver.findElement(By.xpath("//button[text()='Add New']"));
Please check if the element is in an iframe or not. If yes, then you need to first switch to the iframe and then click on the element, for switching to the iframe, you can refer to: How to handle iframe in Selenium WebDriver using java
If its not in an iframe then you can directly click on the element using the above mentioned xpath.
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 need to select the data from Excel file . Here i am using keyword driven framework. This is the HTML code
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="addDialog" class="hidden ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 30px; height: auto; max-height: 351.05px; overflow-y: auto;">
<div class="field-container">
<fieldset class="field-container">
<legend>Contracts:</legend>
<a class="select-all" href="#">Select All</a>
<a class="deselect-all" href="#">Deselect All</a>
<select id="addContract" class="searchable" multiple="multiple" style="position: absolute; left: -9999px;">
<option value="93370956">93370956</option>
<option value="93796167">93796167</option>
<option value="94203239">94203239</option>
</select>
<div id="ms-addContract" class="ms-container">
<div class="ms-selectable">
<input class="search-input" type="text" placeholder="filter" autocomplete="off"/>
<ul class="ms-list" tabindex="-1">
<li id="86355560-selectable" class="ms-elem-selectable">
<span>93370956</span>
</li>
<li id="202890296-selectable" class="ms-elem-selectable">
<span>93796167</span>
</li>
<li id="938848030-selectable" class="ms-elem-selectable">
<span>94203239</span>
</li>
</ul>
</div>
I am sending defined data from excel file. I tried some code but they are not selecting all the data from excel file at some point of time code is giving me exception for webElement not found.
TRY #1
List<WebElement> options = driver.findElements(By.xpath("//ul[#class='ms-list']/li/span[contains(text(),'"+testData+"')]"));
for (WebElement option : options) {
if(testData.equals(option.getText()))
option.click();
TRY#2
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//ul[#class='ms-list']/li/span[contains(text(),'"+testData+"')]"))).click();
If i have 10 data in list and i am reading them from my Excel file it above codes only select 3 or 4 and then gave me exception.
Then i tried with this one:
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//*[#id='ms-addContract']/div[1]/input"))).sendKeys(testData);
Thread.sleep(5000);
driver.findElement(By.xpath(".//*[#id='ms-addContract']/div[1]/input")).sendKeys(Keys.ARROW_DOWN,Keys.ARROW_DOWN,Keys.SPACE);
Thread.sleep(2000);
//Clear the input text value.
driver.findElement(By.xpath(".//*[#id='ms-addContract']/div[1]/input")).clear();
where it is sending data to filter textbox and selecting the popped up input. But it is taking time and if i don't put delay giving me timeout Exception.
Please help.
I am new to Selenium Web Driver and unable to select element in the list box and getting below error:
org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"id","selector":"ext-element-13"}
WebElement item = launch.driver.findElement(By.id("ext-element-13"));
Select page_dropdown = new Select(item);
for(int i=0; i<page_dropdown.getOptions().size(); i++)
{
page_dropdown.selectByIndex(i);
System.out.println("Page drop down having values " + page_dropdown.getFirstSelectedOption().getText());
}
<div id="boundlist-1123" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default x-border-box" tabindex="-1" style="width: 215px; right: auto; left: 574px; top: 140px; z-index: 19000; height: 300px;" data-componentid="boundlist-1123">
<div id="boundlist-1123-listWrap" class="x-boundlist-list-ct x-unselectable" data-ref="listWrap" style="overflow: auto; height: 299px;">
<ul id="boundlist-1123-listEl" class="x-list-plain" aria-disabled="false" aria-hidden="false" role="listbox" data-ref="listEl">
<li id="ext-element-13" class="x-boundlist-item x-boundlist-selected" unselectable="on" role="option" tabindex="-1" data-recordindex="0" data-recordid="3" data-boundview="boundlist-1123">ABC Program : Summary</li>
<li class="x-boundlist-item" unselectable="on" role="option" tabindex="-1" data-recordindex="1" data-recordid="4" data-boundview="boundlist-1123">ABC-001: Poor Control</li>
<li class="x-boundlist-item" unselectable="on" role="option" tabindex="-1" data-recordindex="2" data-recordid="5" data-boundview="boundlist-1123">ABC-002: Low Density </li>
As per provided HTML code, i am expecting it is not Select drop down. so select command may not work here..
secondly if i am correct
<ul id="boundlist-1123-listEl" class="x-list-plain" aria-disabled="false" aria-hidden="false" role="listbox" data-ref="listEl">
is location of your drop down and below one is one of option correct?
<li id="ext-element-13" class="x-boundlist-item x-boundlist-selected" unselectable="on" role="option" tabindex="-1" data-recordindex="0" data-recordid="3" data-boundview="boundlist-1123">ABC Program : Summary</li>
here you may need to use sendkeys
driver.findElement(By.xpath("//*[#role='listbox']")).sendKeys("ABC Program : Summary");
you can also use xpath=//*[#data-ref='listEl'] in above code if there are more listbox elements in page
if above one does not work, just try by directly clicking on required option
driver.findElement(By.xpath("//*[contains(text(),'ABC Program : Summary')]")).click();
if even above one does not work, then you need to click on ul and then required option.
there may be change in locators, if they are not working let me know, will try for another xpath