Cypress无法找到输入框：是否由iframe或表单导致？

问题原因 #

你失败的原因确实是iframe导致的。iframe属于独立的文档环境，Cypress默认只会在主页面的DOM树中查找元素，直接调用cy.get('input[name="firstname"]')是在主文档范围内搜索，自然找不到iframe内部的元素。

解决方案 #

方法1：原生Cypress语法实现（无需插件） #

需要先进入iframe的文档上下文，再查找内部元素：

cy.get('#hs-form-iframe-0')
  .its('0.contentDocument.body') // 获取iframe的body节点
  .should('not.be.empty') // 确保iframe内容已加载完成
  .then(cy.wrap) // 将iframe的body转为Cypress可操作对象
  .find('input[name="firstname"]') // 在iframe内部定位输入框
  .type('Smith');

方法2：使用cypress-iframe插件（写法更简洁） #

1. 安装插件：

npm install cypress-iframe --save-dev

2. 在cypress/support/e2e.js中导入插件：

import 'cypress-iframe';

3. 调用iframe()命令直接操作：

cy.iframe('#hs-form-iframe-0')
  .find('input[name="firstname"]')
  .type('Smith');

另外注意你的HTML源码存在一个小语法错误：<label>标签误用了</span>闭合，应改为</label>，不过这不是Cypress找不到元素的直接原因。

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