如何使用 Cypress 在 iFrame 中打字

Question

我正在使用测试站点构建 Cypress E2E 测试框架。

我无法在 iFrame 文本区域内输入内容。

这是实际的 iFrame： https://the-internet.herokuapp.com/iframe

我可以通过单击包含以下行的文件菜单来启动新文档：

    static startNewDocument() {
        cy.get('[type="button"]').contains('File').click();
        return cy.get('[role="menuitem"]').contains('New document').click();
    };

但我无法在 iFrame 内输入以下内容：

    static getTextArea() {
        return cy.get('iframe[id="mce_0_ifr"]');
    };
    
    iFrame.getTextArea().type('test jjhjhjhjhjhjhjh');

这是调试控制台的屏幕截图，没有显示错误。测试通过了，但它实际上并没有插入我正在输入的文本。

Answer 1

<iframe>

只是一个嵌入式浏览器。您需要找到它的文档，然后找到接受文本的元素（在本例中为

<p>

）。

此外，菜单项“新文档”是一个更改 DOM 的操作，因此最好在输入新文本之前断言它已完成。

cy.visit('https://the-internet.herokuapp.com/iframe');

cy.get('[type="button"]').contains('File').click()
cy.get('[role="menuitem"]').contains('New document').click()

cy.get('iframe[id="mce_0_ifr"]')
  .its('0.contentDocument')
  .find('p')
  .should('have.text', '')

cy.get('iframe[id="mce_0_ifr"]')
  .its('0.contentDocument')
  .find('p')
  .type('typing into tiny mce')

---

还要小心

之类的结构

return cy.get('iframe[id="mce_0_ifr"]')

因为如果您在页面上执行操作（例如单击菜单），返回的链接器可能会变得陈旧。