CODEWITHSUNDEEP
domcypress
Viviana Hidalgo
Viviana Hidalgo

Reputation: 39

Validate Element that Doesn't Appear in DOM

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!

![Showing the User interface and DOM

 <td align="left" class="formCell" style="" id="isc_1S" $89="isc_TextAreaItem_1"><textarea name="cdFilter" id="isc_1T" $89="isc_TextAreaItem_1" $9a="$9b" class="textItem" style="resize:none;margin:0px;WIDTH:234px;HEIGHT:96px;" autocomplete="OFF" spellcheck="true" wrap="SOFT" tabindex="2305" oninput="isc_TextAreaItem_1.$43g()" readonly="TRUE" handlenativeevents="false"></textarea>
    </td>

Upvotes: 2

Views: 505

Answers (1)

Fody
Fody

Reputation: 32044

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 <td> 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))
  })

Upvotes: 3

Related Questions