如何使用Cypress在iFrame文本区域中输入内容？

你遇到的问题核心在于Cypress无法直接对iFrame元素执行输入操作——iFrame拥有独立的DOM上下文，必须先切换到iFrame内部才能操作其中的元素。之前的代码直接对<iframe>标签调用.type()，实际是在父页面上下文操作，自然不会在编辑器内输入文本，也不会触发报错。

解决方案：切换到iFrame上下文后操作 #

修改你的代码，先获取iFrame内部的可操作DOM（编辑器的可编辑区域），再执行输入：

1. 封装获取iFrame内部上下文的方法：

static getIframeEditableArea() {
  return cy.get('iframe[id="mce_0_ifr"]')
    // 获取iFrame的document.body
    .its('0.contentDocument.body')
    // 等待body加载完成并可见
    .should('be.visible')
    // 包装为Cypress可操作对象
    .then(cy.wrap)
    // 定位到tinymce编辑器的可编辑区域
    .find('#tinymce');
}

2. 调用方法执行输入：

// 先新建文档
iFrame.startNewDocument();
// 切换到iFrame上下文并输入文本
iFrame.getIframeEditableArea().type('test jjhjhjhjhjhjhjh');

补充说明 #

• 该测试站点使用的是TinyMCE编辑器，iFrame内的可编辑区域是<body id="tinymce">（带有contenteditable属性），所以需要定位到这个元素才能输入。
• 如果不需要精确定位，也可以直接对iFrame的body执行.type()，因为它本身就是可编辑的：

static getIframeBody() {
  return cy.get('iframe[id="mce_0_ifr"]')
    .its('0.contentDocument.body')
    .should('be.visible')
    .then(cy.wrap);
}

// 使用时
iFrame.getIframeBody().type('test jjhjhjhjhjhjhjh');

内容的提问来源于stack exchange，提问作者D.Hodges