赛普拉斯 Iframe 处理 - 无法与按钮交互

Question

我正在尝试使用 Cypress 进行 E2E 测试 auth 流程，其中包括名为 BankID 的第三方方法。 BankId是通过我可以成功访问的三个嵌套iframe集成的。但是，当我通过 cy.type('12345678912') 输入输入字段时，BankId 不会将此注册为受信任的事件，也不会使用箭头解锁提交按钮。

根据这个问题here, Cypress does not intend to support native browser events and suggests to use the package cypress-real-events。当通过 cy.realType('12345678912') 使用它时，它实际上成功地解锁了提交按钮。但是我永远无法成功单击提交按钮，无论是 .click() 还是包方法 .realClick().

错误是："Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."

我上传了一个带有最小测试版本的示例存储库 here。

任何反馈或提示将不胜感激:)

相关代码如下：


   
/// <reference types="cypress" />
import { skipOn } from '@cypress/skip-test'

describe('Recipe: blogs__iframes', () => {
  skipOn('firefox', () => {
    it('do it more generically', () => {
      const getIframeBody = (identifier) => {
        return cy
        .get(identifier)
        .its('0.contentDocument.body')
        .should('not.be.empty')
        .then(cy.wrap)
      }

      // Visiting the page index.html and getting iframe A
      cy.visit('index.html').contains('XHR in iframe')
      getIframeBody('iframe[data-cy="bankid"]').as('iframeA')

      cy.get('@iframeA').within(() => {
        getIframeBody('iframe[src="https://tools.bankid.no/bankid-test/auth"]').as('iframeB')

        cy.get('@iframeB').within(() => {
          getIframeBody('iframe[src^="https://csfe.bankid.no/CentralServerFEJS"]').as('iframeC')

          // Now we are in the right place and it finds the correct input element.
          // However, normal cypress command .type() fails and we have to use library cypress-real-events,
          // which provides an event firing system that works literally like in puppeteer
          cy.get('@iframeC').find('input[type="tel"]').should('be.visible').realType('12345678912')

          // But for the button below, this library now doesn't help anymore:
          // "Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."
          cy.get('@iframeC').find('button[type="submit"]').should('be.visible').first().realClick()
        })
      })
    })
  })
})

Answer 1

我也在 https://github.com/dmtrKovalenko/cypress-real-events/issues/226 上发布了这个问题并在那里得到了答案：

使用 .realClick({ scrollBehavior: false }); 解决了问题。

问题是 webapp 没有按预期滚动，因此导致 Cypress 找不到元素。就我而言，我将 iframe 加宽以避免需要滚动，问题仍然存在，但解决方法还是解决了它。

赛普拉斯 Iframe 处理 - 无法与按钮交互

Cypress Iframe Handling - Failure to interact with Button

javascript

iframe

e2e-testing

cypress