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.

[alcfeoh]

You can also create your own command if you think invoke('text') is too verbose:

Cypress.Commands.add("text", { prevSubject: true}, (subject, options) => {
  return subject.text();
});

and then use it like this:

cy.get('._19odbsb1')**.text()**.then(value => results.yearlyTotal = value);

[kuceb]

@sahithya most likely you have text-transform:capitalize on that element. So the text content in the dom is lowercase, but you think it's capitalized

[jennifer-shehane]

There is a plugin that offers a .text() command here: https://github.com/Lakitna/cypress-commands

More about the command can be found here https://github.com/Lakitna/cypress-commands/blob/develop/docs/text.md

[dialex]

When I use the plugin's .text() or when I use Cypress' .invoke("text") I get a Object (chainerId, firstCall)... which means when I try to parse into a number, JS rightfully complains that's NaN.

I just want to get a number string from a page and assert that it's greater than zero.

// I would like to use this syntax, but it fails because it compares a string with a number
❌ cy.get(someSelectorHere).text().should("be.greaterThan", 0)

// This also fails because it returns a Chainable object, which to JavaScript is not a number (NaN)
❌ expect(cy.get(someSelectorHere).invoke("text")).to.be.greaterThan(0)

// This hack works for this case, but it won't work for number ranges
✅ cy.get(someSelectorHere).text().should("not.be", 0)

How can I do it properly?

[Lakitna]

You can always do something like this

cy.get(someSelector)
  .text()
  .then((str) => Number(str))
  .should("be.above", 2);

Do you think that .text() should cast to a number when doing that results in no information being lost? For example: Do not cast "01" to 1, but do cast "1" to 1.

If I add that an option will be required to turn this behaviour on/off. When the default is on then a major version release will be necessary.

[dialex]

oh, hi there @Lakitna ! I wasn't expecting the lib author to appear 😄🙇‍♂️

I like your code example, it just adds a then and a simple conversion. I'll use it!

Hmm, I don't think .text() should do the cast "sometimes" based on loss of information, because then I need to learn its implementation details to use it.

