javascript - 如何查找包含另一个嵌套选择器的多个选择器之一

Question

我有一个网页，并且有一个包含多个元素的列表:

第一种元素类型:

<li class="comp-data-text"> </li>
    <span class="imstuck" data-bind="text"> Something </span>

第二种类型的元素:

<li class="comp-data-text"> </li>

正如您所看到的，第二个不包含“imstuck”类以及“Something”文本。 (这是一个例子，实际情况下第二行代码嵌套得更深)

我想找出哪个元素包含或不包含这行代码。基于 cypress 文档和我尝试过的一些现有主题:

cy.get(...).each(($item) => {
    if ($item.has('span.imstuck')) {
        cy.wrap($item).find('.imstuck').should('contain', 'Something')
    }
})

即使元素不包含“imstuck”类，Cypress GUI 也会运行与 if 语句相关的代码。

AssertionError
Timed out retrying after 10000ms: Expected to find element: .imstuck, but never found it.
 Queried from element: <li.comp-data-text>

我还找到了另一种方法，但它也像前面的示例一样工作:

cy.get(...).each(($item) => {
    if ($item.hasClass('.imstuck')) {
        cy.wrap($item).find('.imstuck').should('contain', 'Something')
    }
})

预期结果: 如果特定元素不包含“.imstuck”类，则 if 语句将不会运行第三行代码。

实际结果 弹出错误是因为每次 cypress 运行第三行代码时，即使特定元素不包含 'imstuck' 类，并且当 cypress 尝试从第三行查找类 'imstuck' 时，cypress 会抛出错误。

Answer 1

将 .length 添加到 if 语句

cy.get('li').each(($li) => {
  if ($li.has('span.imstuck').length) {
    cy.wrap($item).find('.imstuck').should('contain', 'Something')
  }
})

但将 'span.imstuck' 提升一个级别可能会更好。这样您只能获取具有跨度的元素。

cy.get('li span.imstuck').each(($span) => {
  cy.wrap($span).should('contain', 'Something')
}