javascript - 如何验证搜索中是否只存在匹配元素？

Question

不好的标题，我知道，但很难用几句话来解释。

我在 nightwatch 上进行自动化，遇到了一些让我感到难过的事情，因为我习惯于在 JS 上编写代码仅用于自动化。通常，很容易验证某个元素是否存在。但是为此，我有一个显示搜索结果的 html 元素，我需要验证结果是否仅包含元素

所以，我需要确保所有 result-item在 entity-results 上div 只有 hint-val-fragment match 的结果等于 -1000000.0和 hint-prop等于 cpuLimit: , 在这个例子中。

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

Answer 1

下面我定义了 isValid，它应用于传递给 allValid 的数组中的每个元素。此功能可以在 DOM 更新后应用，您需要重新检查元素:

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


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


const allAreValid = allValid(children)