Validate Element that Doesn't Appear in DOM

Question

I want to test that the text "Name contains Referencia", that I show in the image, appears in a textarea; this text appears as a result of doing a filter action over a data area. However in the DOM this text is not shown. Could anybody explain why it isn’t shown? and how can I get that specific text if I don't have a locator?

I've tried this:

cy.get('textarea[name="cdFilter"]')
 .click()
 .then(()=>{
 cy.contains('(Name contains Referencia)').should('exist')
})

but it doesn't work. I've tried also getting the text attribute from the textarea element but it doesn't make sense since the textarea doesn't have a text attribute.

I appreciate your help and comments.

Thanks in advance!

user_16997707 · Answer

It could be in shadow DOM, in which case add includeShadowDom: true to your cypress.json config file and the test might succeed.

The text is definitely not in the textarea element, but it could be another element positioning itself over the text area.

Couple of other things to try

Shorter text search in case the spaces are nbsp
```
cy.contains('Referencia')
```

Grab the textarea by id and look at it's text

cy.get('textarea#isc_1D').its('text')
  .should('contain', 'Referencia')
  //or
  .then(text => console.log(text))

There may also be two of these textareas - if you look at style details, they don't quite fit, e.g style attribute width and height don't quite match the numbers in the tooltip, and a small margin is showing even though margin:0px is set (but may be that's due to settings).

Checking how many textareas:
```
cy.get('textarea[name="cdFilter"]').click()
  .then(() => {
    // test count after clicking
    cy.get('textarea[name="cdFilter"]').then($ta => console.log($ta.length))
  })
```

Validate Element that Doesn't Appear in DOM

1 Answers