Version 102 of Firefox causes flaky tests when using `cy.type()` (only headless)

Current behavior

If I’m running some of our tests in headless mode (or simply it’s running in our pipeline) Firefox 102 causes the following error when I use cy.type() even though the element is not disabled and it has no issue inside Chrome:

 1) Adding new Something
       should create a new something:
     CypressError: `cy.type()` failed because it targeted a disabled element.

The element typed into was:

  > <input matinput="" class="mat-input-element mat-form-field-autofill-control ng-pristine ng-invalid cdk-text-field-autofill-monitored ng-star-inserted ng-touched" ng-reflect-id="formly_1_input_name_0" type="text" ng-reflect-type="text" ng-reflect-required="true" ng-reflect-error-state-matcher="[object Object]" ng-reflect-form="[object Object]" ng-reflect-field="[object Object]" tabindex="0" ng-reflect-placeholder="name" data-testid="somethingNameInput" id="formly_1_input_name_0" required="" data-placeholder="name" aria-required="true" aria-describedby="mat-error-0">

Ensure the element does not have an attribute named `disabled` before typing into it.

https://on.cypress.io/type
  ../driver/src/cy/commands/actions/type.ts/__webpack_exports__.default/type/handleFocused/onReady/<@https://localhost:8080/__cypress/runner/cypress_runner.js:152266:86
  tryCatcher@https://localhost:8080/__cypress/runner/cypress_runner.js:13012:23
  ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromiseFromHandler@https://localhost:8080/__cypress/runner/cypress_runner.js:10947:31
  ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise@https://localhost:8080/__cypress/runner/cypress_runner.js:11004:18
  ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise0@https://localhost:8080/__cypress/runner/cypress_runner.js:11049:10
  ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromises@https://localhost:8080/__cypress/runner/cypress_runner.js:11129:18
  _drainQueueStep@https://localhost:8080/__cypress/runner/cypress_runner.js:7719:12
  _drainQueue@https://localhost:8080/__cypress/runner/cypress_runner.js:7712:24
  ../../node_modules/bluebird/js/release/async.js/</Async.prototype._drainQueues@https://localhost:8080/__cypress/runner/cypress_runner.js:7728:16
  ../../node_modules/bluebird/js/release/async.js/</Async/this.drainQueues@https://localhost:8080/__cypress/runner/cypress_runner.js:7598:14
  From Your Spec Code:
      shouldFn@https://localhost:8080/__cypress/runner/cypress_runner.js:152956:18
      should@https://localhost:8080/__cypress/runner/cypress_runner.js:153074:23
      ../driver/src/cy/assertions.ts/create/injectAssertion/<@https://localhost:8080/__cypress/runner/cypress_runner.js:148027:39
      assertions@https://localhost:8080/__cypress/runner/cypress_runner.js:148391:16
      tryCatcher@https://localhost:8080/__cypress/runner/cypress_runner.js:13012:23
      gotValue@https://localhost:8080/__cypress/runner/cypress_runner.js:12156:18
      gotAccum@https://localhost:8080/__cypress/runner/cypress_runner.js:12143:25
      tryCatcher@https://localhost:8080/__cypress/runner/cypress_runner.js:13012:23
      ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromiseFromHandler@https://localhost:8080/__cypress/runner/cypress_runner.js:10947:31
      ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise@https://localhost:8080/__cypress/runner/cypress_runner.js:11004:18
      ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromiseCtx@https://localhost:8080/__cypress/runner/cypress_runner.js:11041:10
      _drainQueueStep@https://localhost:8080/__cypress/runner/cypress_runner.js:7723:12
      _drainQueue@https://localhost:8080/__cypress/runner/cypress_runner.js:7712:24
      ../../node_modules/bluebird/js/release/async.js/</Async.prototype._drainQueues@https://localhost:8080/__cypress/runner/cypress_runner.js:7728:16
      ../../node_modules/bluebird/js/release/async.js/</Async/this.drainQueues@https://localhost:8080/__cypress/runner/cypress_runner.js:7598:14

First, it happened in 9.6.0 then I upgraded to 10.3.0, but it was still the same issue and then I tried to run the exact same test with Firefox 101 and then it was successful.

One more thing that could be useful is that we are using angular with nx and I discovered that this issue (probably only) happens when we use Formly. If I’m running it in the browser with npx cypress open then it runs correctly.

Desired behavior

It should be able to type into a field using Firefox 102 without any issue just like in chrome.

Test code to reproduce

I’ll try my best to reproduce this issue in a different repo very soon. Edit: https://github.com/ducktordanny/cypress-firefox-flakiness

Cypress Version

10.3.0

Other

No response

[tbiethman]

@jpveooys @ducktordanny thank you both for the example reproductions. I pulled these down and confirmed your findings. It’s pretty obvious there’s something going wrong here.

[naomi-lgbt]

We’re facing a similar issue over at freeCodeCamp - the rollout of Firefox 102 seems to cause a couple of our tests to fail but only in headless mode.