cypress.io迭代元素列表以查看是否不存在文本，然后执行操作以添加元素

Question

我正在尝试在列表上迭代（＆lt; ul＆gt;），以查看＆lt; li＆gt; li＆gt;列出项目元素。如果不存在字符串（柠檬），则我想执行一个操作以添加元素。否则，如果字符串确实存在，那么我只想什么都不做并继续。

示例html：

<ul id=theTree>
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

我尝试过：

let found = false
cy.get('#theTree').find('li').each( ($node, i, $list) => {
  if ($node.textContent.includes("Lemon")) {
    found = true
  }
})
// At this point after each <li> has been iterated over, will 'found' be true or false?
if (!found) {
  // Add "Lemon" to the list here if it was not found in the <ul> list...
} else {
  // Do nothing. Lemon already exists in the list.
}

if条件“ $ node.textcontent”正在返回未定义，而不是从列表元素返回文本内容。因此，.includes（）函数会引发错误。

另外，我感觉到来自.east（）的异步回调函数需要保存“找到= true”状态的诺言或其他方法，因此，第二个如果块可以正确确定是否找到了“柠檬”列表迭代。

任何帮助都非常感谢。

Answer 1

您必须在之后检查结果 每个命令将被执行。
例如，您可以使用然后使用命令如下：

let found = false
cy.get('#theTree').find('li').each( ($node, i, $list) => {
  if ($node.textContent.includes("Lemon")) {
    found = true
  }
}).then(() => {
// this callback will be executed after 'each' command so we know the result at this point.
if (!found) {
  // Add "Lemon" to the list here if it was not found in the <ul> list...
} else {
  // Do nothing. Lemon already exists in the list.
}
})

Answer 2

也许使用.east（）迭代不是最简单的方法。

使用.then（）允许您传递找到的对链条的值。如果您想在测试中以后使用它，也可以添加一个别名。

设置命令链外部的变量称为“反弹”，可能会根据测试结构引起问题。

cy.get('#theTree').find('li')
  .then($els => {
    const texts = [...$els].map(el => el.innerText)  // extract texts
    const found = texts.includes('Lemon')
    return found
  })
  .then(found => {
    if (!found) {
      ...
  })

与别名

cy.get('#theTree').find('li')
  .then($els => {
    const texts = [...$els].map(el => el.innerText)  // extract texts
    const found = texts.includes('Lemon')
    return found
  })
  .as('found')

// later

cy.get('@found').then(found => {
  if (!found) {
    ...
  })