Provide a "Cypress" way to access textContent (and/or innerText) - .text() command

[verheyenkoen]

Desired behavior:

Add a .text() method similar to jQuery's text method to access textContent and/or innerText.

I guess for convenience, by default cy.text() should just return whatever $(...).text() returns.

It may also be good to provide a way to get the innerText of an HTMLElement as it returns a rendered text representation (removing sub-tags and whitespace that may be part of the node, but not visible once rendered). Perhaps a flag in the .text() method or via .its('innerText') or something.

[brian-mann]

Agreed. This is now on our radar.

I think the biggest issue here is that innerText is not necessarily normalized across all browsers. The question will be whether or not we just apply our own normalization (stripping whitespace, removing tags, etc) to the command as opposed to using the browser defaults.

[verheyenkoen]

I guess if you'd implement your own normalization, you can't call the feature innerText in any way or it would be confusing. If the feature would be named inner Text, you'd have to use the (current) browser implementation I guess.

[brknlpr]

any progress on this ?

[brian-mann]

@brknlpr you can just use jquery methods to access text content of elements - its our top FAQ question.

cy.get('element').invoke('text')

[brknlpr]

thanks a lot!

[alexch]

in the meantime, can you please add this to https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html , and/or link to the FAQ entry from there?

[eduardogalbiati]

Thanx @brknlpr saved my life! 👍

[maccurt]

Not sure how this would work. Can some one provide an example. I don't like using 'contain' and would love to use the inner text if possible. How would this work?? cy.get('element').invoke('text')

[maccurt]

Ok, I figured it out I found the link https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element%E2%80%99s-text-contents

[maccurt]

Ok, it was bothering me to use contains because I wanted more of a valid check that would not possibly give me a false positive. For example if my text is 66.67% and use contains 6.67% my test will pass. I can see where that might be a problem where there is a row with 6.67% and I validate the wrong row and my test still passes, i realize the probability of that is slight, but still possible. I then started using 'have.text', and my test were failing because my cell elements has empty spaces in it. I fixed it by re-moving spaces in the table cell, but the cell was formatted that way by a developer and they could easily go in put the formatting back and break the test. I don't want my test to be that brittle. I then used this to prevent that problem,

        cy.get('#id-1').find('.budget-item-percent').invoke('text').then((text => {
            expect(text.trim()).to.eq('66.67%')
        }));

Is there any easier way to do this. Notice I am trimming the spaces so the if someone re-formats the it does not break my code (or so I hope)

[sahithya]

I'm using the cy.get('element).invoke('text') to get the text of an h2 element in a test. The text of the element is Event 4 Spans Several Days instead the Cypress invoke call yields Event 4 spans several days making the text lower case and leading to some false positive assertions. Does anyone know why this would be?

[verheyenkoen]

Sounds like a (unrelated) bug. Maybe Cypress is trying to lowercase HTML tags (span in this case) where it shoudn't? I'd open a separate issue for this.