Not able to click second checkbox using relative locator - java

I have following HTML code
<div class="compatible-product ng-star-inserted">
<adapt-checkbox2 class="checkbox ng-valid ng-star-inserted ng-dirty ng-touched" ng-reflect-model="false">
<label class="checkbox__label" for= "adapt-checkbox-453-input">
<input class="checkbox__input" type="checkbox" id="adapt-checkbox-453-input" tabindex="0" aria-label="" aria-checked="false">
<span class="checkbox__item">
<span class="sr-only" ng-reflect-ng-class="[object Object]"></span>
</span>
</label>
</adapt-checkbox2>
<span class="compatible-product-name" style="">Product - ABC</span>
</div>
<div class="compatible-product ng-star-inserted">
<adapt-checkbox2 class="checkbox ng-untouched ng-pristine ng-valid ng-star-inserted">
<label class="checkbox__label" for="adapt-checkbox-454-input">
<input class="checkbox__input" type="checkbox" id="adapt-checkbox-454-input" tabindex="0" aria-label="" aria-checked="false">
<span class="checkbox__item">
<span class="sr-only" ng-reflect-ng-class="[object Object]"></span>
</span>
</label>
</adapt-checkbox2>
<span class="compatible-product-name" style="">Product - XYZ</span>
</div>
Please check screenshot here
From which
1) First I need to select/click on "adapt-checkbox2" who is left to Span "Product - ABC"
So I have written code as follows
WebElement selectCompatibleProduct1 = driver.findElement(RelativeLocator.withTagName("adapt-checkbox2").toLeftOf(By.xpath("//*[text()='Product - ABC']")));
selectCompatibleProduct1.click();
Which is working fine. Its selecting the correct check-box.
2) But Whenever I tried to select 2nd check-box its not working. Its again clicking/selecting 1st checkbox.
Code for 2nd checkbox is:-
WebElement selectCompatibleProduct2 = driver.findElement(RelativeLocator.withTagName("adapt-checkbox2").toLeftOf(By.xpath("//*[text()='Product - XYZ']")));
selectCompatibleProduct2.click();
Selenium Version is:- 4.0.0-alpha-3
Please can someone help me on this?
Thanks in advance.

The first <adapt-checkbox2> is considered left to the element with text 'Product - XYZ'. Sinct it's the first in the Dom hierarchy it's being returned. You can add
.below() to give more precise location
WebElement selectCompatibleProduct2 = driver.findElement(
RelativeLocator.withTagName("adapt-checkbox2")
.toLeftOf(By.xpath("//*[text()='Product - XYZ']"))
.below(By.xpath("//adapt-checkbox2/following-sibling::span[text()='Product - ABC']")));
In this case it will be simpler to just use xpath
WebElement selectCompatibleProduct2 = driver.findElement(By.xpath("//adapt-checkbox2[./following-sibling::span[text()='Product - XYZ']]"));

Use this css selector
Product - ABC locator
label>input#adapt-checkbox-453-input
Product - XYZ Css locator below
label>input#adapt-checkbox-454-input

Product - ABC :
driver.findElements(By.xpath("//span[#class='compatible-product-name']")[1]
Product - XYZ :
driver.findElements(By.xpath("//span[#class='compatible-product-name']")[2]

Related

Selenium - How to get following sibling?

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')]

Selenium : How to select options from a dropdown if the select tag containsstyle="display: none;"

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();

How to click dynamic element inside span class

I'm pretty new in Selenium and UI automation. Have some problem with clicking on a dynamic element inside span class. So this id everytime changes for each of 3 drop-down elements. So each class for each this element the same which is create the problem as well.
So I need change the value for id="react-select-2585057--value-item"
<div class="field loan-selection">
<label class="field__body">
<div class="field__label">Verwendung
<!-- -->
</div>
<div class="field__control">
<div class="Select customSelect has-value Select--single">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2585057--value">
<div class="Select-value">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2585057--value-item">Freie Verwendung</span>
</div>
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-2585057--value" aria-disabled="false" class="Select-input" role="combobox" style="border:0;width:1px;display:inline-block" tabindex="0"></div>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
</div>
</div>
</label>
</div>
As per the HTML to invoke click() on the element with dynamic id as id="react-select-2585057--value-item" assuming this element will always be a descendent of the node <div class="field__label"> 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("//div[#class='field loan-selection']//div[#class='field__label' and contains(., 'Verwendung')]//following::div[1]//span[#class='Select-value-label' and starts-with(#id,'react-select-')]"))).click();

Selenium Java to select from drop down menu

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.

selenium web driver finding elements

<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();

Categories