『心善渊』Selenium3.0基础 — 20.iframe表单操作

1、什么是iframe表单

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

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

2、iframe表单操作流程

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

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

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

如下图：

注：

进入浏览器直接就可以操作的页面，就是最外层表单iframe。

然后其他的表单从0开始，依次索引。

3、iframe表单操作常用方法

（1）进入表单

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

方式一：通过表单的id或name属性切换进表单

driver.switch_to.frame(value)或driver.switch_to_frame(value)（已过期）
方式二：先定位到表单元素，再切换进入。

可以是各种方式定位到iframe表单元素。

el = driver.find_element_by_xxx(value)

然后再进入表单

driver.switch_to.frame(el)或driver.switch_to_frame(el)（已过期）

（2）多表单切换

跳回最外层的页面。

driver.switch_to.default_content()
跳回上层的页面。

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()