Cypress多Iframe场景下无法访问Done按钮问题求助

问题根源 #

你遇到的TypeError: Cannot read properties of undefined (reading 'apply')是因为自定义命令的写法错误——直接给cy对象赋值函数不是Cypress认可的自定义命令注册方式。另外代码里的.should('not.exist')完全写反了，这会让Cypress等待iframe的contentDocument不存在，自然找不到后续元素。

修复步骤 #

1. 正确注册自定义命令
   在你的Cypress命令文件（比如cypress/support/commands.js）里添加以下代码，注册一个能正确获取iframe文档的命令：

   Cypress.Commands.add('getIframe', () => {
     return cy.get('iframe[data-test="uw-iframe"]')
       // 等待iframe加载完成，确保contentDocument存在
       .its('0.contentDocument').should('exist')
       .then(cy.wrap);
   });
   

2. 修改测试代码，调用正确的命令
   把原来的自定义命令部分替换成下面的代码，确保能正确定位并点击Done按钮：

   // 点击Add Photos
   cy.contains('Add Photos').click({ force: true, multiple: true })
   
   // 上传图片
   cy.get('.css-1jk49jo .dropzone--isActive')
     .selectFile('cypress/fixtures/RedPanda.jpg', { action: "drag-drop" })
   
   // 获取iframe并点击Done按钮
   cy.getIframe()
     // 等待Done按钮可见
     .find('.bg-action-c').should('be.visible')
     .click({ force: true });
   

额外注意事项 #

• 如果页面有多个同名iframe，需要更精准的定位方式，比如结合索引或者父元素来筛选：

  // 比如取第2个符合选择器的iframe
  cy.get('iframe[data-test="uw-iframe"]').eq(1)
    .its('0.contentDocument').should('exist')
    .then(cy.wrap)
    .find('.bg-action-c').click();
  

• 有些iframe可能加载较慢，你可以通过断言等待元素的方式代替固定时长等待，或者检查iframe的contentWindow是否加载完成：

  Cypress.Commands.add('getIframe', () => {
    return cy.get('iframe[data-test="uw-iframe"]')
      .its('0.contentWindow.document').should('exist')
      .then(cy.wrap);
  });
  

内容的提问来源于stack exchange，提问作者user25065585