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

[ColinOakland]

Current behavior:

Cypress is failing a test because it claims that an element is disabled. However, there is nothing to indicate that this element is actually disabled. Moreover, Firefox's DOM inspector specifically says that this element is not disabled.

Desired behavior:

Cypress should not say that the element is disabled, and should focus it.

Steps to reproduce: (app code and test code)

The snippet of what is failing is included in the screenshots

Versions

Cypress: 3.6.0
MacOS: Mojave 10.14.1
Chrome: 75.0.3770.80 (Official Build) (64-bit)

[jennifer-shehane]

Unfortunately we will have to close this issue if there is not enough information to reproduce the problem. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example - the html and test code to reproduce this exactly on our machines.

We have a lot of tests around typing, so there is likely some specific edge case in your example that we are not covering, so we need this to continue.

Also - please make sure to update to our latest version 3.7.0, as we have fixed several type issues in the last few releases.

[AndyTian-Devops]

Still hit this problem on Cyress 3.8.0
Looks like this is an unstable issue. since it doesn't happen every time
�
Here is the test code and screenshot.

describe('The Ctrip Home Page', function(){
    it('Ctrip Home Page', function(){

        // Returning false here prevents Cypress from failing the test
        Cypress.on('uncaught:exception', (err, runnable) => {

            return false
        })

        // Change URL to match your dev URL
        cy.visit('/')

        // Choose 机票->国际·港澳台机票->往返
        cy.get('#searchBox').children().contains('机票').click()

        cy.get('#flightSwitch').children().contains('国际•港澳台机票').click()

        cy.get('#fl_search_type').contains('往返').click()

        // Set homecity to Xi'an and destination is Seattle
        cy.get('#fl_txtDCity').type('sia').should('have.value','西安(SIA)')

        cy.get('#fl_txtDDatePeriod1').type('2019-12-26').should('have.value','2019-12-26')
        cy.wait(1000)

        // Set depart and return date
        cy.get('#fl_dest_city_1').type('sea').should('have.value','sea')

[jennifer-shehane]

@v-atian We cannot run this code on our machine since you did not provide an application to visit.

As stated before, we will be closing this issue as there is not enough information to reproduce the problem. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example and we will reopen the issue. 🙏

[sarah-schmidt]

This disabled error happens consistently when the cypress test tries to enter information into an input field after directly unfocusing from an input field that triggers an event once the focus moves on to another field.

Workaround is to add a .blur() after you modify the field that triggers an event OR add a {force: true} when you type into the field that is mistakenly disabled.

Ex - if the input field that triggers the event is called zip and the next field the test goes to is city then the error is triggered when you hit cy.get('[name=city]').type:

cy.get('[name=zip]').type('93101')
cy.get('[name=city]').type('Santa Barbara')

but then fixed when you have:

cy.get('[name=zip]').type('93101').blur()
cy.get('[name=city]').type('Santa Barbara')

or:

cy.get('[name=zip]').type('93101')
cy.get('[name=city]').type('Santa Barbara', {force: true})

Additional note: the event that is triggered in my case is when zip is entered, a GET request happens and the response returns the state, ie CA in this case.

[jennifer-shehane]

@Sarah-clariondoor An html + test code example would be great in this case. I'm glad to hear there is a workaround.

You can also click in the Command Log on the TYPE command afterwards with DevTools open. Here you will see Mouse Events and Keyboard Events - click these to expand the tables, this shows all the events Cypress is triggering and may be helpful in understanding whats happening.

[sargsyan]

Seeing this issue with version 4.5.0. The workaround that worked for me is to use the force option

type('your text', { force: true })

[ypresto]

It seems disabled error message is shown because the element is not focused after click but not the element is actually disabled.

cypress/packages/driver/src/cy/commands/actions/type.js

Line 421 in eee7488

if (!options.force && activeElement === null) {

It is better to have more clear message on that situation.
(Removing force: true from click() call inside type() might solve that.)

In my case, my app (React + Redux + Next.js) triggers rerender onBlur() (by dispatch() then useSelector() of react-redux). In test code, when I added click() before type() (.click().type('...')), below error is shown.

cy.type() failed because this element is detached from the DOM.

I found that our app unexpectedly recreating component (creating new React component function in every render, e.g. <>{() => <div />}</>) in the test target component. My test passes without workaround after fixing it 🎉.
(Investigated using Timing section of Performance tab in Chrome dev tools)

Workaround is to add a .blur()

Maybe similar case to us..?

[rogoit]

{force: true} works for me thx

[HappyMan0001]

newStoryPage.getWrittenItalicText().click('right').type('{selectall}', {force:true})
So, yeah {force:true} worked for me too!
Thanks @sargsyan

[snake-py]

Seems still to be an issue. The workaround is not working for me. I am facing this issue only when I am trying it in my build version, then I am using a shadow dom. It seems that the event then is somehow different.

[mathmarqq]

I had this problem and this worked for me:

cy.get("element").should("not.be.disabled");
cy.get("element").type("something")

[jannnik]

Same here: no workaround is working in our tests...

[pmweeks98]

On Cypress 7.7
This is causing flake in our tests and its a bit of a pain
Get this error even when checking disabled status before hand

cy.get(an_element).should('not.be.disabled');
cy.get(an_element).should('be.visible').type('Some text');

This only happens occasionally, using Cypress._.times(30, () => to run the test multiple times it only happened once in the 30 runs. Dont want to use force because had a bug where this text area was actually disabled.

Any other workarounds available?

No keyboard events in type command either

[jpierson-at-riis]

I'm seeing something similar after upgrading from 7.7.0 to 8.5.0. I've even added an assertion as shown below in the hopes to tease out the issue but the assertion passes and then the next line complains with the error mentioned in the original post.

cy.get("[name=zip]").should("not.be.disabled").type(zip);

In my case I was able to get these cases working instead by forcing focus.

cy.get("[name=zip]").focus().should("not.be.disabled").type(zip).focus().blur();

Also BTW, this post on a separate issue seems to be highlighting the experience I've repeated and demonstrated above as well.

Based on what I'm seeing right now I'll be sticking back onto 7.7.0 until this gets resolved or until I have time to help dig further into the root cause or help to arrive at a solution.

[Chrisx0385]

Hi, we're testing a form in a custom element. Now we moved it into the shadow dom.
Since that, we also have this issue.
We changed nothing beside that we detect the inputs in .shadow() of the custom element, like mentioned in the docs (https://docs.cypress.io/api/commands/shadow#Usage)

Before that, the tests were stable.

[Chrisx0385]

Hi,
I've created a minimal demo where the error occurs when testing shadow dom components:

https://gitlab.com/cgz/cypress-type-bug-demo

[emmanuelonah]

I'm seeing something similar after upgrading from 7.7.0 to 8.5.0. I've even added an assertion as shown below in the hopes to tease out the issue but the assertion passes and then the next line complains about the error mentioned in the original post.

cy.get("[name=zip]").should("not.be.disabled").type(zip);

In my case I was able to get these cases working instead by forcing focus.

cy.get("[name=zip]").focus().should("not.be.disabled").type(zip).focus().blur();

Also BTW, this post on a separate issue seems to be highlighting the experience I've repeated and demonstrated above as well.

Based on what I'm seeing right now I'll be sticking back onto 7.7.0 until this gets resolved or until I have time to help dig further into the root cause or help to arrive at a solution.

Me too after upgrading to 9.3.1, it started happening.

Meanwhile, @jennifer-shehane mentioned here that the reason for such behaviors is because the cypress tries to perform an action on a DOM Node before the actual node/element-node is mounted/rendered into the DOM. But then my fear is; that if we decide to do a synchronous cy.wait, that will be very unstable since we don't know the time frame.

My other solution was to chain the then method to the element before performing an action on it, the reason for thinking that way is that; it will only perform the action when the element is resolved since cypress says every query is promisified. But then this still doesn't work. Right now I don't know what to do.

cy.get(selectorHere).then(node=>{
//now use it safely, but unfortunately this still doesn't work
})

[ghost]

This happens a lot with the Shadow DOM where this input element is not directly focussed; It's light DOM parent component tag is.

This issue still occurs in web components using the Shadow DOM.

[jamesarosen]

I find this happens very reliably on Remix.run apps where there is a React Context (e.g. remix-i18next) outside the <html> tag. My current hypothesis is that something asynchronous (e.g. a fetch) updates the context, causing a full-DOM rerender in the middle of a Cypress chain, and Cypress will fail its next .type or .click action.

[steps0x29a]

I can confirm that this is happening when trying to type into a web component that uses an input inside the Shadow DOM.

Update. I was looking into this some more. No matter what I try, I can't make Cypress type into the web component at all. I also can't focus it or type in it manually when I'm inside Cypress' preview (Edge). The component itself works fine in Edge by itself.

I tried several approaches (both directly on the element and on shadow()), but the most interesting seems to be along the lines of:

cy.get('#testing').should('not.be.disabled');
cy.get('#testing').type('12383');

This also fails with Cypress complaining that the element is disabled, while the first line works just fine. I tested a regular input field and it works as expected. So the issue seems to be with the combination of the custom element and Cypress.

I am using Cypress 12.5.1 - sadly I can't provide a code example as I'm testing proprietary code. I just hope my input helps.

[aangelinsf]

This worked for my instance with a checkbox:
cy.get('#privacy_policy_2').check({force: true})

[vonkanehoffen]

@steps0x29a I also have this issue in Cypress 13.3.2. Same behaviour with .should('not.be.disabled') passing, then type complaining;. Did you ever find a solution?

[steps0x29a]

@steps0x29a I also have this issue in Cypress 13.3.2. Same behaviour with .should('not.be.disabled') passing, then type complaining;. Did you ever find a solution?

Sadly no 😩