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')]
Related
Hello I am trying to select and click on the button "Book Now" yet when I view the source code it shows the following...
<div class="pl-0 mr-3 sticky-btn-wrapper">
<div class="ko-container book-now-btn-container">
<button class="btn btn-secondary text-uppercase btn-landing go-to-session" data-eid="757231" data-aid="97739" data-isavailable="true"> Book now</button>
</div>
</div>
<div class="btn-book-top sticky-btn-wrapper justify-content-end" id="book-button-top">
<div id="sticky-bottom-btn" class="sticky-bottom-btn flex-row w-100">
<div class="ko-container book-now-btn-container">
<button class="btn btn-secondary text-uppercase btn-landing go-to-session" data-eid="757231" data-aid="97739" data-isavailable="true">Book now</button></div>
</div>
</div>
</div>
When I inspect the "Book Now" link in Firefox is shows the following
<div class="ko-container book-now-btn-container">
<button class="btn btn-secondary text-uppercase btn-landing go-to-session" data-eid="757231" data-aid="97739" data-isavailable="true">
Book now
</button>
</div>
[Why are there two instances of button class="btn btn-secondary text-uppercase btn-landing go-to-session" ??]
I have tried to select the first instance with
WebElement wb = myDriver.findElement(By.xpath ("//div[#class='pl-0 mr-3 sticky-btn-wrapper'] and button[#class='btn btn-secondary text-uppercase btn-landing go-to-session']"));
wb.click();
But I get the following exception in Junit...
org.openqa.selenium.InvalidSelectorException:
Given xpath expression "//div[#class='pl-0 mr-3 sticky-btn-wrapper'] and button[#class='btn btn-secondary text-uppercase btn-landing go-to-session']"
is invalid: TypeError: Document.evaluate: Result type mismatch
Any help would be Sincerely appreciated!
You do not need to use and operand for locator, just change xpath to:
//div[#class='pl-0 mr-3 sticky-btn-wrapper']//button
Keyword and you need to use in the case when you have two or more similar elements and you need to add some more restrictions. Also and argument should be applied to the same tag, not for different.
For example:
<div class='1' style='1'>
<button>Button1</button>
</div>
<div class='1' style='2'>
<button>Button2</button>
</div>
<div class='2' style='2'>
<button>Button3</button>
</div>
If you need to get locator to the Button2:
//div[#class='1' and #style='2']/button
Please try below xpath :
//div[contains(text(),'Book now')]
PS : Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.
Steps to check:
Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.
If there are multiple entry, Please try indexing :
(//div[contains(text(),'Book now')])[1]
or
(//div[contains(text(),'Book now')])[2]
in fact, you can have [3], [4] and any number, But you will have to make sure that in HTML DOM it is 1/1 matching.
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]
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();
I tried the java code:
driver.findElement(By.cssSelector("input.only-numbers.ltr")).sendKeys("111");
I get an error:
Exception in thread "main"
org.openqa.selenium.ElementNotVisibleException: element not visible
but when i change the code to xpath this work prefectly
driver.findElement(By.xpath("html/body/section[10]/div/div[2]/form/div[1]/input")).sendKeys("111");
the html code:
<section id="forgot-password-layer" class="modal-layer old-modal animate-in" data-top="120" role="dialog">
<div class="modal-inner">
<a class="modal-close" title="" href="#">
<div class="modal-title">איפוס סיסמה</div>
<div class="form-wrapper">
<form id="form-resetpass" method="post" action="">
<div class="input-wrapper icon wupid">
<label for="wupid">תעודת זהות</label>
<input class="only-numbers ltr" type="text" value="" maxlength="9" name="wupid" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: left center;">
</div>
<input class="sprite form-resetpass" type="submit" value="" name="">
<div class="form-error"> </div>
</form>
<div class="new-user-message">
</div>
</div>
</section>
why its happen and how can I fixed by using cssSelector?
It's looks like you have more than one element using cssSelector and unfortunately you are locating hidden element, need to verify your cssSelector that it is unique and locating correct element.
Try as below, may be it helps :-
driver.findElement(By.cssSelector("form#form-resetpass input[name = 'wupid']")).sendKeys("111");
Or try using WebDriverWait to wait until this element getting visible as below :-
new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("form#form-resetpass input[name = 'wupid']"))).sendKeys("111");
If you're still unable to interact with element, try using JavascriptExecutor as below :-
((JavascriptExecutor)driver).executeScript("arguments[0].value = arguments[1]", driver.findElement(By.cssSelector("form#form-resetpass input[name = 'wupid']")), "111")
<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();