Cypress: Cypress tells Input is disabled, but it isn't, while typing

[mszkudelski]

Current behavior:

I'd like to test login page on Ionic (v3) website. But when I invoke method .type there appears error:

CypressError: cy.type() failed because it targeted a disabled element.

Error does not occurs always. Test fails is about 20-25% runs. Analysing Cypress' source code I realized that it can behave that way because Input is not focused. I was looking at file: https://github.com/cypress-io/cypress/blob/70ef58bede981567732697c8b79fe7642ab164cf/packages/driver/src/cy/commands/actions/type.js from 407 line.

So I added method .focus before .type. But then I am given another error:

CypressError: Timed out retrying: expected '<input.text-input.text-input-md>' to have value 'asdasddd', but the value was 'adasddd'

which means that not every character was typed into input (propably every, but not second)

Desired behavior:

I assume that I have done everything right, and there is no problem with my website, so expected result would be not to got any error using method .type. Otherwise, please tell if I'm doing anything incorrect

Steps to reproduce: (app code and test code)

Here is reproduction project that test my application:

https://github.com/mszkudelski/cypress-bug-repro

You can use npm script or use my bash script.sh that runs spec 20 times and log result in log.txt file.

Versions

Cypress: 3.6.1,
operating system: MacOs 10.15.1
browser: Electron headless and Chrome

[jennifer-shehane]

Hey @mszkudelski, I eventually got this to fail on a run within Chrome in Cypress 3.6.1 during cypress open

I was not able to replicate this in 3.7.0 (but it's difficult since it's intermittent and I have to reun many times), can you confirm if you have seen this error in 3.7.0?

[Gerros]

I have the same problem with an input field in version 3.7.0 when running tests with cypress run, with cypress open it works

[mszkudelski]

Hi @jennifer-shehane, I'm sorry for mistake, but in reproduction project I use 3.7.0 version of Cypress. So bug appears in version 3.6.1 (in my real project) and 3.7.0 (in repro project).

[jure]

Looks similar to #5830, #5743 and maybe a few others. For what it's worth, we're also seeing this intermittently. Tiptoeing around it with click().wait().focus().wait() does not help, and the element is visible and not disabled.

[kevinpainchaud]

Hi,
I confirm that I have the same problem from 3.5.0 to 3.7.0.
It also appears randomly.
I hope a solution can be found.

[raphaelyancey]

Same with 3.8.1, seems to be random.

[Saharshdeep]

I was also getting the same issue and tried all the above possible workarounds. The solution that worked for me was using click with force: true option, before every type operation. I was using 3.8.0 version.

[kevinpainchaud]

After investigation, I think I have found the reason that causes this error.

When Cypress wishes to type into an input, it scrolls first to it.
However, in my case, the page header becomes sticky at scroll.
And it covers part of the input, which causes this error.

To be sure, I tried to delete this sticky header and then restart my tests.
Everything was ok, no more errors related to the input ...

[scridget]

Just tacking onto this if anybody experiences this from the cypress ui - I found that, for whatever reason, if I disable/enable the auto scrolling toggle, it will successfully run. I have to do this each time I re-run a test :/ but it's getting me through!

[petermartin2002]

@jennifer-shehane I am seeing this frustratingly frequently when working with long iframes.

Is there a potential targeted release for this defect?

Thanks in advance

[petermartin2002]

After investigation, I think I have found the reason that causes this error.

When Cypress wishes to type into an input, it scrolls first to it.
However, in my case, the page header becomes sticky at scroll.
And it covers part of the input, which causes this error.

To be sure, I tried to delete this sticky header and then restart my tests.
Everything was ok, no more errors related to the input ...

Can you please share the code you used to delete the header?

[kevinpainchaud]

It looks like this:

it("My page", () => {
  cy.on("window:load", () => Cypress.$("header").remove());

  // My tests...
});

[petermartin2002]

Thank you very much however this is not resolving the issue for me.

I shall await Cypress releasing a fix version for this issue

[brunodbo]

The workaround mentioned by @scridget in https://github.com/cypress-io/cypress/issues/5827#issuecomment-606377029 worked for me too.

[proIT324]

I have the same issue now. Cypress v4.5.0 is installed in my project and the same error with input typing test case occurs. I'm looking forward to the fixed version. 😄

[mjlucca]

I got it solved on Cypress V4.5.0 by adding a .focus() before typing.
Actually added focus().should('be.enabled').type('Something')

[MaximeCheramy]

I have the same issue with cypress 4.7.0. The focus().should('be.enabled') didn't work for me unfortunately. But the { force: true } seems to be working.

[nicolasraviolo]

{ force: true } worked for me, thanks!

[petermartin2002]

I have bypassed type and I am instead using invoke("text") with args to set the text of the text box as opposed to type. It is a workaround on text boxes that I find to be continually problematic

[samRC]

Encountered this same issue with Cypress 4.11.0.
The other workarounds didn't seem to work for me.
But adding a small wait cy.wait(500) before issuing the _type_ command, fixed it for me.

[sainthkh]

The cause of the problem is that the app is not fully loaded.

One of the workaround is to use cy.wait(500) like @samRC mentioned.

[siphiwe]

Just experienced this in 5.1.0 :( Working around it with .focus().type()

UPDATE: It still happens intermittently :(

[jyotsana-khaparde]

Hey, i was having same issue for me this worked ->
cy.xpath("").click({ force: true})
cy.xpath("").type("");

[Nxtra]

If this is a Cypress issue, I think it's quite bothersome. The issue stays alive over multiple cypress versions already.
What is the definite solution that works for version 5.3.0? I try all of the above and they still fail from time to time.

[Arturace]

I encouter this issue frequently in inputs inside of an open shadow dom. focus() does not solve the issue, but focing it does.

[DharaniY]

I am using the 5.4.0 version, I had the same issue when I tried to emulate the device iPhone x etc, the workaround mentioned by @Saharshdeep is worked for me.
ex:
cy.get("#sku-search-txt").click({ force: true });
cy.get("#sku-search-txt").clear({ force: true });

[aamiriqubal]

I made a work around for this problem, this problem mostly seems to happen when you try to type into an input box right after typing in some other input box

cy.get("firstInputSelector").type("My First Input text");
cy.get("someHeaderSelector").clear({ force: true }); // A force click somewhere outside the form
cy.wait(200);
cy.get("secondInputSelector").type("My Second Input text");

This solution works smoothly for me and the tests don't break intermittently.

[1ratnesh1]

I was facing this exact issue. What I did is here -

cy.get('input[name="password"]').click()
cy.get('input[name="password"]').type(password)

This works totally fine.