cy.type() submits the form when using the argument yielded from cy.invoke()

[HumptyHans]

Current behavior

Situation

There are two separate pages. We need to get value from one page, then input it on the second page.
The second page has a form with text input field.

The test

Test steps:

1. Visit first page
2. Find the needed element
3. Get its' value by using cy.invoke('text')
4. Save it with an alias using cy.as('alias')
5. Visit second page
6. Get the saved value from an alias using cy.get('@alias').then((savedValue) => {})
7. Find the needed input field and type saved value using cy.type(savedValue.toString())

Problem

Right after the type command finishes execution, the form gets submitted. The request does not contain the value from the input field.

Desired behavior

The text should be typed without any other events happening right afterward.

In the same test case, if the cy.type() argument is replaced with a regular string, the function works as expected.
Other functions like cy.log() work as expected with the variable from an alias.

Test code to reproduce

cy.visit('<first_page>');
cy.get('<needed_element>').invoke('text').as('savedAlias');
cy.get('@savedAlias').then((savedValue) => { 
    cy.visit('<second_page>');
    cy.get('<input_element>').type(savedValue.toString()) 
})

Cypress Version

12.16

Node version

18.15.0

Operating System

macOS 13.4.1

Debug Logs

No response

Other

The problem was present in versions of Cypress from 12.8.1 to 12.16.

[HumptyHans]

A bit of clarification that may be helpful

The page has a table with objects and a filtering row. Filters are input fields inside a form. The form can be submitted by clicking on the “search” button or pressing enter inside the filtering field. After the form submission, the page is reloaded.

The behavior I noticed is that after I use cy.type() with the argument that was earlier acquired by cy.invoke() or cy.get(“-“).then((el) => el.text()), there is a form submission request with no filter values that consequently reloads the page.

Tried slowing typing down with the option "delay". It did not help, although one thing I noticed is that the request to submit the form is sent right after the cy.type started, not finished as it has previously seemed.

The strangest part is that the form is not automatically submitting itself whenever some value is typed into its fields. The form can be submitted only by clicking on the dedicated button or by pressing enter inside the input.

[nagash77]

@HumptyHans can you include a full test that demonstrates the problem including the cy.visit() call?

[HumptyHans]

@nagash77 Hello!
The provided code is a test sample which was shortened. In the real test case, navigation is done by using menu elements. Sorry, if using cy.visit in the example was confusing.

Not sure what exactly, but using the invoked value triggers something on the page, that results in the form reloading. I was not able to reproduce it on simple html example page, thus if our case is unique, we will find an alternative way to write our test case.

Regarding getting and saving the value, I have tried multiple combinations, including:

// The provided case using alias
cy.get('<needed_element>').invoke('text').as('savedAlias');
cy.get('@savedAlias').then((savedValue) => { 
    ...
})

// Chaining of then without alias
cy.get('<needed_element>').invoke('text').then((savedValue) => { 
    ...
})

// Using JQuery text function
cy.get('<needed_element>').then((el) => {
   const val = el.text();
   ...
}

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.