收藏如何在网页iframe中通过xpath或css选择器定位元素———北方组平平无奇组织
问题：网页iframe中不能用xpath或css定位来操作元素；
解决方案：
在部分页面中，涉及到iframe页面，我们可以用影刀的标准元素捕获可以进行捕获；
但是当元素是动态元素会发生变化时且无规律时，一般页面的话我们可以尝试使用xpath定位或者css定位方式；但是这两种定位方式在iframe中不起作用；针对这种情况，我们可以采用python的selenium模块进行iframe中使用xpath或css选择器定位。
selenium模块支持web浏览器自动化，支持的浏览器包括IE，Mozilla Firefox，Safari，Google Chrome，Opera，Edge等。这里我们以chrome举例说明。
1.先导入selenium的模块
2. 启动谷歌浏览器的时候，指令一个端口，方便后面我们定位操作这个已经打开的浏览器窗口。如果我们是通过命令‘打开网页’打开的浏览器，我们需要在打开网页指令中，高级--命令行参数写上 --remote-debugging-port=9222（这里的9222为端口号，可自行更改电脑未占用的端口号）
如果是手动打开的浏览器，那我们需要在桌面chrome浏览器中，右键--属性--目标中追加‘--remote-debugging-port=9222’
3.插入python或者导入python模块
代码如下：
#----------------------------------------------------------------------------------------
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
# 指定已经打开浏览器的地址及端口号
chrome_options = Options()
chrome_options.add_experimental_option("debuggerAddress", "127.0.0.1:9222")
driver = webdriver.Chrome(options=chrome_options)
#当我们开启多个标签页时，不知道选择激活哪个时，
# 可以获取所有的浏览器窗口对象进行遍历，找到我们需要操作德标签页
for handle in driver.window_handles:
#先切换到窗口
driver.switch_to.window(handle)
#切换到指定窗口标题为''iframe测试时，停止
if 'iframe测试' in driver.title:
print(driver.title)
break
#切换到iframe界面操作
#switch_to.frame 可以进行操作界面切换到iframe中。
driver.switch_to.frame('top')
# (如果包含多个iframe，可以继续在进行一次切换，就能进入到最里面德iframe层)
#driver.switch_to.frame('last')
#通过xpath方式定位元素
ele=driver.find_element(By.XPATH,'//*[@id="a"]')
#可以通过send_keys方法，进行在指定元素进行输入
#ele.send_keys("要输入的内容")
#点击指定元素
ele.click()
#----------------------------------------------------------------------------------------
页面代码展示：
运行代码测试，可以点击到iframe里面的按钮。
5.selenium常用方法：
# 指定已经打开浏览器的地址及端口号
chrome_options = Options()
chrome_options.add_experimental_option("debuggerAddress", "127.0.0.1:9222")
driver = webdriver.Chrome(options=chrome_options)
这里的端口号9222可以自主修改，其他未不变格式。
#driver.window_handles获取所有的标签页，然后可以通过遍历所有的标签页的名称，切换到我们需要操作的标签页
for handle in driver.window_handles:
#先切换到窗口
driver.switch_to.window(handle)
#切换到指定窗口时，停止
if 'iframe测试' in driver.title:
print(driver.title)
break
#switch_to.frame(frame_reference)切换操作范围到iframe里面，其中frame_reference可以是iframe的id或者name属性，也可以填写frame对应的Webelement对象比如：
driver.switch_to.frame(driver.find_element(By.TAG_NAME,'iframe')
#find_element()定位元素方法
可以通过xpath,css，id,name,class等属性的定位方式：
ele=driver.find_element(By.XPATH,'//*[@id="a"]')
ele=driver.find_element(By.NAME,'name')
ele=driver.find_element(By.ID,'id')
ele=driver.find_element(By.CSS_SELECTOR,'#a')
ele=driver.find_element(By.TAG_NAME,'class')
#对元素进行的操作，一般是点击或者输入，以下是我们可能常用的在元素中输入或点击元素。
ele.send_keys("要输入的内容")
#点击指定元素
ele.click()
测试涉及的html代码：
1.test_.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe测试</title>
<style>
.element_{
color: #ff0000;
}
#id_{
text-align: center;
}
</style>
</head>
<body>
<div class="element_" id="id_"></div>
<iframe src="top.html" width="600px" name="top" height="300px" style="background-color: cornflowerblue" >
</iframe>
<br>
我是最外层
<button type="button" onclick="test_()" >按钮</button>
<button type="button" onclick="test_2()" >按钮2</button>
<script>
function test_() {
alert("我是外部的按钮")
var element =document.querySelector(".ssd-module-wrap .M16759938174131");
var get_=getComputedStyle(element);
console.log(get_.getPropertyValue("background-image"));
}
//test_();
document.getElementById('a').click();
</script>
</body>
</html>
2.top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我是中间层
<button type="button" onclick="test_()" id="a" >among按钮</button>
<iframe src="last.html" width="400px" name="last" height="100px" style="background-color: coral"></iframe>
</body>
<script>
function test_() {
alert("我是中间的按钮");
}
</script>
</html>
3.last.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我是最里层
<button type="button" onclick="test_()" id="a" >last按钮</button>
</body>
<script>
function test_() {
alert("我是最里面的按钮");
}
</script>
</html>
收藏
