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 #5827 (comment) worked for me too.

[tronxdev]

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("<YOUR_XPATH>").click({ force: true})
cy.xpath("<YOUR_XPATH>").type("<YOUR_TEXT>");

[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 forcing 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.

[Reshma155]

Email TextBox is hidden, also its parent is hidden than it worked for me.

cy.get(":nth-child(2) > :nth-child(1) > :nth-child(1) > .cognito-asf > :nth-child(3) > #signInFormUsername").should('be.visible').click({force:true});
        cy.get(":nth-child(2) > :nth-child(1) > :nth-child(1) > .cognito-asf > :nth-child(3) > #signInFormUsername").type(this.data.Email);

[jennifer-shehane]

There has been one reproducible example given in this issue: https://github.com/mszkudelski/cypress-bug-repro. That issue is due to the timing when loading the page. When the input is attempted to be typed into - the element is disabled. If you throw a debugger right were we check the disabled attribute - you can see the element is not finished rendering to the page.

This is not an issue with Cypress that we can solve on our side. Cypress has no way of knowing whether the page is fully loaded - intended for a user to type or not.

If you have an issue that you think falls outside of this example, please provide a reproducible example so that we can evaluate and see whether there is a bug with Cypress falsely attributing an input as disabled at the time of the action.

At the moment, this will be closed as 'wontfix' from the example provided.

it('test ', function () {
    cy.visit('https://app.bas24.pl/');
    cy.location('href').should('contain', 'app.bas24.pl');
    cy.get('input[name="username"]')
    .type('a').should('have.value', 'a')
});

Recommendation

So, some ways to test this are to:

• Ensure that the element is not disabled at the time you intend to type into the field by asserting that it is not disabled.

cy.get('input[name="username"]')
  .should('not.be.disabled')
  .type('asdasddd')

• Force type into the element (not recommended over the approach above)

cy.get('input[name="username"]')
  .should('not.be.disabled')
  .type('asdasddd', { force: true })

• Add some other assertion that would ensure page is loaded before continuing.

[phpworker]

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!

worked for me! Thanks!

[snake-py]

@jennifer-shehane Is this something where I can submit a bug repo?

[ashblox]

Seeing this also:

[ABDERRAHMANE-OUALI]

I Solved the issue with adding {force: true} in type()

cy.get('[aria-label="emailInput"]').type([email protected], {force: true})

[TestIsTest001]

This issue is still present in 13.7.3..The element is clearly not disabled but when typing on it it says the element is disabled.

[gnsoria]

I am also running into this in Cypress 13.9.0. Tl;dr: The solution for me was to add waits before the type call, since my React app was still re-rendering and Cypress wasn't waiting for it.

Ironically, I tried calling should("not.be.disabled") first, which passes, but when I get to type() I get this failure:

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

The element typed into was:

> <input name="runtime" data-value="" test-id="runtime" min="0" step="1" inputmode="decimal" type="number" id="runtime" class="form-control" value="">

Ensure the element does not have an attribute named disabled before typing into it.[Learn more](https://on.cypress.io/type)

This error is even more frustrating because Cypress is showing me that the element does not have the disabled attr but failing because it says it does.

In my case, it appears to be because my React app is re-rendering and Cypress gets lost in the mix somewhere. At no point during my render is that input disabled, but if I include hard waits to ensure that the page is done rendering, it passes. Given Cypress's emphasis on not needing to explicitly wait for things, this is not what I expected to have to do.