Am very new to Selenium just learnt few things and trying to automate.Unable to locate an element in Selenium webdriver for the below one:
<div class="navBg withSubMenu">
<table id="topnav" class="navTable" cellspacing="0" cellpadding="0" style="-moz-user-select: none; cursor: default;">
<tbody>
<tr>
<td class="logoCell navCell" valign="top">
<td class="navItem navCell relative selected">
<td class="navItem navCell relative notSelected">
<a class="content tasks" href="/tasks/otasklist.do">
<div class="label" style="z-index:155; ">TASKS</div>
<div class="img"> </div>
</a>
</td>
<td class="navItem navCell relative notSelected">
<a class="content reports" href="/reports/reports.do">
</td>
<td class="navItem navCell relative notSelected">
<td class="menuCell navCell" valign="top">
</tr>
<tr class="secondLevelRow">
</tbody>
</table>
I have written code like
driver1.findElement(By.xpath("//*[Contains(#class,'content tasks')]")).click();
Anyone please help me.
And also please suggest some sites or links to learn more about locators especially xpath. I tried few but not getting it in depth.
Thanks in advance.
Start contains with a lower case c:
driver1.findElement(By.xpath("//*[contains(#class, 'content tasks')]")).click();
<a class="content tasks" href="/tasks/otasklist.do">
driver1.findElement(By.xpath("//a[#class='content tasks']")).click();
Related
Below is the HTML containing the b (bold) tags i want to get the XPath for.
<tbody>
<tr>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">..</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner=" <DIV class=gwt-HTML><B>Xyz</B></DIV>">
<b>Xyz</b>
</div>
</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner=" <DIV class=gwt-HTML><B>01/01/2019</B></DIV>">
<b>01/01/2019</b>
</div>
</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">..</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner=" <DIV class=gwt-HTML><B>Abc</B></DIV>">
<b>Abc</b>
</div>
</td>
</tr>
</tbody>
I came up with this xpath: //div[#class='get-HTML']/b but there are many other b tags.
For example if I had to read the text at the below tag, how do I be precise?
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner="<DIV class=gwt-HTML><B>01/01/2019</B></DIV>">
<b>01/01/2019</b>
</div>`
Tried this xpath but it didnt work:
//div[#class='get-HTML']/b[2]
Can you please help me crack this xpath?
Because the HTML tree is identical above all b elements -- meaning, tr/td/div/b will always retrieve 3 different b elements, you will need to use an index to access the desired element.
Depending on the b tag you want to retrieve, you will need to use the index of td elements to get the tag, because there are multiple td elements on the same level:
//tr/td[index]/div/b
Applying this example, we can retrieve b tags as such:
To get Xyz: //tr/td[2]/div/b
To get 01/01/2019: //tr/td[3]/div/b
To get abc: //tr/td[5]/div/b
Alternatively, if you would like to get the b tag based on its text, the path is different:
//b[text()='xyz']
However, this will only get you one b element, and you must know its text beforehand, so this approach is not desirable if you do not know the text inside the b elements.
If you want to be really specific include more parent elements in your XPath.
Easy trick to always get the correct XPath: Use Google Chrome Inspector > Select element > Right click HTML tag > Copy > XPath
In this case:
<tbody>
<tr>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">..</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner=" <DIV class=gwt-HTML><B>Xyz</B></DIV>">
<b>Xyz</b>
</div>
</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner=" <DIV class=gwt-HTML><B>01/01/2019</B></DIV>">
<b>01/01/2019</b>
</div>
</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">..</td>
<td align="left" style="VERTICAL-ALIGN: top" rowSpan="1" colSpan="1">
<div class="get-HTML" __listner=" <DIV class=gwt-HTML><B>Abc</B></DIV>">
<b>Abc</b>
</div>
</td>
</tr>
</tbody>
The XPath for the third b tag is: /html/body/div[3]/b
In your case, maybe you need to remove the /html/body/ maybe not. It depends on what parent elements your HTML code is in.
Note: so the XPath changes when you use different parent elements if you use this precise method. eg: It can be more difficult to implement on dynamically generated pages.
I have a child component in Vue js. Where i have a list of object which i am filtering based on InvGroup. I am facing issue when trying to create accordion format. I tried using , tag to surround the accordion content but none of them work. Please suggest a solution.
<div id="accordion" class="div-shadow col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div v-for="invGroup in invGroupTotals">
<label>{{invGroup.Group}}<span style="float:right;" v-if="invGroup.DiffTotal === 0" class="text-success"> No Difference </span><span class="text-danger" style="float:right;" v-else>Diffrence Count {{invGroup.DiffTotal}} , Amount ${{invGroup.DiffAmtTotal}}</span></label>
<div style="text-align: center; background-color: white;height:400px;overflow-y:scroll;" >
<table cellpadding="10" style="border-style: solid; border-color: Gray; border-collapse: separate;border-spacing: 2px" class="table tableStyle col-md-12 col-lg-12 col-sm-12 col-xs-12">
<tr>
<th v-for="column in weeklyReconcileGridColumns">{{column}}</th>
</tr>
<template v-for="item in weeklyReconcileList">
<tr v-if="invGroup.Group === item.UPCGroup">
<td >{{item.UPCID}}</td>
<td class="text-left" v-on:click="showItemHistory(item.UPCID, item.UPCDesc)">{{item.UPCDesc}}</td>
<td >{{item.SystemBOH}}</td>
<td >{{item.CurrentWeekBOH}}</td>
<td >{{item.Diffrence}}</td>
<td >{{item.TotalSalesAmount}}</td>
</tr>
</div>
<tr>
<td class="text-center" colspan="2"> Total</td>
<td> {{invGroup.SysTotal}}</td>
<td> {{invGroup.CountedTotal}}</td>
<td> {{invGroup.DiffTotal}}</td>
<td> {{invGroup.DiffAmtTotal}}</td>
</tr
</table>
</div>
I added the jquery in updated method.
updated: function () {
$("#accordion").accordion();
}
The problem is the looping tag should not be surrounded by and HTML tag.
Try using template tag instead of div tag
I have this HTML:
<div class="DivHeaderSizes" data-subgroup="1">
<img style="display:none" class="help-size-img-colorbox" data-subgroup="1_Man" src="Man.gif">
<div class="subgroup-description">Jogging</div>
<div class="help-size-link cboxElement" data-subgroup="1_Man">Tutorial</div>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="41" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="41">41</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_41" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_41" class="txt-Size" data-price="19.50" data-size="41" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="42" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="42">42</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_S" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_S" class="txt-Size" data-price="19.50" data-size="42" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Using Selenium with C# and starting from input element with name
ctl00$CthBody$sizelist$TxtSize_41
I want the XPath expression to get the text "Jogging". Thanks.
If the context node is input[#name='ctl00$CthBody$sizelist$TxtSize_41'], then the following XPath will select the div containing "Jogging":
(preceding::div[#class='subgroup-description'])[1]
Or you could use:
ancestor::div[1]/preceding-sibling::div[1]/div[#class='subgroup-description']
I need to select radion button with id="optProfile" in 7th tr using text "Internet Users" in td/font tag. I am using below code but it is not working and selecting radio button from 1st tr row. Can anyone help
<html>
<head>
<body onmousedown="infCheckMouseDown(event);" onkeydown="infCheckDownKey(event);" onbeforeunload="INFIEExit();" onload="INFsetInitialFocus();window_onload();CreateScriptingFrames();">
<form action="PEINFCommon.ASP?WCI=Genericcreen&WCE=GenericEvent" onsubmit="return false" name="Genericcreen" method="post">
<table class="TopLevelTable" align="center" width="100%" border="0">
<tbody>
<tr>
<td width="100%">
<table width="100%" border="0">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table width="98%" cellspacing="0" cellpadding="0" border="0" cols="1">
<tbody>
<tr align="center">
<td align="left">
<table width="100%">
<tbody>
<tr>
<tr>
<tr>
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<td width="5%">
<input id="optProfile" type="Radio" callfunction="" value="" onblur="ResetScript(this);return true;" onfocus="HighlightScript(this);" onclick="" name="" size="11">
<font class="fLabel"></font>
<br>
<input id="hidCurrentProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="N" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_CurrentProfileInd">
<input id="hidProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="RACINTER" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_ProfileCd">
</td>
<td>
<font class="">Internet Users</font>
</td>
</tr>
<tr height="">
<tr height="">
<tr height="">
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</frame>
<frame id="Script" scrolling="Yes" frameborder="0" noresize="">
</frameset>
</html>
you need to use ancestor instead of preceding:
//font[text()='Internet Users']/ancestor::tr[1]/td/input[#type='Radio']
and it's also a better practice to tell which one of the tr-ancestors you want -> [1] - since you want the first direct ancestor
Is there a reason why you are not using the id of the radio button?
WebElement wElement = wDriver.findElement(By.Id("optProfile"));
You can use the following XPath
//tr[.//font[text()='Internet Users']]//input[#id='optProfile']
This xpath looks for the tr containing the font tag with text "Internet Users" and then navigates to the input tag with id = 'optProfile'
You can use preceding as below-
By.xpath("//font[contains(text(),'Internet Users')]/preceding::input[#id='optProfile']")
Thanks everyone here for your help. I really appreciate it.Its working with below code
WebElement trs = GlobalVar.wDriver.findElement(By.xpath("//font[text()='Internet Users']/ancestor::tr[1]"));
trs.findElement(By.id("optProfile")).click();
I would try something like this
List<WebElement> trs = driver.findElements(By.cssSelector("table > tr"));
for (WebElement tr : trs)
{
List<WebElement> fonts = tr.findElements(By.tagName("font"));
if (!fonts.isEmpty() && fonts.get(0).getText().trim().equals("Internet Users"))
{
tr.findElement(By.id("optProfile")).click();
break;
}
}
You didn't show the TABLE tag in the HTML snippet so you will likely need to be more specific in the initial CSS selector. Basically this code loops through the TRs looking for "Internet Users" in the FONT tag. Once it finds it, it click the radio button with id=optProfile.
If you will post the TABLE tag in the HTML snippet I can help with the CSS selector.
Edit 1: changed the code to address the case where some TRs don't contain FONT tags.
Hoping someone can help me out here.
I'm trying to pull a few bits of info from a web page programatically.
The HTML in question is like this...
<body>
<!-- body content -->
<div id="content">
<!-- Page Header -->
<h1>
PRODUCTNAME™
</h1>
<!-- End Page Header -->
<div id="productImg">
<img id="product.image.large.015" alt="PRODUCTNAME™" src="PRODUCTIMAGEURL" border="0" />
</div>
<div id="productAlt">
<table width="98%" border="0" cellspacing="1" cellpadding="2">
<tr class="altRowLtGray">
<td>
Item #
<span style="text-decoration: inherit;">015</span>
</td>
</tr>
<tr class="altRowLtGray">
<td>
<span style="float: left;">PRODUCTPRICE GBP</span>
<span style="float: right; padding-left: 1em;"></span>
</td>
</tr>
<tr class="altRowLtGray">
<td>
PRODUCTADDITIONALINFO
</td>
</tr>
</table>
</body>
I need to retrieve the 4 items in caps (PRODUCTNAME, PRODUCTIMAGEURL, PRODUCTPRICE and PRODUCTADDITIONALINFO) but am struggling as any examples I find dont seem to be able to be transposed to suit the above HTML... but it could just be me!
I know I need to use either GetElementByID or GetElementByTagName, but i've not used either of these functions before so please forgive my ignorance.
Any help appriciated!!!