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

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]

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.

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