想知道页面上有多少个iframe?教你一招

本文介绍了一种利用TryXpath火狐插件快速定位页面中iframe的方法,通过该插件可以有效确定页面中iframe的数量及目标iframe的位置,进而帮助自动化测试工程师更准确地进行元素操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

iframe指的是页面中又嵌套了另一个页面,或者说是一个HTML结构中又嵌套了另外一个完整的HTML结构,一般用于展示来自第三方的资源,比如广告位、地图、或者第三方的文本编辑器。

iframe在页面中还是挺普遍的,所以在我们做自动化时,几乎每个工程师都会遇到对iframe的处理。一般在自己的CSS表达式或Xpath表达式写的特别正确但就是操作不到元素时,很可能就是遇到了iframe,这是我们就要切换到iframe内部再进行后续操作。

切换时,如果iframe有id或name属性那就好办,但是如果没有,我们还可以根据iframe在页面中的索引号进行切换,但是这个时候往往有一个问题困扰我们:这个页面上到底有多少个iframe,我要操作的iframe究竟是第几个?

 

今天我来教大家一个独门秘籍:使用Try Xpath这个火狐的小插件来判断!

Try Xpath的安装就不介绍了,大家可以看我的另一篇文章,FireBug不能用了?使用火狐Try Xpath插件替代Firebug和Firepath

 

判断iframe的具体步骤如下:

1. 先在火狐中打开你的页面

例:http://the-internet.herokuapp.com/tinymce

2. 调出Try Xpath小工具

3. 勾选Try Xpath工具中的frameId复选框,点击“Get all frameid”按钮

4. 点击Get all frameid”按钮之后,展开此按钮右侧的Manual下拉列表

列表里面就告诉了你当前页面有多少个iframe,下拉选项的“0”不作为计数,下拉选项中一长串的数字做为计数,所以本例中整个页面中就只有一个iframe。

5. 输入frameid,点击“Focus frame”按钮

想要知道你想操作的iframe是第几个?只需要把下拉选项中看到的那一长串数字(frameId),输入到下面的frameid输入框中(这里当前只能手工输入),再点击下面的“Focus frame”按钮,Try Xpath就会把这个id号对应的iframe在页面上用粉色的虚线框出来。

如果不是你想操作的iframe的话,就再试另第一个(id号一般是奇或偶连续的数),直到试出你想操作的iframe。

6. 试出你想操作的iframe后,再看它在步骤4列表中的排名,记得按索引号的话,是从0开始的。

这样你就找出页面上总共有多少个iframe,你要操作的iframe对应的索引号是多少了。

注:对于比较复杂的iframe内又嵌套iframe,或者页面iframe太多的时候,此方法就不太适用了。

 

********************************************************************************************************

近期我会在博客中系统的更新一些关于Selenium的文章,也请大家多多关注下我的视频课程:

入门:基于Java的Selenium3自动化测试完整教程

高级:Selenium Java高级架构课程

*********************************************************************************************************

阅读更多精彩文章,请大家关注我的测试公众号:火烈鸟测试

要实现点击iframe导入页面中的按钮关闭这个iframe,可以使用JavaScript来操作父窗口和iframe之间的关系。具体步骤如下: 1. 在iframe中的按钮上添加一个点击事件监听器。 2. 在事件处理函数中,通过`window.parent`获取父窗口的引用。 3. 使用`window.parent.document`来访问父窗口的DOM。 4. 找到包含iframe的父元素并将其隐藏或移除。 以下是一个示例代码: ```html <!-- 父页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父页面</title> <style> #iframeContainer { border: 1px solid #000; padding: 10px; } </style> </head> <body> <h1>父页面</h1> <button onclick="openIframe()">打开iframe</button> <div id="iframeContainer"> <iframe id="myIframe" src="iframe.html" width="600" height="400"></iframe> </div> <script> function openIframe() { document.getElementById('iframeContainer').style.display = 'block'; } </script> </body> </html> ``` ```html <!-- iframe页面 (iframe.html) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iframe页面</title> </head> <body> <h2>这是iframe中的页面</h2> <button onclick="closeIframe()">关闭iframe</button> <script> function closeIframe() { window.parent.document.getElementById('iframeContainer').style.display = 'none'; } </script> </body> </html> ``` 在这个示例中,当点击父页面上的“打开iframe”按钮时,会显示包含iframe的容器。iframe页面中有一个按钮,点击该按钮会触发`closeIframe`函数,该函数通过`window.parent`获取父窗口的引用,并隐藏包含iframe的容器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOYO测试

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值