Is there a way to confirm that a search only displays matching elements?

Sorry for the not-so-great title, but explaining briefly is tricky.

I'm currently automating on nightwatch and encountered a problem that has left me puzzled since I usually code in JS only for automation. Normally it's simple to verify if an element is present or not. However, this time I have an HTML element displaying search results and I need to confirm that those results only contain specific elements.

So, I need to ensure that all result-item within the entity-results div only display results with hint-val-fragment match equal to -1000000.0 and hint-prop equal to cpuLimit:, using this example.

<div class="results" style="">
   <div>
      <div class="results-set-title">Results</div>
      <div class="entity-results">
         <div class="result-item">
            <div class="result-item-label">
               <div class="result-item-name">Resources</div>
               <div class="result-item-source"><span>source:</span> <span>cz0</span></div>
            </div>
            <div class="result-item-hint">
               <div class="hint-prop">cpuLimit:</div>
               <div class="hint-val">
                  <div class="hint-val-fragment">
                  </div>
                  <div class="hint-val-fragment match">
                     -1000000.0
                  </div>
                  <div class="hint-val-fragment">
                  </div>
               </div>
            </div>
         </div>
         (Additional result items with similar structure)
      </div>
   </div>
</div>

Answer №1

Here is a snippet of code that defines the isValid function, which is used to check every element in an array when passed to allValid. This function comes in handy when you've made changes to the DOM and need to reevaluate the elements:

const isValid = elem => {
    const value = elem.getElementsByClassName('hint-val-fragment match')[0].innerHTML.trim()
    const hint = elem.getElementsByClassName('hint-prop')[0].innerHTML.trim()
    return (
        value === '-1000000.0'
        && hint === 'cpuLimit:'
    )
}
const allValid = arr => arr.every(isValid)


const parentElement = document.getElementsByClassName('entity-results')[0]
const childElements = Array.from(parentElement.children)


const areAllValid = allValid(childElements)

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

What is the best way to access the authData while deleting a user from Firebase?

Previously, when deleting data from Firebase, I used the following code: MyFirebaseRef.on('child_removed', function (oldChildSnapshot) { /* oldChildSnapshot => the data that's been erased */ }); Now, however, I want to achieve the ...

Fetch information from MySQL database using AJAX

My goal is to take a date input from a form in a PHP file, utilize it to fetch data from a MySQL database, and display the results in an array without refreshing the page. Currently, I'm working with three files: index.php, global.js, and date.php Th ...

Having trouble loading CSS in Firefox?

After creating a basic responsive website, I encountered an issue where Mozilla was not loading the CSS properly when the site was hosted on my server. Interestingly, the CSS loaded fine on Chrome and IE when viewed from my computer. Here is a snippet of ...

Merge JSON entries with identical names

Currently, I am delving into the world of javascript and honing my skills in working with JSON. I have a JSON file that presents a challenge - how can I consolidate entries with the same name under one single entry? Any ideas on how to achieve this? Orig ...

A guide on how to dynamically render a component based on a constant property in React

I have a React component that needs to dynamically render another component based on the value of a header property in a constant. Specifically, if the header is 'Woffy', I want to render Component1. Here's the code snippet: import React fro ...

Collapse the active panel on a jQuery accordion with a click event

I'm currently utilizing the Simple jQuery Accordion created by CSS-Tricks, and I am seeking guidance on how to enable the active panel to close when clicking on the link within the dt element. The scenario where I am implementing this is as a menu in ...

Manipulating CSS for a certain ID that is applied to multiple elements with the help of JQuery

I am attempting to conceal all div elements except the initial one within a specific ID. Despite my efforts to create a custom jQuery script, it does not appear to be functioning. $("div.hero-featureSwap:not(:first)").css({display:none}); Is this scr ...

jQuery AJAX - Unauthorized Access Error Code 403 Caused by CORS Issues

Attempting to replicate the following function, which is sourced from immowelt.de. The js-file can be found at . Replicated Function: a.ajax({ type: "POST", url: IwAG.Vars.acSource ? IwAG.Vars.acSource : j, contentType: "appl ...

Tips for accessing the content of a div tag with Protractor

Currently, I am working on developing a test that needs to click on a link within a div. However, there is an issue with my XPath locator due to some recent changes made by the developer in the UI. Using Xpath may not be a viable solution as the UI is subj ...

Viewing CSV Headers with PapaParse Plugin

I am currently utilizing the PapaParse plugin to handle CSV files. I have implemented a function that generates a table for displaying the results extracted from the CSV file. function processFile(evt) { var document = evt.target.files[0]; Papa.parse(doc ...

Dividing the content: A two-column CSS layout

I am currently redesigning a layout that is using tables for a two-column design but I have encountered some issues. <div id="frame"> <div id="leftcol"> <div id="1">blah</div> </div> <div id="leftcol"> <div ...

How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

In this section of our code, the function moveTile is responsible for moving a tile. How can I modify it so that the hover color changes to red? function moveTile(identity) { var emptyId = findEmptySpace(); if (isEmptyNeighbor(identity)) { document.ge ...

At a certain point, the scrolling iframe within the mobile app suddenly jumps back to the top of the page

Looking for some assistance with my HTML code. Here it is: <header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a> <h1 class="title">Page</h1> </header> <div style="overflow:auto;-we ...

The IMG onclick event for LinkModalDialog does not function properly on Mozilla browsers

I am currently utilizing the following function: function OpenLinkModal(obj){ var arr=showModalDialog("../../files/list_simple.asp","","dialogHeight: 600px; dialogWidth: 450px; edge: Raised; center: Yes; resizable: Yes; status: Yes; scroll: Yes; help ...

Aligning the image at the center within a flex container

I am struggling with aligning an image and a link inside a div using the display: flex property. This is how my code looks: <div style="display: flex;"> <div class="site-title-container"> <img style="border-radius: 7px; width: 34px; h ...

Which Angular Lifecycle event should I utilize to trigger a specific action when either two buttons are pressed or when one of the buttons undergoes a change?

In this scenario, we have a total of 6 buttons split into two groups of 3: one on the top and the other on the bottom. let valuesum; let value1; let value2; let ButtonGroup1clicked= false; let buttonGroup2Clicked= false; function click1 (value){ va ...

Tips for showcasing a date using date-fns tailored in a Mui DatePicker as Thursday, January 13th

I'm currently working on a project using CodeSandbox to format dates as dddd, MMMM Do. The expected output is Thursday, January 13th, but instead I'm receiving 0013, January 13th. According to the date-fns documentation found at Date-fns format, ...

What is the best way to stretch the background image across both the footer and navbar for my app?

Here is the code snippet I am currently working with: <template> <v-app> <AppBar></AppBar> <v-main> <router-view></router-view> </v-main> <Footer></Footer> ...

Ways to determine if an object contains an array

Looking at the following data structure: [ 13, { a: [ [ '2988.30000', '0.19000000', '1549294216.653040' ] ] }, { b: [ [ '2988.30000', '0.00000000', '1549294216.653774&a ...

What is the best way to divide JSON data into separate Zapier resources?

I'm trying to utilize the Bing News Search API through an API call to retrieve results that match a specific query. My tool of choice is Zapier. For this purpose, I am employing the Code step, which supports Python or Javascript. I have currently wri ...