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'
Related
So I want to target a textbox that appears in a list that comes after the label "First Name" and send a first name to the box, but can't seem to be able to target the textBox...
What I've tried:
WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::div"));
firstNameLocTry.sendKeys(firstName);
What the li look like:
<li class="WPTO WKVO" role="presentation" data-automation-id="formLabelRequired">
<div class="WBUO WETO WDUO">
<label id="56$551056--uid24-formLabel" data-automation-id="formLabel" for="56$551056--uid24-input">First Name</label>
<div class="WEUO wd-c8594868-6b31-4526-9dda-7d146648964b" aria-hidden="true">First Name</div>
</div>
<div data-automation-id="decorationWrapper" id="56$551056" class="WFUO">
<div class="WICJ">
<div class="WMP2 textInput WLP2 WJ5" data-automation-id="textInput" id="56$551056--uid24" data-metadata-id="56$551056" style="visibility: visible;">
<input type="text" class="gwt-TextBox WEQ2" data-automation-id="textInputBox" tabindex="0" role="textbox" id="56$551056--uid24-input" aria-invalid="false" aria-required="true">
</div>
</div>
</div>
</li>
Any reason my sendKeys just leads to Element not interactable?
The attached HTML code Produce below out put
With the given XPath points to the second "First Name" Div [below pic], when you perform sendKeys, it is obvious that the error "Element not interactable" will be thrown.
Try with below two Xpaths,
1. //label[text()='First Name']//parent::div/following-sibling::div
2. //label[text()='First Name']//parent::div/following-sibling::div//input
Please use following xpath:
//div[text()='First Name']
or try:
//*[contains(text(),'First Name')]
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();
I am trying to automate an application which has a type drop down.
I have tried all possible combinations like below but have not been able to select an element from drop down list.
driver.findElement(By.xpath("//span[#aria-label=\"Phone to call with\"]"));
I am not able to find xpath by ID as it keeps changing with reload.
Below is the html code. How would i achieve the same?
<md-select ng-model="ctrl.selectedLinkedPhone" class="ng-pristine ng-valid ng-empty ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_26" aria-invalid="false" aria-label="
Phone to call with
" style=""><md-select-value class="md-select-value md-select-placeholder" id="select_value_label_25"><span>
Phone to call with
</span><span class="md-select-icon" aria-hidden="true"></span></md-select-value><div class="md-select-menu-container" aria-hidden="true" role="presentation" id="select_container_27"><md-select-menu role="presentation" class="_md"><md-content class="_md">
<!----><md-option ng-disabled="!ctrl.isLinkedPhoneCurrentlyVerified(linkedPhone)" ng-repeat="linkedPhone in ctrl.getLinkedPhones()" ng-value="linkedPhone" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_29" aria-checked="true" aria-disabled="false" value="[object Object]" style=""><div class="md-text">
Phone 1
</div></md-option><!----><md-option ng-disabled="!ctrl.isLinkedPhoneCurrentlyVerified(linkedPhone)" ng-repeat="linkedPhone in ctrl.getLinkedPhones()" ng-value="linkedPhone" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_30" aria-checked="true" aria-disabled="false" value="[object Object]" style=""><div class="md-text">
Phone 2
</div></md-option><!----><md-option ng-disabled="!ctrl.isLinkedPhoneCurrentlyVerified(linkedPhone)" ng-repeat="linkedPhone in ctrl.getLinkedPhones()" ng-value="linkedPhone" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_31" aria-checked="true" aria-disabled="false" value="[object Object]" style=""><div class="md-text">
Hangouts
</div></md-option><!---->
</md-content></md-select-menu></div></md-select>
This xpath works for your html:
By.xpath("//md-select[normalize-space(#aria-label='Phone to call with')]")
or you can use ccs selector:
By.cssSelector("md-select[aria-label*='Phone to call with']")
To find option, for example with text "Hangouts" you can use:
By.xpath("//md-select[normalize-space(#aria-label='Phone to call with')]//md-option[normalize-space(.)='Hangouts']")
To select dropdown you can use Action class or 2 methods below, implement waits needed:
1. let think that you don't have special button to open dropdown and click on the dropdown will open it.
2. using javascript:
WebElement selectMenu = driver.findElement(By.xpath("//md-select[normalize-space(#aria-label='Phone to call with')]"));
WebElement option = driver.findElement(By.xpath("//md-select[normalize-space(#aria-label='Phone to call with')]//md-option[normalize-space(.)='Hangouts']"));
//1. first click to open dropdown, second click on option
selectMenu.click();
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(option)).click();
//2. select using javascript
((JavascriptExecutor) driver).executeScript("arguments[0].click();", option);
If that drop-down is developed by div tag then we have to automate that by using Action Class methods.If possible you can send that page Url I will send solution.
Try using this below xpath:
driver.findElement(By.xpath("//span[contains(#aria-label,Phone to call with']"));
To click on the element with text as Phone to call with you need to induce WebDriverWait for the desired element to be clickable and you can use the following solution:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//md-select[#class='ng-pristine ng-valid ng-empty ng-touched']/md-select-value[#class='md-select-value md-select-placeholder' and starts-with(#id,'select_value_label_')]//span[contains(.,'Phone to call with')]"))).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.
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" type="button" role="button" aria-disabled="false">
<span>
<br/>
For use to protect against or prevent actual or potential fraud, unauthorized transactions,claims or other liability.
</span>
<br/>
<br/>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
</div>
<span align="center"> Selection of this option will automatically log you out of the system.</span>
</div>
</div>
I have same button class name for both the buttons . How to find the first button and click it . The only difference in those is span text which i tried but it is not working out .
List<WebElement> buttons=driver.findElements(By.className("ui-dialobuttonset"));
buttons.get(0).click().
dint work
There is a class called ui-state-hover in first button which is not present in button 2. So You can try this xpath:
driver.findElement(By.xpath("//button[contains(#class,'ui-state-hover')]")).click();
The className your finding is of div, to find list of buttons give className of button i.e. ui-button or you can find buttons by tagName
List<WebElement> buttons=driver.findElements(By.className("ui-button"));
buttons.get(0).click();
Try Below code to click on the first button directly..
Make sure to use the correct class name "Class name is wrong in the code you written above"
wd.findElement(By.xpath("//div[#class='ui-dialog-buttonset']/button[1]"))
if it doesnot work try below code
List<WebElement> buttons=wd.findElements(By.xpath("//div[#class='ui-dialog-buttonset']"));
buttons.get(0).click();