get text from an element and store in a variable in cypress

Question

I am trying to get text from an element (input tag) and store it in a variable.

The following statement is used to set data in the text field.

cy.get('app-screen').find('input[id="studentName"]').type("Viola");

I tried to get the value with the following statements:

cy.get('app-screen').find('input[id="studentName"]').then(($text1) => { let textValue1 = $text1.text()); cy.log('Student Name: ' + textValue1 ); }); cy.get('app-screen).find('input[id="studentName"]').invoke('text').then(text2 => { let textValue2 = text2; cy.log('Student Name: ' + textValue2 ); });

In both queries the output was empty, logging the following:

Student Name:

Alapan Das · Accepted Answer · 2022-01-17 15:11:11Z

9

Assuming after the type command the typed value gets saved in the value attribute. Also, you can use alias to save the inner Text something like:

cy.get('app-screen').find('input[id="studentName"]').invoke('val').as('name') cy.get('@name').then((name) => { cy.log('Student Name: ' + name) //prints name })

answered Jan 17, 2022 at 15:11

Alapan Das

18.3k5 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rino Over a year ago

Hi, thanks it works. In case, if this code is written inside a function and I have to return the student name to the function call then how to use return keyword here?

Alapan Das Over a year ago

Hi @saran since this is a different question, I would suggest you to open a new thread for this,

testaway Over a year ago

I was having problems getting the element value with text(). This method has helped me, as well. thank you!

LubosD Over a year ago

The problem with the code in this answer is in TypeScript definitions. Current Cypress type defs say that the "name" variable is a JQuery element (and not e.g. a string). Ugly casting must be done to make the error go away.

Spikatrix Over a year ago

@LubosD Use cy.get<string>('@name') for getting it as a string type

jjhelguero · Accepted Answer · 2022-01-18 18:55:06Z

You'll have to see check how the element stores the text you are viewing in the UI. NOTE: .invoke('text') used the jquery method .text() which grab the textContent of the element. To get the innerText then you'll have to use a callback function.

If you are looking to log out the text value, then you can do one of the following:

cy.get('app-screen') .find('input[id="studentName"]') .invoke('val') .then(cy.log) // this will log out the text cy.get('app-screen') .find('input[id="studentName"]') .then($el => { cy.log($el[0].innerText }) // this will log out the innerText

score 2 · Accepted Answer · 2024-06-13 02:51:51Z

Generally the best, most reliable way to test this is with a .should() assertion.

cy.get('input[id="studentName"]').type('Viola'); cy.get('input[id="studentName"]').should('have.value', 'Viola')

Inside a function, you would return the result in a Promise.

function getValue(selector) { return new Promise(resolve => { cy.get(selector) .then($input => resolve($input.val())) } getValue('input[id="studentName"]') .then(value => { cy.wrap(value).should('eq', 'Viola') })

But Cypress provides Custom Commands to make functions more fluid (you don't need a Promise)

Cypress.Commands.add('getValue', (selector) => { cy.get(selector) .then($input => $input.val()) }) cy.getValue('input[id="studentName"]') .should('eq', 'Viola')

Collectives™ on Stack Overflow

get text from an element and store in a variable in cypress

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related