Selenium基础 — iframe表单操作

news2024/11/20 13:18:07

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、示例

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

最后我这里给你们分享一下我所积累和真理的文档和学习资料有需要是领取就可以了