Actions in Cypress cause Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

[torkjels]

Current behavior:

When using Cypress to click through the Norwegian BankID test page (the most commonly used electronic identification system in Norway) it's not possible to type in the input fields within the iframes without using { force: true }. The iframe is cross-origin, so we have disabled chromeWebSecurity in cypress.json. It's worth noting that the input field is inside an iframe which itself is inside an iframe, where the inner iframe is from the source csfe.bankid.no and the outer is from the source tools.bankid.no.

When using { force: true } it still does not emit all the events that a proper user keyboard action would, as the website behaves differently than when manually typing in the input field. When manually typing, the form validator is run which enables form submit, but this does not happen when typing using Cypress and cy.type. If trying to type without { force: true } we get an error saying Timed out retrying: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'..

Desired behavior:

Using cy.type (either with or without { force: true }) leads to the same result as when a user would type into the field. That is, the validator runs and the submit is enabled.

Test code to reproduce

• I have forked the cypress-test-tiny repo to make a reproducible example: https://github.com/torkjels/cypress-test-tiny.
• Run the tests non-headless in Chrome using npm run cypress:open.
• There are 4 tests, and the only one that runs green is the one that pauses to allow for a user keyboard action. This suggests that there are some event(s)/information that cy.type doesn't emit to the iframe which get dispatched on normal user interaction.

Versions

Cypress: 4.9.0
Operating system: RHEL 7.8
Browser: Chrome 83

[jennifer-shehane]

Smaller repro example:

cypress.json

{
  "chromeWebSecurity": false,
  "defaultCommandTimeout": 10000
}

spec.js

it('breaks when not using force on click', function () {
  cy.visit('https://www.bankid.no/privat/los-mitt-bankid-problem/test-din-bankid---multidokumentsignering/')

  // Wait for the frame to load
  cy.wait(3000)

  // Click first button
  cy.get('iframe')
    .its('0.contentDocument')
    .its('body').as('outerIframe')
    .then(cy.wrap)
    .find('iframe')
    .its('0.contentDocument')
    .its('body').as('innerIframe').then(() => {
      cy.wrap(this.innerIframe)
        .find('.document-list')
        .find('button')
        .first()
        .click()

      // Wait for next frame to load
      cy.wait(3000)

      // Check checkbox
      cy.wrap(this.innerIframe).contains('Innholdet er forstått og jeg er klar til å signere.').click()

      // Click next button
      cy.wrap(this.innerIframe)
        .find('button[title=Neste]')
        .click()
    })
})

Timed out retrying: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

This error is throwing when we call scrollIntoView on the element we intend to perform the action on: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/actionability.js#L316

We're just calling the native JS function here, and it's erroring...so this is a bit confusing.

[RanjithRajashekarappa]

I am facing the same issue as described above.Fix for the above issue from cypress team asap is highly appreciated as bank Id page is a entry point for all the tests

[rasmusrim]

Were any of you able to solve this problem?

I am able to enter the value into the field, and I am able to trigger the correct onKeyUp event by using getEventListeners in the console:

getEventListeners($0).keyup[0].listener();

That makes the button enabled. It seems, however, that I am unable to trigger that same onkeyup event through Cypress code.

[torleifhalseth]

Hi folks! Our team is experiencing the same challenge. It would be amazing for our team to fix this issue. Are you planning to investigate more @jennifer-shehane ?

Have to say using Cypress as testing framework for our integration is amazing, the only thing missing is auth using this iframe :(

🍻

[lfbergee]

We've experienced the same, we did get through it using puppeteer. Seems like there is something that in not triggered as it should using the type command or setting the field using jQuery.

[BogdanCerovac]

Hi there, experiencing the exactly same issue when trying to simulate the login via BankID's iframe.

I managed to check the presence (expected <input#uvX_CuceDtXdCv_dscXG_2> to have a length of 1)
but click or type fails with "Timed out retrying: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."

As far as I can see the BankID element is using JavaScript bindings for the elements (looks like Knockout.JS if it matters).

I managed to tweak it/get around it with some help of jQuery :)

[anish-vakharia]

@BogdanCerovac Can you share your solution to this?

[swatidhanu1985]

@BogdanCerovac Would you please share the work around you tried. I managed to type in to input field but on click of button, input field validation asks for 11 digits but I already have given 11 digits. So when we type using cy.type, validation event is not triggered,

Kindly share the solution so I can try it out

[BogdanCerovac]

@anish-vakharia & @swatidhanu1985 ;

Hi, I must say that I gave up on using Cypress to test this as my hacky solution was not very scalable and neither robust. Sadly abandoned went to Puppeteer as it supports "native" events and Cypress is still working on them as far as I know (ref. to #311).

Conceptually it went like this, hacky as I mentioned;

1. Disabled security (same-origin policy) in browser - https://docs.cypress.io/guides/guides/web-security#Set-chromeWebSecurity-to-false
2. Made a "shadow" form on parent page holding iframe, under our control that sends (native JS) events to iframe (with JQuery), so that we can manipulate "shadow" form from Cypress and it is then manipulating iframe form.

It was much easier to do it with Puppeteer and I guess one could use the session cookie from Puppeteer inside Cypress if you absolutely want to use Cypress. I liked it for assertions but for this project it was too early...

Hope Cypress will get native events - then we will be able to do this simple flow easily and with no hacks.

[maltewirz]

Concerning real events, see the official reply by the Cypress team here: #311 (comment). "We suggest using https://github.com/dmtrKovalenko/cypress-real-events in the meantime."
Using cypress-real-events worked for me partially but not in all cases unfortunately.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.

[captain-aman-11]

It's still not working. Can you suggest a fix...

[nagash77]

@Lord-Aman please open a new issue with a reproducible example and the Cypress team will be happy to investigate.

[only4arunkumar]

This issue is happening again, i shall create a new bug with reproducible example