How to get the text input field value to a const and log that value in Cypress.io

Solution 1:

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));

Solution 2:

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)

Solution 3:

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

You should be able to do:

cy
  .get('input[name="email"]')
  .invoke('text')  // for input or textarea, .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>

Solution 4:

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