『心善渊』Selenium3.0基础 — 16、Selenium对iframe表单的操作

1、什么是iframe表单

实际上就是HTML页面中使用iframe/frame标签,是在当前页面中引用了其他页面的链接,真正的页面数据并没有出现在当前页面源码中,但是在浏览器中我们是可以看到内容的。简单理解可以使页面中开了一个窗口显示另一个页面。

我们在Web应用中,经常会遇到这样的iframe表单嵌套页面,Frame标签有framesetframeiframe三种,frameset跟其他普通标签没有区别,不会影响到正常的定位。而frameiframe需要切换进去才能定位到其中的元素,这就相当于frameiframe是当前页面中嵌套的其他页面。这时就需要通过switch_to.frame()方法,将当前定位的主体切换为 frameiframe表单的内嵌页面中。

2、iframe表单操作流程

假设:页面上有A、B 两个frame,其中B 在A 内,那么定位B 中的内容则需要先到A,然后再到B。

下面frame.html文件的代码中,里面有个idf1frame,该页面我们简称为frame 。而f1中又嵌入了idf2frame,该页面我们简称为inner,该frame加载了百度的首页。

首先我们进入页面的时候,就已经在frame页面中了,如果我们想要在inner页面的百度搜索框输入内容,就要定位到inner页面(innerframe标签),然后再进入到inner页面中,然后定位inner页面中的百度搜索框,输入内容。

如下图所示:

image

注:

  • 进入浏览器直接就可以操作的页面,就是最外层表单iframe
  • 然后其他的表单从0开始,依次索引。

3、iframe表单操作常用方法

(1)进入表单

使用switch_to.frame()方法进入一个表单。

  1. 方式一:通过表单的id或name属性切换进表单
    driver.switch_to.frame(value)driver.switch_to_frame(value)(已过期)
  2. 方式二:先定位到表单元素,再切换进入。
    可以是各种方式定位到iframe表单元素。
    el = driver.find_element_by_xxx(value)
    然后再进入表单
    driver.switch_to.frame(el)driver.switch_to_frame(el)(已过期)

(2)多表单切换

  1. 跳回最外层的页面。
    driver.switch_to.default_content()
  2. 跳回上层的页面。
    driver.switch_to.parent_frame()

4、表单操作示例

需求:在163邮箱登陆页面中,操作iframe元素。

"""
1.学习目标:
    必须掌握iframe表单操作方式
2.语法(操作步骤)
    2.1 确定即将操作的元素是否属于iframe
        F12中elements最下方查看是否有iframe/frame标签名
    2.2 定位iframe/frame标签
    2.3 进入iframe
        driver.switch_to.frame(参数)
        参数:
            当iframe标签有id/name属性时,参数=id/name的属性值,无需定位。
                driver.find_element_by_id("idframe")
            当iframe标签没有id/name属性时,先定位,参数=定位元素
                el_frame = driver.find_element_by_xpath("//iframe[starts-with(@id,'x-URS-iframe')]")
                driver.switch_to.frame(el_frame)
            当明确页面中iframe索引值,参数=索引值
                driver.switch_to.frame(0)  # 参数=索引值  从0开始
                (也就是页面中有几个iframe,和你需要的iframe的索引,你都知道就可以用)
    2.4 操作iframe中的元素
        和普通页面一样
    2.5 退出iframe
        退出到上一层   driver.switch_to.parent_frame()
        退出到最外层 driver.switch_to.default_content()
        具体跳出到哪一层,根据下一步操作而定。
3.需求
    在163邮箱登陆页面中,操作iframe元素。
4.iframe在web中的应用位置
    1.一般的登录,163邮箱,qq邮箱,
    2.发邮件(富文本编辑器一般是嵌入到页面中的,也就是邮件的正文也是iframe),
    3.后台管理菜单栏
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep

# 2.打开浏览器
driver = webdriver.Chrome()

# 3.打开页面
url = "https://mail.163.com/"
driver.get(url)
sleep(2)

# 4.iframe操作
# 4.1 进入iframe表单
# 4.1.1 方式一:先定位iframe表单再进入
el_frame = driver.find_element_by_xpath("//iframe[starts-with(@id,'x-URS-iframe')]")
# print(el_frame.get_attribute("outerHTML"))
# 4.1.2 切换进入表单中
driver.switch_to.frame(el_frame)

# 4.1.3 方式二:直接通过id或name进入表单中
# 如下id不正确
# driver.switch_to.frame('x-URS-iframe')

# 4.1.4 方式三:通过索引值切换进入表单
# 参数=索引值  从0开始
# driver.switch_to.frame(0)  # 可用

# 4.2 操作表单中的元素
# 4.2.1 定位账号输入框和密码输入框
email = driver.find_element_by_css_selector("input[name='email']")
password = driver.find_element_by_css_selector("input[name='password']")
sleep(2)

# 4.2.2 填写内容
email.clear()
email.send_keys("Selenium")
password.clear()
password.send_keys("Selenium")
sleep(2)

# 4.3 跳出页面中表单
# 因为页面中只有一层iframe,所以跳到上一层和最外层一样效果。
# 4.3.1 跳到最外层
driver.switch_to.default_content()

# 4.3.2 跳到上一层
# driver.switch_to.default_content()
sleep(2)

# 4.4 点击网易首页
driver.find_element_by_link_text("网易首页").click()
sleep(3)

# 5.关闭浏览器
driver.quit()
posted @ 2021-07-04 18:35  繁华似锦Fighting  阅读(144)  评论(0编辑  收藏  举报