5

HTML Code:

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

Note*: Both the texts "I am Span 1 of target_value 1" and "I am Span 2 of target_value 2" are dynamic and can change at times.But these spans might contain the text "target_value". In cypress test case how can I select the text "target_value" in

directly(not in its children) and check if it is rendering or not. I just want to get the main text value which is not inside any of its children element.
Nitish Singh
  • 215
  • 1
  • 2
  • 15
  • SO what I understood, is you want to select only the span which has the target_value ? – Alapan Das Aug 19 '21 at 04:44
  • So, I want to select the last "target_value" in my question excluding the two spans (which may have "target_value" as a text). which is text directly written inside of a element("target_value" inside

    tag in my question) but not inside any of its children(span in my question)

     – Nitish Singh Aug 19 '21 at 05:01

2 Answers2

1

You can do something like this. You extract everything and split the string and get the last value and assert or perform any actions.

cy.get('p.target').invoke('text').then((text) => {
  expect(text.split('\n')[3].trim()).to.equal('some value')
})
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • Thank you for answering, But I want to filter the "target_value" which is in "target" class and not inside any of its children span.(the last "target_value" text in my question) – Nitish Singh Aug 19 '21 at 04:56
  • Its checking in full text of the

    tag ("I am Span 1 of target_value 1 I am Span 2 of target_value 2 target_value") not just the direct outside text of

    tag (which is only "target_value")

     – Nitish Singh Aug 19 '21 at 05:17
  • Ok, let me try that locally. – Alapan Das Aug 19 '21 at 05:23
  • Basically the ".not('span')" is checking that the

    with target class name should not be a (which will be always true), Thank you

     – Nitish Singh Aug 19 '21 at 05:37
1

What you target is a text node. There are 3, but the first two are just spacing chars between spans.

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 */')

If the target text is always last within <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 */')

Excluding children with .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 */')

Clone and remove children

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 */')
user16695029
  • 3,365
  • 5
  • 21