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

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

[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 https://github.com/cypress-io/cypress/issues/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.

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