Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a 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-footer dgrid-footer-hidden"></div>

I have attempted various CSS grid property changes to display all items together, but unfortunately, it has been a hit-and-miss process. If anyone could provide assistance, I would greatly appreciate it.

https://i.sstatic.net/23KRI.png

javascripthtmlcsspython-3.xselenium

Answer №1

From my observation of the HTML structure, it appears that the widget operates asynchronously, generating divs only for visible items or rows.

If you wish to simulate user actions or validate the functionality of the widget, you may need to:

  1. Trigger Scroll Up/Down events until no content changes occur, or until specific scrollbar properties indicate a change
  2. Capture all intermediate items
  3. Identify unique elements

If widget validation is not necessary and you are focused on end-to-end testing, consider delving into the widget's internal workings by:

  1. Modifying the source code to allow querying all values at once and storing them in hidden divs
  2. Sending an HTTP Request directly to the server for deeper insights

In my opinion, implementing a testing/e2e mode for the widget is essential for modern software projects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in React Native: Press function is not defined for TextInput

I am currently working on implementing an increment and decrement button feature in my application, which should then display the updated number in a text input field. However, I seem to be facing an issue where the text input is not showing the expected o ...

javascriptandroidreactjsreact-nativemobile

Introducing Vee Validate 3.x and the ValidationFlags data type definition

I'm currently struggling to locate and utilize the ValidationFlags type within Vee-Validate 3. Despite my efforts, I am encountering difficulties in importing it. I am aware that this type is present in the source code located here. However, when I a ...

javascripttypescriptvue.jsvee-validate

"Implementing legends in charts with c3.js and JSON data: A step-by-step guide

Utilizing the C3 chart library to showcase data in my project, I aim to display legends (labels) instead of numbers on the AxisX: Data JSON format: [ {"Label":"DQUA","Aut":3.75,"NoAut":3.75,"CM":32}, {"Label":"DPRO","Aut":43.9,"NoAut":0,"CM":144} ...

javascriptjsonchartsc3.js

Differences Between 'this' and 'self' in Classes

I am currently working with ES6 Classes and I'm struggling to grasp why I am able to access the this variable within one of the methods. //CODE class Form{ constructor(){ var self = this; } assemble(){ log(self); ...

javascriptes6-class

Tips for managing mouse over events in legends on highcharts

I have successfully implemented mouseover/mouseout event handling for donut slices. Please review my code below: http://jsfiddle.net/nyhmdtb8/6/ Currently, when I hover over a slice, it highlights that slice and greys out all others. Is it possible to ac ...

javascriptjqueryhighcharts

Resize Pictures in Carousel for Smartphones

Currently, I am in the process of optimizing my website for mobile devices. The NivoSlider, which is used throughout the site, does not seem to scale well on smaller screens. Despite trying various methods in the mobile section of my stylesheet such as " ...

cssmobilescalinghandheld

Utilize CSS to selectively apply the mix-blend-mode property to targeted elements

In my project, I am aiming to utilize the mix-blend-mode property to give certain SVG paths the appearance of an erasing path by blending them with a background image on the stroke. However, I have encountered a challenge where the mix-blend property affec ...

htmlcsssvgimage-maskingmix-blend-mode

What is the best way to exclude a specific key when adding JSON objects to an array?

I'm facing a challenge with a JSON array of objects that contains other arrays of objects. The structure of this array is not fixed, making it difficult for me to delete specific elements like delete mainArray[0].obj.subobj[1].objToOmit; In my progra ...

javascriptarraysangularjsjsonlodash

Discovering the most cost-effective combination algorithm

Looking for two numbers, P and Q, in a given array N with at least 5 items where 0 < P < Q < N - 1. Consider the following array: const N = [1, 9, 4, 5, 8]; If P = 1 , Q = 2 , then the cost is N[P] + N[Q] = N[1] + N[2] = 9 + 4 = 13 If P = 1, Q ...

javascriptarraysalgorithmperformancetime-complexity

Changing the format of a numerical value to include commas for every 1000 increment

I'm trying to find a way to format numbers in a specific manner, such as changing 1234567 into 1,234,567. However, I've run into some issues when attempting to use the currency pipe of TypeScript. It adds USD or $ in front of the number, which i ...

javascriptangulartypescriptpipes-filters

Guide to creating a PHP script for interfacing with a MySQL database

Right now, I have just finished learning HTML and I am attempting to write PHP scripts for connecting to MySQL. However, the information on websites such as Google is confusing because they do not specifically outline how to connect using PHP only. Could ...

phphtmldatabase

Looking for assistance with CSS selectors for the following structure

I am currently working on locating the anchor element "a" that is nested inside a table with the class name table.ic-table-creditReportProduct table tr. I have attempted to find it, but my attempts have been unsuccessful so far. Any suggestions on where th ...

cssseleniumcss-selectorsspockgeb

Facing challenges with using express.static() to display an image from a directory within my server on the front end

My application showcases various items on a specific page. Each item includes an image, number, and name. The images are stored in a folder named "uploads" on the backend. I can view the images within this folder, and from the Node backend, I'm provid ...

javascriptnode.jsreactjsexpressdirectory

How to target the attribute value of an image element that has a specific parent class using jQuery

I'm working with a list that looks like this: <ul> <li><div class="thumb"><img src="image-1.jpg"></div></li> <li><div class="thumb"><img src="image-2.jpg"></div></li> <l ...

jquerycss

What is the best way to combine two JavaScript functions into a single function, especially when the selector and function to be invoked may differ?

In the provided snippet, I am using the following function callers: // del if ( maxDelivery > 0 ) { if ( maxDelivery === 1 ){ delAdressFunc( dels ); } else { for ( i = 0; i < maxDelivery; i += 1 ){ delAdressFunc( ...

javascriptjqueryfunctionoptimization

What is the best way to sort through an array using JavaScript?

Here's an array for you: values = ["10%", 1000, "5%", 2000] I'm looking to split this into two separate arrays like so: percentages = ["10%","5%"] numbers = [1000,2000] How can I achieve this using JavaSc ...

javascriptarraysfilter

What methods are most effective for designing a static side panel featuring a personalized tree-style list?

I am currently working on a sidebar design which is not rendering correctly, displaying a lot of flicker when expanded. I opted for b-nav instead of a traditional sidebar due to the interference it caused with my horizontal navigation bar. Here are my code ...

javascripthtmlvue.jsbootstrap-vue

Whenever I attempt to start my ReactJS project using the command line with `npm run it`, I keep encountering an error

Encountered an issue with the webpack-dev-server script while working on my project. Ensure that your node.js and npm versions are up to date. If they are, the problem might lie within the reactjs package rather than npm itself. Kindly inform the author ab ...

javascriptnode.jsreactjs

Shuffling 4 div elements horizontally using Javascript and JQuery

I have a row of 4 div elements (cards) that I want to mix up every time the page is refreshed. How can I achieve this? Currently, I am using the following code: var random = Math.floor(Math.random() * $(".card").length); $(".card") .hide() ...

javascriptjquery

Issue encountered when attempting to execute Eclipse on Windows platform

An issue occurred while trying to run the code: java.lang.IllegalStateException: The driver executable (C:\chromedriver.exe) is missing. at org.openqa.selenium.internal.Require$FileStateChecker.isFile(Require.java:315) at org.openqa.selenium.r ...

javaeclipseseleniumerror-handling