How to get the value from an input field into a const and log it

Question

How to get the text input field value to a 'const' variable in Cypress, so that I can log that variable using cy.log(). The below code doesn't log anything, can someone familiar with Cypress.io please advise

cy.get('input[name="email"]').then(($text)=>{
        const txt = $text.text()
        cy.log(txt)

    })

score 112 · Accepted Answer · edited Apr 23 '23 at 21:54

112

Using invoke('val') instead of invoke('text') worked for my case.

Reminder of the html tag

<input type="text" class="form-control" name="email">

Cypress code

cy.get('input[name="email"]')
  .invoke('val')
  .then(sometext => cy.log(sometext));

edited Apr 23 '23 at 21:54

Moustapha

143
6

answered Aug 25 '18 at 21:49

soccerway

10,371
19
67
132

2

.invoke('val') is magic! i was trying for hours to get the v-text-field value. thanks!! – krankuba Feb 04 '21 at 13:40

score 52 · Answer 2 · edited Apr 23 '23 at 22:13

52

Cypress official solution How do I get an input’s value? suggests something like this code below:

cy.get('input[name="email"]').should('have.value', val)

edited Apr 23 '23 at 22:13

Moustapha

143
6

answered Jan 26 '21 at 12:47

Gerard_dev

703
5
7

3

Not quite what was asked, but useful for other cases – Haroldo_OK Jun 24 '21 at 12:46
after using .type() this sometimes (only happens in CI) has a wrong value for some reason, most of the time only with 1 MISSING LETTER. any ideas? – trainoasis Dec 08 '22 at 13:56
@trainoasis try adjusting the typing speed – chris Jan 18 '23 at 12:27

score 23 · Answer 3 · edited Apr 23 '23 at 22:13

23

From https://github.com/cypress-io/cypress/issues/630

You should be able to do:

cy
  .get('input[name="email"]')
  .invoke('val') 
  .then(text => {
    const someText = text;
    cy.log(someText);
  });

This is working for me in a test on the following element:

<span class="abProgress" style="width: 0%;">100%</span>

edited Apr 23 '23 at 22:13

Moustapha

143
6

answered Aug 10 '18 at 20:35

Brendan

4,327
1
23
33

I have tried that, now it's throwing an error 'cypress_runner.js:141304 TypeError: $el.invoke is not a function at Context.' – soccerway Aug 10 '18 at 20:53
Sorry, I went off memory and was incorrect. I updated the answer with some code directly from a working test of mine (but put your selector in place). I found this to be a bit finicky when I was figuring it out and some types of element did not work with this, so hopefully it works for you. – Brendan Aug 10 '18 at 21:17
No luck yet, I have tried as below, but log is not logging the value entered in text field 'cy.get('input[name="email"]').invoke('text').then(text=>{ const sometext = text; cy.log(sometext); })' – soccerway Aug 10 '18 at 22:50
3

@ Brendan, Figured out at last, instead of invoke('text'), used invoke('val'). Now Cypress is logging the variable value... 'cy .get('input[name="email"]').invoke('val').then(val => { const sometext = val; cy.log(sometext); })' – soccerway Aug 13 '18 at 09:12
@soccerway good to hear, what did the element look like that that worked with? – Brendan Aug 13 '18 at 14:58
– soccerway Aug 13 '18 at 19:39

score 1 · Answer 4 · answered Apr 04 '21 at 12:10

1

If you'd like to massage or work with the text prior to an assertion:

cy.get('input').should(($input) => {
  const val = $input.val()
})

using-cypress-faq

answered Apr 04 '21 at 12:10

Muhammed Moussa

4,589
33
27

score -2 · Answer 5 · answered Mar 10 '20 at 10:35

-2

.contains('your-value') worked for me

answered Mar 10 '20 at 10:35

Yuqiu G.

348
4
7

1

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – Yunnosch Mar 10 '20 at 11:02

How to get the value from an input field into a const and log it

5 Answers5

Linked