Question

我想一次使用Javascript获取所有“可用项”（请在下面的屏幕截图中查看），但是我无法一次获取所有这些项，因为我必须使用滚动条使其余可用服务显示在CSS网格。

<div class="gridWrapper" data-dojo-attach-point="fromGridWrapper">
   <!-- 
      By default, hidden because the same template file is used whether the "from"
      node supports filtering or not - really no reason for 2 files. 
      => The Filtering sub-class will remove the hidden class and attach functionality.
      -->
   <div class="dijit dijitReset dijitInline dijitLeft dijitTextBox filterAvailableItems" id="widget_dijit_form_TextBox_0" role="presentation" widgetid="dijit_form_TextBox_0">
      <div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" type="text" tabindex="0" id="dijit_form_TextBox_0" size="20" value=""><span class="dijitPlaceHolder dijitInputField">Filter Available Items</span></div>
   </div>
   <div data-dojo-attach-point="fromNode" id="from_serviceSelect" class="dgrid dgrid-list ui-widget" role="grid" widgetid="from_serviceSelect">
      <div class="dgrid-header dgrid-header-row ui-widget-header">
         <div class="title">Available Items</div>
      </div>
      <div class="dgrid-scroller" style="user-select: none; margin-top: 35px; margin-bottom: 0px;">
         <div class="dgrid-content ui-widget-content">
            <div class="dgrid-preload" style="height: 0px;"></div>
            <div class=" dgrid-row dgrid-row-even ui-state-default dgrid-selected ui-state-active dgrid-focus" id="from_serviceSelect-row-34707" tabindex="0">A Guest is running on Snapshot</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-37729">Active Directory</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-31076">Active Directory 2012 - DRA</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-36616">Active Directory Critical</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-38883">Active DSOs (Cisco)</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-32796">Active Queue Length </div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-31583">AD</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-35072">ADTRAN - Device Health</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-35420">ADTRAN - Memory</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-37393">Agent Status</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-36194">APC PDU</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-31250">APC UPS</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-35131">APC UPS - Humidity</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-32621">APC UPS - Temperature</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" 
        <div class="dgrid-preload" style="height: 7315px;"></div>
     </div>
  </div>
  <div class="dgrid-header dgrid-header-scroll dgrid-scrollbar-width ui-widget-header" style="height: 35px;"></div>
  <div class="dgrid-footer dgrid-footer-hidden"></div>

通过更改CSS网格属性，我可以一次获得所有这些对象（包括隐藏的对象），但是它们只是试验和错误。谁能帮我吗？

Answer 1

尽管我只是看到HTML结构，但最有可能的是该小部件以异步方式工作，其中div仅针对当前可见的项目/行生成。

如果您真的想模拟用户操作，或者需要测试小部件是否正常工作，那么您真的需要这样做，即：

发送“向上/向下滚动”事件，直到内容没有变化（或滚动条属性更改为某些值以表示信号）为止
收集介于两者之间的所有物品
过滤掉不受欢迎的东西。

如果这不是必须的（您不需要进行小部件验证，而是进行端到端测试），则可以深入研究小部件的内部结构，并且：

如果源代码可用，请将其更改为允许一次查询所有值，并将它们存储在隐藏的div等中
自己发送HTTP请求到服务器（这可能是最深刻的见解）

我会去改变小部件-也可以为它实现测试/ e2e模式。在许多现代软件项目中，这是必须的

如何获取CSS网格中的所有元素（包括隐藏元素）

1 个答案: