专栏首页橙子探索测试Selenium自动化测试-8.iframe处理

Selenium自动化测试-8.iframe处理

——————·今天距2020年75天·——————

这是ITester软件测试小栈第61次推文

大家好

我是vivi小胖虎

听说很多城市最近的气温急转直下

在生活和行业寒冬的双重夹击中

身心灵与肉都饱受折磨

一个坐标深圳的还在短衣短袖的靓仔

今天踩着七彩祥云沐浴着阳光

又给大家输送新能量啦~

在上一篇:Selenium自动化测试-获取元素属性信息,介绍了如何获取元素的内容、属性、状态信息。写自动化脚本有时会遇到 iframe嵌套页面,这时直接定位是不行的,今天我们介绍怎么处理iframe。

iframe是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架), 作用就是嵌套网页。

以126网易邮箱账号或手机号码输入框为例,我们先按正常定位方法试下能否定位成功。

代码如下:

报错信息如下:

Traceback (most recent call last):
      ......
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
  (Session info: chrome=76.0.3809.132)

让我们定位到元素看下到底发生了什么:

我们发现要定位的这个元素在iframe嵌套页面里,我们要操作这个元素,需要先切换到iframe页面,才能正常定位。

<iframe name="" frameborder="0" id="x-URS-iframe1571229605178.6365" scrolling="no" src="https://passport.126.com/webzj/v1.0.1/pub/index_dl2_new.html?cd=https%3A%2F%2Fmimg.127.net%2Fp%2Ffreemail%2Findex%2Funified%2Fstatic%2F2019%2Fcss%2F&amp;cf=urs.126.589bdb88.css&amp;MGID=1571229605178.6365&amp;wdaId=&amp;pkid=QdQXWEQ&amp;product=mail126" style="width: 100%; height: 100%; border: none; background: none;"></iframe>

一、怎么切换到iframe

1.iframe有固定id或name属性。 ①有id属性,且唯一; driver.switch_to.frame('id') ②有name属性,且唯一; driver.switch_to.frame('name')

2.如果是动态id或者没有id和name属性,可以xpath或css定位解决。

检查发现126邮箱id="x-URS-iframexxxxxx" 是动态id, 所以,我们不能直接通过id定位。

我们用之前学过的css定位,代码如下:

邮箱或手机号输入框写入了vivi,表示切换iframe,定位成功。

这里再补充下xpath其他的三种方法: 1. contains(a, b) 如果a中含有字符串b,则返回true,否则返回false。 driver.find_element_by_xpath("//div[contains(@id, 'btn-attention')]") 2. starts-with(a, b) 如果a是以字符串b开头,返回true,否则返回false。 driver.find_element_by_xpath("//div[starts-with(@id,'btn-attention')]") 3. ends-with(a, b) 如果a是以字符串b结尾,返回true,否则返回false。 driver.find_element_by_xpath("//div[ends-with(@id, 'btn-attention')]")

实现代码如下:

二、从iframe切回到主文档

切换到iframe框架内后,就不能直接定位主文档元素了,比如切换到iframe之后,再定位126邮箱页面的企业邮箱链接。

代码如下:

结果报错,因为在iframe框架内,没有切换到主文档,不能直接定位到主文档的元素。

处理办法是退回主文档,进行定位,使用:driver.switch_to.default_content()。

运行之后,切换到iframe框架,然后再切回主文档,定位企业邮箱链接。

三、多层嵌套iframe的操作

有时候页面会有多层嵌套iframe,这时候我们需要层层切换iframe

<iframe src="" id="index_main" name="main" scrolling="Yes" noresize="noresize">
  <iframe id="Editor1" src="" frameborder="0" scrolling="no" >
    <iframe id="eWebEditor" width="100%" height="100%" scrolling="yes"                                  frameborder="0" src="">
       <input type="text" id="TeacherTxt" name="Teacher" size="12"                                              maxlength="12" >
    </iframe>
  </iframe>
</iframe>

比如这个源码中,有三层iframe嵌套,如果我们想定位到id="eWebEditor"这一层,代码如下:

driver.switch_to.frame("inden_main")
driver.switch_to.frame("Editor1")
driver.switch_to.frame("eWebEditor")

那么如果我们又想切换到上一层呢,driver.switch_to.parent_frame(),表示从当前的子iframe切换到父iframe,即上级iframe。

# 切换到第一层iframe
driver.switch_to.frame("inden_main")
# 切换到第二层iframe
driver.switch_to.frame("Editor1")
切换到第三层iframe
driver.switch_to.frame("eWebEditor")
重新切换到父iframe,即切换到第二层iframe
driver.switch_to.parent_frame()

总结:遇到iframe时,需要先切换到iframe框架内,再进行定位;多层嵌套的,层层切换iframe;在iframe框架内,定位主文档的元素,需切回到主文档再定位。

下一篇将介绍定位一组元素,敬请期待~

最后是今天的分享:Python接口测试框架实战与自动化进阶视频及资料

ITester软件测试小栈今日分享

分享内容

Python接口测试框架实战与自动化进阶视频及资料

领取方式

微信公众号后台回复:20191013

有图有真相

以上

That‘s all

ITester软件测试小栈

本文分享自微信公众号 - 橙子探索测试(chengzitest)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jmeter之Http请求上传文件/上传图片

    之前文章用Python实现过文件上传/图片上传Python模拟实现multipart/form-data格式上传图片文件,今天我们来用Jmeter来实现下

    橙子探索测试
  • 【Fiddler篇】FreeHttp无限篡改http报文数据调试和mock服务

    FreeHttp是一个Fiddler插件借助FreeHttp您可按照您自己的设定修改请求或响应报文,这对测试及调试都非常有用

    橙子探索测试
  • Pytest-ordering自定义用例执行顺序

    我们一般在做自动化测试时,用例设计之间应该是可以相互独立执行的,没有一定的前后依赖关系的,如果我们真的有前后依赖,想指定用例的先后顺序,可以用到pytest-o...

    橙子探索测试
  • Selenium自动化测试-8.iframe处理

    在上一篇:Selenium自动化测试-获取元素属性信息,介绍了如何获取元素的内容、属性、状态信息。写自动化脚本有时会遇到 iframe嵌套页面,这时直接定位是不...

    ITester软件测试小栈
  • 深入理解iframe

    iframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)

    Leophen
  • iframe 解析

    简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/1126515...

    郑小超.
  • 根据获取内部元素的高度,设置iframe的高度

    德顺
  • 前端爬坑日记之vue内嵌iframe并跨域通信

    由于该项目是基于原本的安卓app,做的微信h5,所以原来的使用webview的页面现在需要在vue中实现,那就是使用iframe 查看了很多很多文档,其中这一...

    双面人
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • 响应式web布局中iframe的自适应

    困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

    欲休

扫码关注云+社区

领取腾讯云代金券