Xpath - how to mark each element when finds two the same - selenium

Hi I have two exact element on the page I want to click first or second.When using 1 [0] two elements are marked
what I tryed is '//span[contains(text(), "CTA Button")]' but both elements are marked
also '//spancontains(text(), "CTA Button")' again both are marked
<div class="ng-untouched ng-pristine ng-valid ng-star-inserted">
<!---->
<!----><!---->
<mat-slide-toggle class="mat-slide-toggle mat-accent ng-untouched ng-pristine ng-valid ng-star-inserted" id="mat-slide-toggle-6"><label class="mat-slide-toggle-label"><div class="mat-slide-toggle-bar"><input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox" id="mat-slide-toggle-6-input" tabindex="0"><div class="mat-slide-toggle-thumb-container" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><div class="mat-slide-toggle-thumb"></div><div class="mat-slide-toggle-ripple mat-ripple" mat-ripple=""></div></div></div><span class="mat-slide-toggle-content">
CTA Button
</span></label></mat-slide-toggle>
<!---->
</div>

This is to query first element: (//span[contains(text(), "CTA Button")])[1]
This is to query second element: (//span[contains(text(), "CTA Button")])[2]

Related

Correct Syntax for this Selenium command

I am just not sure what will be the syntax for this
This is a drop-down which changes its ID so I wish to choose the label above to navigate the click
Here is the HTML
<label class="form-title">Charging and Billing Alignment</label>
<select name="ratingAndBillingAlignment" class="reverse-toggle-select check-if-form-row-visible hide-child-if-not-visible loadable-drop-down-37 loadable-drop-down-select" id="ratingAndBillingAlignment" makeloadabledropdown="37" style="display: none;" fixed_position=".popup-content-inner">
<option value="TRUE" class="done-into-select-dd">Yes</option>
<option value="FALSE" selected="selected" class="done-into-select-dd">No</option>
</select><span num="37" class="loadable-drop-down loadable-drop-down-container loadable-drop-down-container-37" id="makeLoadableDropDown37" style="position: relative;" title="No" title2="No"><span class="dropdown-label initialized" style="width: 100%;"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></span><span style="display: none; position: absolute; width: 100%; left: 0px;" class="dropdown-list custom-drop-down-dropdown-list custom-drop-down-dropdown-list-37" stop="0" loading="0" data-counter="37"><div class="option-list" style="max-height: 250px;"><div class="dropdown-link the-dd-counter-1 first-dd-link" c="1" title="Yes"><span class="dropdown-html"><span class="value_box" style="display: none;">TRUE</span><span class="text">Yes</span></span></div><div class="dropdown-link the-dd-counter-2 last-dd-link selected" c="2" title="No"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></div></div></span></span>
driver.findElement(By.xpath(
"//span[#class='dropdown-label initialized']/following-sibling::label[contains(text(),'Charging and Billing Alignment')and(#xpath='1')]"))
.click();
Thanks for your help!
Here is the xpath that you can use with name. As name does not update as it did in the case of id.
//select[#name='ratingAndBillingAlignment']
Locating <select> won't work in your case as its hidden. style="display: none;"
Try using below xpath to click on span looks alike dropdown
//label[contains(.,'Charging and Billing Alignment')]/following-sibling::span[contains(#class,'loadable-drop-down')]

Images for after clicking on suboption from the popup window remains as it is in selenium

In my application left-hand side menu bar which contain 8 modules of an application. And each of module contain suboptions.
I am trying to click on one of suboption from a particular module which having 30 suboptions(pages).
But after clicking on a particular option the popup window remains as it is on screen and it does not allow me to click the options which are behind the popup screen.
Behind popup screen the dropdown option is there and want to select one option from that dropdown.
Its giving me an error "org.openqa.selenium.JavascriptException: javascript error: Failed to execute 'elementsFromPoint' on 'Document': The provided double value is non-finite."
Here is the code
//div[#id='main-nav']/ul --Gives me 6 modules name(6 ul):
<ul class="main-nav-gray-border user-details-menu-tab left-nav-main-menu-container left-nav-img-ul" xpath="1"></ul>
<ul class="main-nav-gray-border menu-items-main-menu-list left-nav-main-menu-container left-nav-img-ul" xpath="2">
<li class="main-nav-img-label" id="admin-nav">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="main-nav-icons"></svg>
<label>
Analytics
</label>
<ul class="nav-items admin-menu-items" style="top: 50px;" id="admin-menu-items">
<li class="side-nav-titles"></li>
<a class="module-item-child selected-nav-item" href="#" id="QualityMeasures37" onclick="loadModule('Analytics/Index?dashboardUrlId=71', 2,'QualityMeasures', 37,null,'Quality Measures')" xpath="1">
<li>**Quality Measures**</li>
</a>
<a class="module-child " id="QualityMainView38" onclick="loadModule('Analytics/Index?dashboardUrlId=93', 2,'QualityMainView', 38,null,'Quality Main View')"></a>
<a class="module-child " id="QualityRanking39" onclick="loadModule('Analytics/Index?dashboardUrlId=94', 2,'QualityRanking', 39,null,'Quality Ranking')"></a>
<a class="module-child " id="QualityTrending40" onclick="loadModule('Analytics/Index?dashboardUrlId=95', 2,'QualityTrending', 40,null,'Quality Trending')"></a>
<a class="module-child user-default-module selected-nav-item" href="#" id="DetailedFinanceAndUtilization41" onclick="loadModule('Analytics/Index?dashboardUrlId=76', 2,'DetailedFinanceAndUtilization', 41,null,'Detailed Finance & Utilization')"></a>
<a class="module-child " id="DetailedFinanceandUtilizationPro42" onclick="loadModule('Analytics/Index?dashboardUrlId=77', 2,'DetailedFinanceandUtilizationPro', 42,null,'Detailed Finance & Utilization Professional')"></a>
<a class="module-child " id="PartAClaimsAnalysis43" onclick="loadModule('Analytics/Index?dashboardUrlId=87', 2,'PartAClaimsAnalysis', 43,null,'Facility Claims Analysis')"></a>
</ul>
</li>
</ul>
<ul class="main-nav-gray-border menu-items-main-menu-list left-nav-main-menu-container left-nav-img-ul" xpath="3"></ul>
<ul class="icon-minimizer" id="minimizer-nav" xpath="7"></ul>
This the code for a drop down menu.
<div class="dd-select" style="width: 100px; background: rgb(245, 245, 245);" xpath="1">
<input class="dd-selected-value" type="hidden" value="Level1"><a class="dd-selected"><label class="dd-selected-text" title="Enterprise">Enterprise</label></a>
<span class="dd-pointer dd-pointer-down"></span></div>
This is the code to select the option from drop down menu.
<div id="SelectedHierarchyLevelName" class="dd-container" style="width: 100px;" xpath="1">
<div class="dd-select" style="width: 100px; background: rgb(245, 245, 245);">
<input class="dd-selected-value" type="hidden" value="Level3">
<a class="dd-selected">
<label class="dd-selected-text" title="Facility">**Facility**</label></a>
<span class="dd-pointer dd-pointer-down dd-pointer-up"></span></div>
<ul class="dd-options dd-click-off-close" style="min-width: 100px; height: 150px; overflow: auto; box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 16px; display: block;">
<li class=""><a class="dd-option"> <input class="dd-option-value" type="hidden" value="Level1"> <label class="dd-option-text">Enterprise</label></a></li>
<li class=""><a class="dd-option"> <input class="dd-option-value" type="hidden" value="Level2"> <label class="dd-option-text">Ministry</label></a></li>
<li class=""><a class="dd-option dd-option-selected"> <input class="dd-option-value" type="hidden" value="Level3"> <label class="dd-option-text">Facility</label></a></li>
<li class=""><a class="dd-option"> <input class="dd-option-value" type="hidden" value="Level4"> <label class="dd-option-text">Med Group/Division</label></a></li>
<li class="hideMe"><a class="dd-option"> <input class="dd-option-value" type="hidden" value="Missing Providers"> <label class="dd-option-text">Missing Providers</label></a></li>
<li class=""><a class="dd-option"> <input class="dd-option-value" type="hidden" value="Help"> <label class="dd-option-text">Help</label></a></li>
<li class="hideMe"><a class="dd-option"> <input class="dd-option-value" type="hidden" value="L0Simulation"> <label class="dd-option-text">Unknown Simulation</label></a></li></ul></div>
I tried following:
#FindBy(id="admin-nav")
WebElement mouseHover;
#FindBy(xpath="//a[#id='QualityMeasures37']//li[contains(text(),'Quality Measures')]")
WebElement btnQualityMeasure;
#FindBy(xpath="//div[#id='SelectedHierarchyLevelName']//span[#class='dd-pointer dd-pointer-down']")
WebElement dropDown;
#FindBy(xpath="//label[contains(text(),'Facility')]")
WebElement facilityOption;
public void hoverTest() throws Exception
{
Actions act = new Actions(driver);
act.moveToElement(mouseHover).build().perform();
Thread.sleep(2000);
// ((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView(true);", btnQualityMeasure);
// Thread.sleep(1000);
act.moveToElement(btnQualityMeasure).click().build().perform(); //clicking on suboption
Thread.sleep(10500);
}
public void clickDropDownButton()
{
Actions act = new Actions(driver);
act.moveToElement(dropDown).click().build().perform();
}
public void selectFromDropDown() throws Exception{
Actions act1 = new Actions(driver);
// ((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView(true);", ministryOption);
// Thread.sleep(1000);
act1.moveToElement(ministryOption).click().build().perform();
Thread.sleep(1500);
//The first method Mousehover it and select the desired suboption.
Second method clicking on dropdown button and 3rd method selecting the option from drop down.
In short from the 'Analytics' module the suboption 'Quality Measure' should be select and on that page click on one drop down menu and select the option 'Facility'. I highlighted as bold all 3 in my above code.
Its giving me an eroor "Its giving me an error "org.openqa.selenium.JavascriptException: javascript error: Failed to execute 'elementsFromPoint' on 'Document': The provided double value is non-finite."
Also some time it does not open the desired suboption.
Any help will be appreciated.

How can I find the dynamic xpath for the word "Pace" in the attached?

I need the dynamic xpath for the the word "Pace" in the below code It is the the name of the third column in a table.
I have tried the following:
//table[contains(#class,'data-grid-table data-grid-fixed-row-table')]//span[contains(#class,'lightning-table-cell-measure-header-value')][contains(text(),'Pace')]
but this seems to be too long of a locator for my test. Is there a shorter dynamic xpath locator that I can use? Here is the snippet of the code that contains the word:
<th data-row-index="0" data-column-index="0" data-fixed-row="true" data-fixed-column="false" aria-selected="false" aria-hidden="false" id="data-grid-24-fixedrow0-col0" class="data-grid-table-cell data-grid-table-cell-start data-grid-header-cell" tabindex="0">
<div class="data-grid-table-cell-box" style="height: 17px;">
<div class="wave-table-cell-measure-header">
<span class="wave-table-cell-measure-header-text" data-tooltip="Pace" data-tooltip-on-truncation="true">
<span class="lightning-table-cell-measure-header-value" tabindex="-1">
<span class="header-icon-container">
<span class="slds-icon_container">
<svg aria-hidden="true" class="header-icon-sprite slds-icon">
<use xlink:href="/images/sprite.analytics.svg#formula"></use>
</svg>
<span class="slds-assistive-text">
Formula
</span>
</span>
</span>
Pace
</span>
</span>
</div>
</div>
<div class="data-grid-resize-slider" style="position: absolute; width: 0px; height: 0px;">
<input class="data-grid-resize-slider-input" aria-label="Pace Column Width: 115" type="range" tabindex="-1" min="35" max="1000" value="115">
</div>
</th>
The issue may be with the double [][] notation you are using for your //span element at the end. I've never seen that type of XPath syntax before, and I've always grouped queries into a single set of [].
You can use the following XPath:
//th/div/div//span[contains(text(), 'Pace']
This will get you the span element containing text 'Pace'.
If you just want to fix your existing XPath syntax, this might work too:
//table[contains(#class,'data-grid-table data-grid-fixed-row-table')]//span[contains(text(),'Pace') and contains(#class,'lightning-table-cell-measure-header-value')]
I've combined your last two queries into one using and operator.

Dynamic Element handling

In our application there is a task view page. For different tasks, xpath for the same button found change every time as below
WIN_1_1000000014
WIN_2_1000000014
WIN_3_1000000014
WIN_4_1000000014
WIN_5_1000000014
I am providing html codes for two of such scenarios below . I am using following xpaths to find that button but not working for me.
//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img
//img[#alt='Menu for Organization']
Help me guys
<div id="WIN_1_1000000014" class="df arfid1000000014 ardbnAssigneeOrganization Char" arid="1000000014" artype="Char" ardbn="Assignee Organization" arlbox="0,4,78,17" ardcf="1" style="z-index:998;top:84px; left:5px; width:263px; height:21px;" arwindowid="1">
<label id="label1000000014" class="label f6" for="x-arid_WIN_1_1000000014" style="top: 4px; left: 0px; width: 78px; height: 17px;">Organization</label>
<textarea id="arid_WIN_1_1000000014" class="text sr " cols="20" maxlen="60" style="top:0px; left:83px; width:154px; height:21px;" armenu="CTM:SGP:SupportOrganization3-Q" mstyle="2" arautoc="1" arautocmb="1" arautocak="0" arautoctt="400" rows="1" title="Service_Desk_First_Tier"
wrap="off"></textarea>
<a class="btn btn3d menu" href="javascript:" style="top:0px; left:242px; width:21px; height:21px;">
<img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Organization" title="" style="background-color: transparent;">
</a>
<div id="WIN_3_1000000014" class="df arfid1000000014 ardbnAssigneeOrganization Char" arid="1000000014" artype="Char" ardbn="Assignee Organization" arlbox="0,4,78,17" ardcf="1" style="z-index:998;top:84px; left:5px; width:263px; height:21px;" arwindowid="3">
<label id="label1000000014" class="label f6" for="x-arid_WIN_3_1000000014" style="top: 4px; left: 0px; width: 78px; height: 17px;">Organization</label>
<textarea id="arid_WIN_3_1000000014" class="text sr " cols="20" maxlen="60" style="top:0px; left:83px; width:154px; height:21px;" armenu="CTM:SGP:SupportOrganization3-Q" mstyle="2" arautoc="1" arautocmb="1" arautocak="0" arautoctt="400" rows="1" title="Service_Desk_Resolver"
wrap="off"></textarea>
<a class="btn btn3d menu" href="javascript:" style="top:0px; left:242px; width:21px; height:21px;">
<img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Organization" title="" style="background-color: transparent;">
</a>
you can write the xpath for the latest task as below:
(//div[contains(#id,'WIN_')])[last()]//img[#alt='Menu for Organization']
Use below code for click or any other operations:
List<WebElement> elements = driver.findElements(By.xpath("//img[#alt='Menu for Organization']"));
for(int i=1;i<=elements.size();++i){
elements.get(i).click();
}
xpath working for 1st 3 elements is
(//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img)[last()]
xpath working for rest elements is
(//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img)[position()<3]

Pls how to access message in span tag

<html>
<body>
<section id="click" class="content mCustomScrollbar _mCS_1">
<div id="mCSB_1" class="mCustomScrollBox mCS-dark" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container" style="position:relative; top:0;">
<form id="registration" action="http://abcd.com/setup/user-registration/index" method="post" name="registration">
<article class="frm-content">
<div class="leftsection">
<div class="form-element">
<fieldset>
<label>
<input id="firstname" type="text" maxlength="50" value="" name="firstname" style="border: 1px solid red;">
<label>
<span class="required">*</span>
First Name:
</label>
<input id="firstname" type="text" maxlength="50" value="" name="firstname" style="border: 1px solid red;">
<span id="error_firstname" class="errormsg" role="alert">Please use only letters,numbers, period, single space and underscore</span>
</fieldset>
</article>
</div>
</section>
</body>
</html>
I Above code I want to find Please use only letters,numbers, period, single space and underscore message. The xpath for that is /html/body/section[2]/div/div/form/article/div/div/span but it is not accessing by gettext() method. Pls how to access this ????
getText() method fetches only visible (i.e. not hidden by CSS) innerText of respective element. Which might be a cause for the problem.
Please try the following to check if element is displayed.
Driver.FindElement(By.id("error_firstname")).isDisplayed();
You can add WebDriverwait till that element is displayed and then fetch the text from that element.
WebDriverWait Driver_Wait=new WebDriverWait(Driver, 10); //10 denotes Total_Secs to wait
Driver_Wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("error_firstname")));
Hope this helps.
By using the id "error_firstname" we can only get the values in span which has id as error_firstname..
So use the id "click" which serves the best