I would prefer a .text() that returns a string, instead of a Chainable. But that would break compatibility. So I suggest you create a .textValue() that always returns a string. And then I can cast it as I desire, or use it directly in an expect(... .textValue()).to.be...` Do you think that's reasonable?

[Lakitna]

😄

Cypress commands by definition always return a Chainer, so making it return a string/array is impossible. In all other situations the jQuery .text() will probably suffice:

cy.get(singleElementSelector)
  .then((element) => {
    expect(element.text()).to.equal('foo');
  });

[dialex]

Impossible? Fine... 😢
Then how about a .number() that always does the casting that you mentioned? 😎

[alexch]

It's impossible because of how Cypress works. The code you write isn't executed immediately. Instead it sets up a script to be executed later. See my lecture slides here for more info : https://codelikethis.com/lessons/javascript/cypress#anchor/nothing_happens_immediately Because of this delayed execution, the only way to get fine grained access to the actual values in the page -- to then do comparisons or conversions -- is through a callback (like with ".then"). Hope this helps! - A

On Mon, Jun 24, 2019 at 11:11 AM Diogo Nunes ***@***.***> wrote: Impossible? Fine... Then how about a .number() that *always* does the casting that you mentioned? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#630?email_source=notifications&email_token=AAACCTF3JTVXL7JXYVKZST3P4DP3NA5CNFSM4D2NG2EKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYNIBNA#issuecomment-505053364>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAACCTAAT6745BHUOTQSAWDP4DP3NANCNFSM4D2NG2EA> .

-- Alex Chaffee - alexch@gmail.com http://burlingtoncodeacademy.com http://alexchaffee.com http://codelikethis.com http://twitter.com/alexch

[rhamasv]

I am trying to get the text of a group of elements and populate them into a map so that I can access the values in the following page to do some validation.However the map object gives undefined once out of the invoke().then() functionality.
The "cy.get(...).text()" returns "TypeError: cy.get(...).text is not a function"

[Lakitna]

@rhamasv Note that .text() is not a default command. Instead, it's part of cypress-commands which is not affiliated with Cypress itself. Did you follow the installation instructions of cypress-commands here https://github.com/lakitna/cypress-commands#installation ?

If you have, please create an issue in the cypress-commands repository.

[rhamasv]

@Lakitna Thanks for your response.I forgot to mention .text() function already works for some elements in our existing framework (still trying to found out if cypress-commands is already plugged in our framework) and throws the error I mentioned above for elements with a (hyperlink) tags.

[softwareCobbler]

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

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

Is this retried until some timeout, or is the retry loop limited to only waiting on get to succeed? e.g., assert on some innerText value that is waiting to populate with a server response

[verheyenkoen]

@brknlpr I guess there's no retry mechanism there as the jQuery .text() method will always return a value. If you want that behavior you can probably use the have.text chai assertion with .should() like so, which should retry with a default 5000ms timeout:

cy.get('element').should('have.text', 'lorem ipsum');

[tchu10]

I'm still kinda new to the syntax, but how do I return an element from an array of elements with a text match?

[verheyenkoen]

@tchu10 Kinda getting off-topic here (direct these kinds of questions to the Gitter chat) but for that you probably need the cy.contains(...) method. Bear in mind that Cypress commands never return actual elements but yield the result to the next command in the chain. So if you chain a .should(...) method to that for asserting the element that would work.

[markrason]

Bear in mind that Cypress commands never return actual elements but yield the result to the next command in the chain. So if you chain a .should(...) method to that for asserting the element that would work.

I know this is not the best place to ask questions, but how to verify if text (on button or label) has changed or was updated? We don't know in test what the target value should be - and thus using cy.contains() makes no sense.

[Lakitna]

@markrason These are the kinds of questions you can best ask in Gitter https://gitter.im/cypress-io/cypress

[bahmutov]

@markrason also you can use our documentation search to find the answer in https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-get-an-element%E2%80%99s-text-contents

[mc185104]

Try this one. https://stackoverflow.com/questions/62072822/cypress-assertion-equal-and-greater-than

[Doctor-Strange]

Here is my solution

cy.window().then((win) => {
      console.log( win.document.querySelector(".calss").textContent );  // the result is the context of the element
    });

[vjvibhanshu]

Guys, I believe the question was much simpler, how do we retrieve a value from the screen (or from an object) and store it within a variable (string/number/whatever), for e.g.: let userResponse: string;

let userResponse: string;
cy
        .get('*[class*=response][class*=user]')
        .then(($currentUserRequest) => {
        userResponse = $currentUserRequest.text();
        console.log('userResponse: ' + userResponse);   //THIS WORKS
});

//THIS DOES NOT WORK - BUT WE WANT TO WORK - so I can use it later, outside of the .then clause
console.log('userResponse: ' + userResponse);  //Variable 'userResponse' is used before being assigned.

I am also looking for this workaround
if anyone found it then please let me know

[verheyenkoen]

@vjvibhanshu That will never work. The cy.get(...).then(...)-chain is executed in a deferred manner. Think of it as recorded instructions to execute later. After that is recorded (but not executed), the console.log(...) will be executed before whatever is in the chain. So userResponse would always be undefined at that point. That's just how Cypress works and will never change.

[vjvibhanshu]

You can also create your own command if you think invoke('text') is too verbose:

Cypress.Commands.add("text", { prevSubject: true}, (subject, options) => {
  return subject.text();
});

and then use it like this:

cy.get('._19odbsb1')**.text()**.then(value => results.yearlyTotal = value);

it is giving the output like this:
log: Object{5}

[vjvibhanshu]

@vjvibhanshu That will never work. The cy.get(...).then(...)-chain is executed in a deferred manner. Think of it as recorded instructions to execute later. After that is recorded (but not executed), the console.log(...) will be executed before whatever is in the chain. So userResponse would always be undefined at that point. That's just how Cypress works and will never change.

@verheyenkoen thanks for the insight
The reason I am searching for the work around is that, I have to compare the output(let say content) from the API as well as from UI so can you suggest to achieve the same.

[verheyenkoen]

@vjvibhanshu This isn't really the place for support (look here) but you could probably do something like this:

cy.request('{API url}').then(response => {
  cy.get('{selector}')
    .invoke('text') // this invokes the text method, so the equivalent of $(el).text()
    .should('eq', response.body.path.to.property) // JSON response body is automatically deserialized to an object
})

[vjvibhanshu]

@verheyenkoen Thanks for the code snip, However it is little messy I want to keep UI and API part separate
Also thanks for the support portal I will look into this

[bokukpark]

This is my solution.

    cy.get('#myroom_contents > div:nth-child(5) > table:nth-child(5) > tbody > tr > td.prod_cell').then(elem => {
      console.log(elem.text().trim())
    })

[whudson]

I'm a little confused about this one, if .its() is supposed to get us the property from an object, why doesn't .its('innerText') already work out of the box? I was able to work around with .invoke('prop', 'innerText').

[AlexSdet]

This is ridiculous that I can't store text/value outside of chain.
Please make this possible:
var text = cy.get('element').text()
So I can use my text later on everywhere I want.

Also per Cypress documentation, here is one way that works:

beforeEach(() => {
  cy.get('button').invoke('text').as('text')
})
it('has access to text', function () {
  this.text // is now available
})

BUT if using alias outside of beforeEach it return "undefined" again:

it('has access to text', function () {
  cy.get('button').invoke('text').as('text')
  this.text // is NOT available
})

Why make it so complicated, whats the reason behind all this ?

[pavelloz]

It has bitten me as well. Such commonly used operation feels like it should be bulletproof and very easy to use.

[Imravirathore]

In Cypress, you can access the textContent or innerText of an element using the .invoke('text') or .invoke('prop', 'innerText') commands.
cy.get('selector').invoke('text').then((text) => {
cy.log(text);
// You can also perform assertions on the text
expect(text).to.equal('expected text');
});

Know more : https://ravirathore.com/