Using Firebug i am able to see the HTML section inside the parent ,
<div id="tabstop_1_ElementForTabStop" class="treeContainer" style="visibility: visible; height: 100%; overflow: auto;" tabindex="0">
<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 1;">
<div id="tree1462947337992_children">
<div id="tree1462947337992$virtual_root" class="treeNode">
<div id="tree1462947337992$virtual_root_children" class="treeChildContainer" style="margin-left: 0px; display: block;">
<div id="tree1462947337992$/users/npatel" class="treeNode" style="display: block;">
<div id="tree1462947337992$/shared" class="treeNode" style="display: block;">
<span class="masterTreeLine treeLine" style="display: block;">
<div id="tree1462947337992$/shared_children" class="treeChildContainer" style="display: block;">
<div id="tree1462947337992$/shared/Components" class="treeNode">
<div id="tree1462947337992$/shared/Sales Home" class="treeNode">
<div id="tree1462947337992$/shared/Sample Lite" class="treeNode">
<div id="tree1462947337992$/shared/Skill Portal" class="treeNode">
<div id="tree1462947337992$/shared/Trainings & Skills" class="treeNode">
</div>
</div>
</div>
</div>
</div>
</div>but when i use Selenium using Java to fetch the html source based on the parent , i cannot see the child section of the root div Here is my selenium code snippet:
WebElement ele = driver.findElement(By.id("tabstop_1_ElementForTabStop"));
System.out.println(ele.getAttribute("innerHTML"));
Thread.sleep(4000);
String x = (String) jse.executeScript("return arguments[0].innerHTML", ele);
String div_id = x.substring(x.indexOf("id=\"tree") + 4, x.indexOf("_children\""));
System.out.println(div_id);
ele = driver.findElement(By.id(div_id + "$/shared_children"));
System.out.println(ele.getAttribute("textContent"));
System.out.println(jse.executeScript("return arguments[0].textContent", ele));
Output of the above code gives this
Single Select Tree. . Currently selected values are , Folder. My Folders. , , The cursor node is , , Available commands. Use the up and down arrow keys to move the node cursor. Use the right arrow to expand a subtree. Use the left arrow to close an expanded subtree. Use spacebar and enterkey to select values. Use home and end keys to move to the first or last node. My FoldersShared Folders tree1462948179598
The Complete html source as extracted from firebug is below
<!DOCTYPE html>
<html lang="en" dir="ltr" style="visibility: visible;">
<head>
<body class="masterOBIEE HTMLBody">
<div class="HeaderContainer">
<a id="idSkipContentLink" class="HeaderSkipLink" tabindex="-1" href="javascript:saw.header.skipToContent()">Skip to content</a>
<table class="masterBrandingArea HeaderTopBar" cellspacing="0" cellpadding="0" border="0" role="presentation">
<div class="HeaderBarSeparator"></div>
<table class="masterGlobalLayer HeaderSecondBar HeaderSecondBarPadding" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td class="HeaderTitleBarCell">
<td class="HeaderNavBarCell">
<div align="right">
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td class="HeaderAlerts">
<td class="HeaderNavMenubarCell">
<div class="HeaderMenubar" style="padding-right: 0px;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td title="Home">
<td>
<td>
<td>
<td title="Favorites">
<td>
<td title="Dashboards">
<span id="dashboard" class="masterMenuButton masterMenuButtonGlobal uberBarTextMenuButtonSpan" aria-haspopup="true" role="button" aria-label="Dashboard drop down menu" tabindex="0">
<span class="HeaderMenuBarText HeaderMenuNavBarText" role="presentation">
<span role="presentation">Dashboards</span>
</span>
<span class="HeaderMenuBarDropdown" role="presentation">
</span>
</td>
<td>
<td title="New">
<td>
<td title="Open">
<td>
<td>
<td title="npatel">
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="PageOuterBodyTopRightTd">
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
< form style = "position: absolute; top: -1000px; display:none;" >
< script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js"
type = "text/javascript" >
< span id = "sawruler"
style = "display:none;visibility:hidden;white-space:nowrap;" > < /span>
<div class="masterGlobalLayer ComponentHeader ComponentHeaderNoSecondaryTabbar">
<div id="idSummarySectionDiv" class="masterPrimaryLayer masterComponentHeaderSummaryDiv ComponentHeaderSummaryDiv">
<table class="masterPrimaryLayer ComponentHeaderTable ComponentHeaderTableEmptyUberbar ComponentHeaderTableEmptyTabBar ComponentHeaderTableSummary" cellspacing="0" cellpadding="0" border="0">
<table class="masterPrimaryLayer PrimaryTabTable" cellspacing="0" cellpadding="0" border="0" style="table-layout:fixed;width:100%">
<tbody>
<tr>
<td class="PrimaryTabbarLeftBorder" style="width:4px"></td >
< td >
< div id = "PageContentOuterDiv"
class = "masterSecondaryLayer PageContentOuterDiv PageContentBodyDiv CatalogPageContentOuterDiv"
style = "height: 237px;" >
< table cellspacing = "0"
cellpadding = "0"
border = "0"
style = "width:100%;table-layout:fixed;" >
< tbody >
< tr >
< td class = "SecondaryTabbarLeftBorder" > < /td>
<td style="width:100%">
<div id="idCatalog" style="height: 237px;">
<div id="idCatalogSplitter" class="SplitterContainer" style="overflow: hidden; visibility: inherit; width: 1326px; height: 235px;">
<div class="SplitterContentPane" sizeshare="220px" layouttype="contentPane" style="position: relative; top: 0px; left: 0px; width: 220px; height: 235px;">
<div id="idCatalogFoldersAccordion" class="masterAccordionBottomContentAreaPanel PrimaryAccordion" style="width: 220px; height: 232px;">
<div class="AccordionPane" panename="folders" maintainstate="true" expanded="true" style="display: block;">
<div class="masterAccordionHeader masterAccordionTopHeader AccordionFirstPaneHead" style="width: 218px; position: relative; top: 0px; left: 0px;">
<div class="masterAccordionContentAreaPanel AccordionPaneBody" style="width: 214px; height: 77px; position: relative; top: 0px; left: 0px; padding: 2px;">
<div id="tree1462947337992" style="overflow: hidden; width: 214px; height: 75px;">
<div id="tabstop_1_ElementForTabStop" class="treeContainer" style="visibility: visible; height: 100%; overflow: auto;" tabindex="0">
<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 1;">
<div id="tree1462947337992_children">
<div id="tree1462947337992$virtual_root" class="treeNode">
<div id="tree1462947337992$virtual_root_children" class="treeChildContainer" style="margin-left: 0px; display: block;">
<div id="tree1462947337992$/users / npatel " class="
treeNode " style="
display: block;
">
<div id="
tree1462947337992$ / shared " class="
treeNode " style="
display: block;
">
<span class="
masterTreeLine treeLine " style="
display: block;
">
<div id="
tree1462947337992$ / shared_children " class="
treeChildContainer " style="
display: block;
">
<div id="
tree1462947337992$ / shared / Components " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Sales Home " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Sample Lite " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Skill Portal " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Trainings & Skills " class="
treeNode ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="
overflow: auto;
display: none;
"></div>
<div style="
overflow: auto;
display: none;
"></div>
</div>
</div>
<div class="
AccordionPane " sizeshare="
170px " panename="
tasks " maintainstate="
true " expanded="
true " style="
display: block;
">
</div>
</div>
<div class="
HorizSplitter " collapsenextpane="
" layouttype="
splitter " style="
position: relative;
top: -235px;
left: 220px;
width: 7px;
height: 235px;
">
<div class="
SplitterContentPane " layouttype="
contentPane " style="
position: relative;
top: -470px;
left: 229px;
width: 1097px;
height: 235px;
">
</div>
</div>
</td>
<td class="
SecondaryTabbarRightBorder "></td>
</tr>
</tbody>
</table>
<table cellspacing="
0 " cellpadding="
0 " style="
width: 100 % ;
table - layout: fixed;
">
</div>
</td>
<td class="
PageOuterBodyCenterRight "></td>
</tr>
</tbody>
</table>
<table cellspacing="
0 " cellpadding="
0 " style="
width: 100 % ;
table - layout: fixed;
">
</div>
</body>
</html>**Please help me on where i am going wrong or i am missing something?
Any lead will be very helpful**
Thanks in advance
I am not 100% sure what you're asking honestly, but I do see what might be causing you some issue if you are expecting innerHTML and textContent to function correctly.
this line:
System.out.println(ele.getAttribute("innerHTML"));
Will almost never print anything because innerHTML is a property, not an attribute. Is it bound ONLY within the browser. Same goes for textContent, it is NOT and attribute, it is a property and is only present in the browser.
If you want the visible text of an element from WebDriver once you have located it, call:
ele.getText()
Which will give you the equivalent of the textContent property. As far as innerHTML, you really just have to execute the script the way you are now by calling executeScript() and using the "magic" arguments[] array to pass in the WebElement, then return the value of innerHTML. I have done this before and had no issue getting the HTML for all children as well.