使用 Firebug，我可以看到父级内的 HTML<Div> 部分，当我使用 Selenium 获取基于 html 源的 <div id> 时，我看不到子级

Posted

技术标签:

【中文标题】使用 Firebug，我可以看到父级内的 HTML<Div> 部分，当我使用 Selenium 获取基于 html 源的 <div id> 时，我看不到子级【英文标题】：With Firebug i am able to see HTML<Div>section inside the parent, when i use Selenium to fetch the html source based <div id>, i cannot see the child 【发布时间】：2016-05-11 06:36:02 【问题描述】：

使用 Firebug 我可以看到父级中的 html 部分，

<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>

但是当我使用 Selenium 使用 Java 来获取基于父级的 html 源时，我看不到根 div 的子部分 这是我的硒代码 sn-p：

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));

上述代码的输出给出了这个

单选树。 .当前选择的值为 , 文件夹。我的文件夹。 , , 光标节点为 , , 可用命令。使用向上和向下箭头键移动节点光标。使用右箭头展开子树。使用左箭头关闭展开的子树。使用空格键和回车键选择值。使用 home 和 end 键移动到第一个或最后一个节点。我的文件夹共享文件夹 树1462948179598

从 firebug 中提取的完整 html 源代码如下

<!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>

**请帮我看看我哪里出错了或者我遗漏了什么？

任何线索都会非常有帮助**

提前致谢

【问题讨论】：

【参考方案1】：

我不能 100% 确定您诚实地问什么，但如果您希望 innerHTML 和 textContent 正常运行，我确实知道是什么导致了您的问题。

这一行：

 System.out.println(ele.getAttribute("innerHTML"));

几乎不会打印任何东西，因为 innerHTML 是一个属性，而不是一个属性。它是否仅绑定在浏览器中。 textContent 也是如此，它不是和属性，它是一个属性并且只存在于浏览器中。

如果您想在定位后从 WebDriver 中看到元素的可见文本，请调用：

ele.getText()

这将为您提供相当于 textContent 属性。至于innerHTML，你真的只需要按照现在的方式执行脚本，调用executeScript() 并使用“magic”arguments[] 数组传入WebElement，然后返回innerHTML 的值。我以前也这样做过，并且为所有孩子获取 HTML 也没有问题。

【讨论】：

感谢斯蒂芬的快速帮助。是的，我走错了方向。我得到了 style= Display: hidden 所需的 html 代码。我所做的是： 1. 由于我的目标页面 url 有隐藏的 div，我通过单击 Parent 使它们可见 2. 然后迭代到子 div 以使用 getText() 获取我的结果。跨度> 【参考方案2】：

您的某些 HTML 结构不正确，

<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" >

一旦我为开始的&lt;script&gt; 和&lt;form&gt; 标记添加了结束标记并将上面的内容更改为下面的HTML，ele.getAttribute("innerHTML") 指令就会返回该元素的inner-html。

<script type="text/javascript"></script>
<form style = "position: absolute; top: -1000px; display:none;"></form>
<script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js" type = "text/javascript"></script>

当涉及到结构不正确的 HTML 时，Firebug 可能会更宽容。

【讨论】：

是的，我猜 Firebug 并不关心完整的 html 标签，它只是为您提供了我们在基于 Selenium 的交互中需要的一组 id、CSS 选择器和 xpath 帮助。感谢您提出这一点，干杯！！

以上是关于使用 Firebug，我可以看到父级内的 HTML<Div> 部分，当我使用 Selenium 获取基于 html 源的 <div id> 时，我看不到子级的主要内容，如果未能解决你的问题，请参考以下文章

iOS 移动设备：在可滚动父级内的 iFrame 中滚动

如何仅使用 CSS 将绝对元素自动居中在相对父级内？

修复旋转父级内可拖动 div 的鼠标方向

如何获取内部 HTML 内容高度

flex容器内的居中元素正在增长并溢出顶部[重复]

flex容器内的居中元素正在增长并溢出顶部[重复]