This question already has answers here:
Locating child nodes of WebElements in selenium
(5 answers)
Closed 7 years ago.
I have a HTML like this:
<div class="classDiv">
<header>
<button class="btn btn-icon-only btn-icon-only pull-right ng-scope" type="button">
<span class="btn-box">
<span class="sr-only">Edit</span>
<span class="icon-btn icon-edit2" aria-hidden="true"></span>
</span>
</button>
<h3 class="classH3">Text1</h3>
</header>
</div>
<div class="classDiv">
<header>
<button class="btn btn-icon-only btn-icon-only pull-right ng-scope" type="button">
<span class="btn-box">
<span class="sr-only">Edit</span>
<span class="icon-btn icon-edit2" aria-hidden="true"></span>
</span>
</button>
<h3 class="classH3">Text2</h3>
</header>
</div>
The problem is every tag is the same, only the text of H3 is different for each div. I want to click only one particular Edit button, for example the second Edit button.
So I tried to find second H3 and from there I tried to find the second Edit button, like this:
WebElement hText = webDriver.findElement(By.xpath("//h3[contains(., 'Text2')]"));
WebElement editBtn = hText.findElement(By.xpath("//button[contains(., 'Edit')]"));
editBtn.click();
But it always clicks on the first Edit button. I want to find the parent element, and from parent to find its child. But in this case, every tag is the same, so I don't know how to look for a particular child. Any help much appreciated
try this one:
WebElement divWithH3 = webDriver.findElement(By.xpath("div[.//h3[contains(., 'Text2')]]"));
WebElement editBtn = divWithH3.findElement(By.xpath("//button[.//span[contains(text(), 'Edit')]]"));
editBtn.click();
This first finds the div element that contains your "Text2" element. From there you are searching for a button element, that has a span element that contains the text "Edit"
If I don't remember bad (//button)[1] or (//button)[2] let you select the button based on his position on the returned list of button
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.
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')]
Is it possible to click a span button which is under the div element, also I would like to use the id of the input to make my test stable.
HTML:
<div class="idit-go">
<input id="IDITForm#checkRuleVO" class="GoLong align-left idit-go-text" type="text" value="" title="Validation Rule" tabindex="257" name="unknown" ignoredisableenableaction="true" helptextinfo="" disabled="">
<div class="idit-go-buttons">
<span id="IDITForm#checkRuleVOGoClearButtonClear" class="idit-go-clear" title="Clear" tabindex="259" onclick="clearField('IDITForm#checkRuleVOhidden');clearField('IDITForm#checkRuleVO');;">
<span class="fa-stack idit-go-button" value="" title="" tabindex="258" onclick="newPerformSubAction('selectRule',true);">
<i class="fa fa-stack-1x fa-square"></i>
<i class="fa fa-stack-1x fa-ellipsis-h"></i>
</span>
</div>
How it looks on screen:
As you can see the 3 dots button to the right, that is the button I'd like to click. Thanks in advance.
In this case you could identify the span that has the id attribute and then just use following-sibling (from your example they seems to be on the same level).
driver.findElement(By.xpath(".//[#id='IDITForm#checkRuleVOGoClearButtonClear']/following-sibling::span"));
using css - "span[id='IDITForm#checkRuleVOGoClearButtonClear'] + span[class='fa-stack idit-go-button']"
Okay, no-one got this from what I can see, so I can have a go as well! :)
Here we go Zvika :
element = driver.findElement(By.xpath("//div[#class='idit-go']//span[#class='fa-stack idit-go-button']"));
element.click();
(locating and clicking an element with span id="IDITForm#checkRuleVOGoClearButtonClear")
Best of luck man!:)
<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();
I am trying to open different section of page. These Section will open on click of different tabs.
Below is HTML Structure of Page
<div id="MainContentPlaceHolder_divMainContent">
<div id="MainContentPlaceHolder_tbCntrViewCase" class="Tab ajax__tab_container ajax__tab_default" style="width: 100%; visibility: visible;">
<div id="MainContentPlaceHolder_tbCntrViewCase_header" class="ajax__tab_header">
<span id="MainContentPlaceHolder_tbCntrViewCase_tbPnlCaseDetails_tab" class="ajax__tab_active">
<span id="MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab" class="ajax__tab_hover">
<span class="ajax__tab_outer">
<span class="ajax__tab_inner">
<a id="__tab_MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle" class="ajax__tab_tab" style="text-decoration:none;" href="#">
<span>Vehicle</span>
</a>
</span>
</span>
</span>
and I have Written Below Lines but these are not working
driver.findElement(By.id("__tab_MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle")).click();
driver.findElement(By.xpath("//a[text()='Vehicle']")).click();
I got Source Not Found Error
As per the OP's comments, I am posting the xpaths that can be used to locate the concerned element :
1- //span[#id='MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab']//span[.='Vehicle']
This will locate the span element with innerHTML/text as Vehicle which is a descendant of span with id MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab
OR
2-//span[#id='MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab']//span[.='Vehicle']/..
This will locate the parent of span element with innerHTML/text as Vehicle which is a descendant of span with id MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab which in this case is an a element.
Please check if this works for you. Else, let me know how many matching nodes does it show, when you use them. We will sort this one out.