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

Created on 29 Nov 2019  ·  6Comments  ·  Source: cypress-io/cypress

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.


Screen Shot 2019-11-29 at 2 43 49 PM
Screen Shot 2019-11-29 at 2 45 34 PM

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)

cy.type ⌨️

Most helpful comment

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.

All 6 comments

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.

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

Screen Shot 2019-12-25 at 11 13 32

@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. 🙏

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.

@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.

Screen Shot 2020-01-06 at 1 14 36 PM

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

Was this page helpful?
0 / 5 - 0 ratings