I'm trying to select an option from a drop-down that doesnt populate until the locator has been clicked. This is what I see in Firebug:
div class="selectize-input items not-full has-options">
<input type="text" autocomplete="off" tabindex="" placeholder="523-23-XXXXX" style="width: 109px; opacity: 1; position: relative; left: 0px;">
</div>
<div class="selectize-dropdown multi form-control" style="display: none; width: 263px; top: 34px; left: 0px; visibility: visible;">
<div class="selectize-dropdown-content">
<div class="option" data-selectable="" data-value="523-23-20273">523-23-20273</div>
<div class="option" data-selectable="" data-value="523-23-20274">523-23-20274</div>
<div class="option" data-selectable="" data-value="523-23-20275">523-23-20275</div>
<div class="option" data-selectable="" data-value="523-23-20276">523-23-20276</div>
<div class="option" data-selectable="" data-value="523-23-20280">523-23-20280</div>
<div class="option" data-selectable="" data-value="523-23-202801">523-23-202801</div>
The code I have so far is:
public void selectAgentCodes(String agentCode)
{
driver.findElement(byAgentCodes).click();
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.className("selectize-dropdown-content")));
Select select = new Select(driver.findElement(By.className("selectize-dropwodn-content")));
select.selectByVisibleText(agentCode);
}
I get an UnexpectedTagNameException: Element should have been "select" but was "div". I'm not sure how to handle this as I've only worked with selects before.
Lets say I wanted to select "523-23-20275" for the agent code. How would I go about this?
Any help is appreciated! Thanks.
This isn't a normal drop-down select menu. Hence, using Select won't work in this case. Without seeing the complete site, I'm not sure what exactly must be done to select it.
But try simply clicking on the div element when the options in the dropdown are visible.
//I'm assuming that this will display the dropdown list
driver.findElement(byAgentCodes).click();
driver.findElement(By.xpath("//div[#data-value='523-23-20275']"));
Here, Select class wouldn't work if there is no select tag in the UI, you need to click on the main div, and then you need to click on any of the div having multiple options, it will first click on the drop down and then click on the specific element from the list,
below code will hopefully work for you....
1)firstly you need to click on this div by finding it through any of the available methods like by id, xpath, css selector,
driver.findElement(byAgentCodes).click();
clicking on this will open a dropdown list
2) repeat the same above point 1 for clicking the any of list items in dropdown
523-23-20275
That will work.
Follow the below steps to select an item under div tag:
You have to use collections object to store all child elements which are stored under same tag.
For Ex if you have below HTML structure:
<div id="Year">
<div class="abc">
<ul class = "xyz">
<li id=1>2000</li>
<li id=2>2001</li>
<li id=3>2002</li>
<li id=4>2003</li>
<li id=5>2004</li>
</ul>
</div>
</div>
Write below selenium code:
List<Webelement> lst = driver.findElements(By.xpath(<locator of child elements>));
//In this case it is //div[#id='Year']/div/ul/li
System will store all child elements in the list then you can select any element by index method using
lst.get(<index value>).click();
if you do not want to find using index but text use Iterator interface to find the element from the collection then click on that element:
Iterator<Webelement> it = lst.iterator();
while (it.hasNext()) {
WebElement wb = it.next();
if(wb.getText().equals(<Text to find in double quotes>)) {
wb.click();
break;
}
}
Related
I'm trying to create a script on Java using Selenium which will go throught all registration steps and create new user. I have problem with finding dropdown element. Selenium doesn't see dropdown element at all.
Web application is on Java + Angular
Here is my HTML:
<p-dropdown _ngcontent-c9="" appendto="body" class="Main-dropdown ng-tns-c11-7 ng-pristine ng-invalid ng-touched"
name="regionActual" required="">
<div class="ng-tns-c11-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix">
<div class="ui-helper-hidden-accessible ng-tns-c11-7 ng-star-inserted">
<select class="ng-tns-c11-7" aria-hidden="true" tabindex="-1" name="regionActual" aria-label=" ">
<option class="ng-tns-c11-7 ng-star-inserted" value="FirstRegion">FirstRegion</option>
<option class="ng-tns-c11-7 ng-star-inserted" value="SecondRegion">SecondRegion</option>
</select>
</div>
<div class="ui-helper-hidden-accessible">
<input class="ng-tns-c11-7" readonly="" role="listbox" type="text" aria-label=" ">
</div>
<label class="ng-tns-c11-7 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ui-dropdown-label-empty ng-star-inserted">empty</label>
<div class="ui-dropdown-trigger ui-state-default ui-corner-right">
<span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
</div>
</div>
I tried next:
//p-dropdown[#name='regionActual']//label
//p-dropdown[#name='regionActual']//select
//p-dropdown[#name='regionActual']/div
//p-dropdown[#name='regionActual']//div[#class='ui-dropdown-trigger ui-state-default ui-corner-right']
Nothing works. Selenium CAN click on option, but CAN'T click on the select. If I click on "select" element manualy script go to next steps successfully.
Thanks for all your comments and help. I have found the solution of my problem. I opened Chrome dev tools, clicked to select element and watch what is happen. Two element was highlighting at the same time: p-dropdown and first div. For clicking on "select" I have to click on this two elements successively. This is the sequence of elements I have to click on:
//p-dropdown[#name='regionActual']
//p-dropdown[#name='regionActual']/div
//div[#class='ui-dropdown-items-wrapper']/ul/li[2]
It wasn't obvious for me, but it works. Thanks again!
As this this dropdown is build with tag so you can use Select class directly.
Sample code:
import org.openqa.selenium.support.ui.Select;
...
WebElement region = driver.findElement(By.xpath("//select[#name='regionActual']"));
Select sel = new Select(region);
sel.selectByVisibleText("FirstRegion"); //this will select from dropdown 'FirstRegion'
I have to perform a select action i.e select a value from a dropdown. Here is the code of my iframe:
<div class="js-stools-field-filter">
<select id="filter_active" name="filter[active]" onchange="this.form.submit();" style="display: none;">
<option value="" selected="selected">- Select Active State -</option>
<option value="0">Activated</option>
<option value="1">Unactivated</option>
</select>
<div class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active chzn-with-drop" style="width: 220px;" title="" id="filter_active_chzn"><a class="chzn-single"><span>- Select Active State -</span><div><b></b></div></a>
<div class="chzn-drop">
<div class="chzn-search">
<input type="text" autocomplete="off" readonly="" class="active">
</div>
<ul class="chzn-results">
<li class="active-result result-selected" data-option-array-index="0" style="">- Select Active State -</li>
<li class="active-result" data-option-array-index="1" style="">Activated</li>
<li class="active-result" data-option-array-index="2" style="">Unactivated</li>
</ul>
</div>
</div>
</div>
I need to select the options form the dropdown. Here is my script:
Select sc = new Select(driver.findElement(By.id("filter_active")));
sc.selectByVisibleText("Activated");
But,I'm getting this error in the console:
Element is not currently visible and may not be manipulated
Can someone please let me know how to fix this.
From the HTML you posted, the SELECT is hidden because it contains style="display: none;". It looks like the <ul class="chzn-results"> and children LIs are the visible "dropdown" while the hidden SELECT holds the values after selection.
In cases like this, you can't use the Select() class. You will need to click the visible dropdown element (can't tell what that is... maybe the INPUT?) and then click the desired LI using normal Selenium methods.
Something like this should work...
driver.findElement(By.cssSelector("div.chzn-search > input")).click();
driver.findElement(By.xpath("//ul[#class='chzn-results']/li[.='Activated']")).click();
To click() on the option with text as Activated as the <select> tag is having the attribute style="display: none;" you need to use the make the selection from the <li> tags and you can use either of the following Locator Strategies:
cssSelector:
driver.findElement(By.cssSelector("div.chzn-drop ul.chzn-results li.result-selected")).click();
driver.findElement(By.cssSelector("div.chzn-drop ul.chzn-results li.active-result[data-option-array-index='1']")).click();
xpath:
driver.findElement(By.xpath("//div[#class='chzn-drop']//ul[#class='chzn-results']//li[contains(#class, 'result-selected')]")).click();
driver.findElement(By.xpath("//div[#class='chzn-drop']//ul[#class='chzn-results']//li[contains(#class, 'active-result') and #data-option-array-index='1']")).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 am new to Selenium WebDriver, using NetBeans Java and Firebug for Firefox to get XPath.
The problem is even though some elements are visible and clickable in the browser, and Firebug finds the XPath expression, I still get an error "Unable to locate element". The problem is, the element is not in a frame (there aren’t any frames), not in another window, it's visible and clickable and it has a clear XPath expression.
I used Wait and Thread.sleep, but it didn't help.
Also, I tried all solutions I could find on Stack Overflow similar to this matter.
The element is inside of the table which has some "div" elements inside. This is the XPath expression:
.//*[#id='NavigationRadPanelBar_i2_i0_trvStandardView']/ul/li[3]/div/span[3]
It seems that the panel is a problem, because it can not locate the panel too. I tried another element inside the same panel which has a title and text with this:
driver.findElement(By.xpath("//*[contains(text(),'Technical Attributes')]")).click();
But still I got same message. Similar for all elements inside this panel and panel itself. It seems whatever I tried, it's unable to locate. Everything outside of this panel is working fine with drivers.
The page has a left panel where these elements are located. Some of them are nodes that can be expanded, and some are just links, but nothing can be located.
What can be the cause of element that is obviously existing and visible, but still cannot be located by WebDriver?
I tried to locate the main panel:
driver.findElement(By.xpath(".//*[#id='NavigationRadPane']")).click();
but still the same exception.
This is part of the HTML content (it's very long):
<div id="RAD_SLIDING_PANE_CONTENT_navigatiionRadSlidingPane" class="rspSlideContent" style="overflow: hidden; width: 200px; height: 579px;">
<div id="NavigationRadPanelBarPanel" style="display: block;">
<div id="NavigationRadPanelBar" class="RadPanelBar RadPanelBar_Office2007" postback="false" style="background-color:GhostWhite;height:100%;width:100%;">
<ul class="rpRootGroup">
<li class="rpItem rpFirst">
<li class="rpItem">
<li class="rpItem rpLast">
<a class="rpLink rpExpandable rpExpanded" href="#">
<div class="rpSlide" style="display:block;">
<ul class="rpGroup rpLevel1 111460" style="display: block; height: 274.731px; width: 100%;">
<li class="rpItem rpFirst rpLast">
<div class="rpTemplate">
<div id="NavigationRadPanelBar_i2_i0_trvStandardView" class="RadTreeView RadTreeView_Office2007">
<ul class="rtUL rtLines">
<li class="rtLI rtFirst">
<li class="rtLI">
<li class="rtLI">
<div class="rtMid">
<span class="rtSp" />
<span class="rtPlus rtPlusHover" />
<img class="rtImg" src="..." alt="Technical Attributes" />
<span class="rtIn" title="Technical Attributes">Technical Attributes</span>
</div>
<ul class="rtUL" style="display:none;">
</li>
<li class="rtLI rtLast">
Use:
driver.switchTo().activeElement();
This way, the driver will switch to the panel you have clicked. Then you can perform the rest of the operations you want in the panel.
Here is the answer to your question:
The error says it all, Unable to locate element, because the XPath expression seems incorrect to me.
If you want to click on the element with title set to Technical Attributes you can consider to try with the following XPath expressions:
//div[#id='NavigationRadPanelBar_i2_i0_trvStandardView']/ul/li/li/li/div/span[#class='rtIn']
or
//div[#id='NavigationRadPanelBar_i2_i0_trvStandardView']/ul/li/li/li/div/span[#title='Technical Attributes']
Hey guys I'm having this problem where I have a hidden select drop down where its style set to none.
<div>
<select id="selectForm" style="width: 285px; display: none;" name="formId">
<option value="36784">EMAIL 4</option>
</select>
<div class="sbox sbox_1cbc5b38 selectForm" tabindex="0" style="width: 285px;">
<div class="sbox_sel">
<div class="sbox_seltext" contenteditable="false">Report</div>
<div class="sbox_arrow"/>
</div>
</div>
<a id="previewForm" class="preview-button"/>
</div>
I was getting element not visible when I was looking By.id for the select tag. And the same error for when I was trying to click on the div. I found a way to make this drop down visible with jsExecutor. Here is my code to make this drop down visible to interact with:
public static void BatchResults(String form){
WebDriverWait wait = new WebDriverWait(driver, 60);
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('selectForm').style.display='block';");
WebElement selectFormElement =
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("selectForm")));
Select selectForm = new Select(selectFormElement);
selectForm.selectByVisibleText(form);
js.executeScript("document.getElementById('selectForm').style.display='none';");
}
#Test(priority = 1)
public void runTest() {
String selectForm = "EMAIL 4";
Main.BatchResults(selectForm);
}
}
My issue is that, in jsExecutor I am setting the style to (style.display='block';) and it is bringing my underlining drop down on top of the styled drop down. Is there way to select this hidden drop down without using jsExecutor or what other option should I use? Also I cannot still select the option I want from the drop down after it is set to block and then none after selection
<ul class="sbox_opts sbox_fa9ea48e" style="width: 283px; top: 610.5px;
left: 330.333px; max-height: 54.5px; display: none;">
<li class="sbox_opt">EMAIL 4</li>
</ul>
Selenium is designed to navigate web pages the same way a user would. You should have a visible element that when interacted with (hover/click) will display the drop down. Once the drop down is displayed you can interact with the contents. Have Selenium perform the same tasks a user would have to.