一. 什么是iframe
iframe是指一个html页面中嵌套了另外一个或多个html页面
如下代码,在外层html中有个id为"11"的div元素,iframe中也有一个id为"11"的div元素,由于元素定位的是当前html页面,所以无法定位iframe里面的元素。这时需要从当前html页面切换到iframe
<html>
<head>
<title>......</title>
<body>
<div id="11">......</div>
<a>......</a>
<iframe>
<html>
<head>......</head>
<body>
<div id="11" name="11"
</body>
</html>
</iframe>
<p>......</p>
</body>
</html>
二. frame框架里面元素定位
1. driver.switch_to.frame():从主页面切换到iframe
如果我们需要切换到你想要的内嵌页面上去,就需要定位到frame框架切换过去,切换用到的方法:driver.switch_to.frame(),然后就可以自己去定位框架里面元素,去进行对应的操作
switch_to.frame()中frame()方法源码如下:frame的参数可以是一个<iframe>标签的name属性值,也可以是下标(多个iframe,下标从1开始),还可以是定位到的一个iframe的元素对象
def frame(self, frame_reference):
"""
Switches focus to the specified frame, by index, name, or webelement.
:Args:
- frame_reference: The name of the window to switch to, an integer representing the index,
or a webelement that is an (i)frame to switch to.
:Usage:
driver.switch_to.frame('frame_name')
driver.switch_to.frame(1)
driver.switch_to.frame(driver.find_elements_by_tag_name("iframe")[0])
"""
2. driver.switch_to.default_content():从iframe切换回主页面
当iframe上的操作完后,想重新回到主页面上操作元素,这时候,就可以用driver.switch_to.default_content()方法返回到主页面
举个例子:腾讯课堂登录切换到输入用户名/密码登录
frame框架名:login_frame_qq
#腾讯课堂qq登陆 - 用户名和密码 - iframe切换
from selenium import webdriver
import time
#初始化chromedriver
driver = webdriver.Chrome()
#打开腾讯课堂的首页
driver.get("https://ke.qq.com/")
time.sleep(3)
#浏览器窗口最大化
driver.maximize_window()
#根据id定位 登录 并点击
driver.find_element_by_id("js_login").click()
time.sleep(2)
#选择账号登录类型:根据xpath定位 QQ登录 并点击
driver.find_element_by_xpath("//a[@class='js-btns-enter btns-enter btns-enter-qq']").click()
time.sleep(2)
#切换到iframe
driver.switch_to.frame("login_frame_qq")
time.sleep(2)
#根据id定位 账号密码登录 并点击
login_ele = driver.find_element_by_id("switcher_plogin")
time.sleep(2)
login_ele.click()
#根据xpath定位 账号输入框,并输入账号
driver.find_element_by_xpath("//input[@id='u']").send_keys("xxxxxx")
time.sleep(2)
#根据xpath定位 密码输入框,并输入密码
driver.find_element_by_xpath("//input[@id='p']").send_keys("xxxxxx")
time.sleep(2)
#根据xpath定位 登录,并点击登录
driver.find_element_by_xpath("//input[@class='btn']").click()
time.sleep(3)
#退出浏览器
driver.quit()
三. CSS定位
css:样式,一般页面的展示都是靠css来展示元素的
css可以通过元素的id、class、标签这三个常规属性直接定位到
# 表示id属性,如 #kw div#id值
. 表示class属性,如 .s_ipt div.class值
直接用tag名称来定位元素,无任何标识符,如 input
用tag名称和属性值(属性=value)来定位 如 from[name="loginform"] div[id="id值"][style="display:block"]
层级定位
> 子元素 如 div#id>div.class
后代元素 如 div#id div.class(中间有空格)
^= 以XX开头
$= 以XX结尾
*= 包含XX