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

Question

I want to get all the "Available Items"(check below screenshot) using Javascript at once, but I cannot get all of them at once as I have to use the scroll bar to make the rest of the available service appear in the CSS grid.

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

I was able get all them (including hidden ones) at once several times by change the CSS grid properties, but they were just trial and errors. Could anyone please help me?

Answer 1

Although I just see the HTML structure, most probably the widget works in an async way where the divs are only generated for the items / rows that are currently visible.

If you really want to simulate user actions or you need to test if the widget works properly then you really need to do that, aka:

1. Send Scroll Up / Down events until there is no content change (or if the scrollbar properties change to some values signaling that)
2. Collect all Items in-between
3. Filter Unqiue ones.

If this is not a must(you don't do widget validation but E2E testing) then you can dig deep into the internals of the widget and:

1. If the source code is available change it to allow querying all values at once, storing them in hidden divs etc
2. Send an HTTP Request to the server yourself (which would be like the deepest insight)

I would go with changing the widget - aka implementing a testing / e2e mode for it as well. That is a must in many modern software projects