在前端开发中，经常需要使用 iframe 嵌套页面来实现一些功能，比如嵌套第三方网页、嵌套广告等。在进行 Cypress 测试时，我们需要访问和操作这些嵌套页面，本文将介绍如何在 Cypress 测试中访问和操作 iframe 嵌套页面。
什么是 iframe？
iframe 是 HTML 中的一个标签，可以用来在页面中嵌套其他页面。通过 iframe，我们可以将一个网页嵌入到另一个网页中，实现在同一个页面中显示多个网页的效果。iframe 的语法如下：
<iframe src="url"></iframe>
其中，src 属性指定了嵌入页面的 URL。
Cypress 如何访问和操作 iframe 嵌套页面？
在 Cypress 中，我们可以使用 cy.frameLoaded() 和 cy.iframe() 方法来访问和操作 iframe 嵌套页面。
访问 iframe 嵌套页面
要访问一个 iframe 嵌套页面，我们需要先使用 cy.frameLoaded() 方法加载 iframe 的内容。cy.frameLoaded() 方法会等待 iframe 中的内容加载完成后再继续执行后续的测试代码。
cy.frameLoaded('#my-iframe')其中，#my-iframe 是 iframe 标签的 ID 或 CSS 选择器。
加载完成后，我们可以使用 cy.iframe() 方法来访问 iframe 嵌套页面中的元素。
cy.iframe('#my-iframe').find('.my-class').click()其中，#my-iframe 是 iframe 标签的 ID 或 CSS 选择器，.my-class 是 iframe 中的元素的 CSS 选择器。
操作 iframe 嵌套页面
要操作一个 iframe 嵌套页面中的元素，我们可以使用 cy.iframe() 方法来选择元素并进行操作。
cy.iframe('#my-iframe').find('.my-class').type('hello world')其中，#my-iframe 是 iframe 标签的 ID 或 CSS 选择器，.my-class 是 iframe 中的元素的 CSS 选择器。
如果 iframe 中的元素需要等待加载完成后才能进行操作，我们可以在 cy.iframe() 方法中使用回调函数来等待元素加载完成。
cy.iframe('#my-iframe', { timeout: 10000 }).then($iframe => {
const $body = $iframe.contents().find('body')
cy.wrap($body).find('.my-class').type('hello world')
})其中，#my-iframe 是 iframe 标签的 ID 或 CSS 选择器，timeout 选项指定了等待 iframe 加载完成的超时时间。cy.iframe() 方法返回一个 jQuery 对象，我们可以使用 jQuery 的方法来操作 iframe 中的元素。
示例代码
下面是一个示例代码，演示如何访问和操作 iframe 嵌套页面：
-- -------------------- ---- -------
--------------- ------ ------ -- -- -
------ ------ ------ -- -- -
-------------------------------
----------------------------
-------------------------------------------------
--
------ ------ ------ -- -- -
-------------------------------
----------------------------
----------------------------------------------------- -------
--
--总结
在 Cypress 测试中，访问和操作 iframe 嵌套页面需要使用 cy.frameLoaded() 和 cy.iframe() 方法。cy.frameLoaded() 方法用来加载 iframe 的内容，cy.iframe() 方法用来访问和操作 iframe 嵌套页面中的元素。在操作 iframe 嵌套页面时，需要注意等待元素加载完成后再进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e542a81886fbafa40fab99