Cypress 测试用例：仅选择元素的文本（而不是其子元素/后代的文本）

Question

HTML 代码：

<p class="target">
    <span>I am Span 1 of target_value 1*</span>
    <span>I am Span 2 of target_value 2*</span>
    target_value   /* I want to get this value in cypress test case */
</p>

注意*：文本“I am Span 1 of target_value 1”和“I am Span 2 of target_value 2”都是动态的，有时会发生变化。但这些跨度可能包含文本“target_value”。在 cypress 测试用例中，如何选择文本“target_value”

直接（不在其子级中）并检查它是否正在渲染。我只想获取不在其任何子元素内的主文本值。

Answer 1

您的目标是文本节点。有 3 个，但前两个只是跨度之间的间隔字符。

cy.get('p')
  .then($el => $el[0].childNodes)  
  .then(children => [...children].filter(child => {
    return child.nodeType === 3   // ignore <span>s
      && child.textContent.trim() !== ''  // remove spacing between <span>s
  }))
  .then(textNodes => textNodes[0].textContent.trim())  
  .should('eq', 'target_value   /* I want to get this value in cypress test case */')

如果目标文本始终位于最后<p>

cy.get('p')
  .then($p => $p[0].lastChild.nodeValue.trim())   
  .should('eq', 'target_value   /* I want to get this value in cypress test case */')

不包括患有以下疾病的儿童.not(children())

cy.get('p')
  .then($p => $p.contents().not(Cypress.$('p').children()).text().trim())
  .should('eq', 'target_value   /* I want to get this value in cypress test case */')

克隆和删除子项

cy.get('p')
  .then($p => $p.clone().children().remove().end().text().trim())
  .should('eq', 'target_value   /* I want to get this value in cypress test case */')