在前端自动化测试中，使用 iframes 是很常见的场景。在 Cypress 中，我们可以使用 cy.iframe() 命令来操作单级 iframe，但是当遇到多级 iframe 嵌套时，就需要额外的技巧来进行元素定位。
iframe 嵌套的问题
假设我们的测试页面包含两级嵌套的 iframe，如下图所示：
-- -------------------- ---- ------- ------------------------- - ---- - - - - ------------------- - - - ----- - - - - - - - - - ------------- - - - - - ----- - - - - - - - - - - - - ------------- - - - - - - - ------------------- - - - -------------------------
我们希望在 Cypress 中找到嵌套在第二级 iframe 中的某个元素，该如何做？
解决方案
我们有两种方法来解决这个问题。
方法一：直接嵌套
第一种方法是直接在 Cypress 中嵌套多次 cy.iframe() 命令，例如：
-- -------------------- ---- ------- ------------------------------------- -- - ---------------------------------------------------------- --- ---------------------------------------------------------------------- -- - ------------------------------------ --- ------------------------------------------------------------------ ------- ---------
这种方法比较麻烦，需要多次嵌套 cy.iframe() 命令，并且还需要手动获取 iframe 的 contentDocument 和 body，代码量比较大。
方法二：使用 cypress-iframe 库
第二种方法是使用开源库 cypress-iframe。它提供了一些方便的命令来处理多级 iframe 嵌套。
在 Cypress 中安装 cypress-iframe：
npm install -D cypress-iframe
然后在 cypress/support/index.js 中引入 cypress-iframe：
import 'cypress-iframe';
这样就可以使用 cy.iframe() 命令进行多级 iframe 嵌套了，例如：
cy.iframe(['#iframe1', '#iframe2']).find('#target-element').should('have.text', 'Hello, World!');这里的参数是一个数组，表示需要嵌套的 iframe ID。cypress-iframe 会自动获取每个 iframe 中的 contentDocument 和 body。
示例代码
下面是一个完整的示例代码，演示了如何使用 cypress-iframe 来操作多级 iframe 嵌套的元素：
describe('Test multi-level iframe', () => {
it('should locate element in nested iframes', () => {
cy.visit('http://localhost:3000/multi-level-iframe.html');
cy.iframe(['#iframe1', '#iframe2']).find('#target-element').should('have.text', 'Hello, World!');
});
});结论
在 Cypress 中操作多级 iframe 嵌套的元素，既可以使用多次嵌套 cy.iframe() 命令，也可以使用 cypress-iframe 库。后者更为方便，推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67106feb5f551281026b0652