selenium iframe切换

在做web自动化的过程中会遇到一些弹出的登录页面，定位后，执行程序发现还是出现报错，其实定位可能没有问题，而是iframe在作怪

iframe

iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架，也就html中在嵌套一个网页

iframe长什么样子

我们通常登录的163邮箱其实就是iframe。可以通过F12查看

如何定位iframe

我们知道什么是iframe了，那么如何定位？我们可以使用selenium中自带的一个方法 switch_to_frame ，这里的定位iframe可以是id属性也可以是name属性

源码

def switch_to_frame(self, frame_reference):
        """ Deprecated use driver.switch_to.frame
        """
        warnings.warn("use driver.switch_to.frame instead",
                      DeprecationWarning, stacklevel=2)
        self._switch_to.frame(frame_reference)

小试牛刀

方法一：

这里安静通过switch_to_frame方法进行定位，这里的iframe的ID为动态id，每次启动都不通，使用正则表达式抓取

from selenium import webdriver
import time
import re
driver = webdriver.Chrome()
driver.get('https://mail.163.com/')
# 获取页面HTML
html = driver.page_source
# 找到iframe的id，这里iframe是动态的
r = re.findall(r'


<p></p>
<p>上面我们在pychram代码中会发现，switch_to_frame()中有横线，这里官方是不建议使用的，我们可以使用switch_to.frame()</p>
<p></p>
<p><strong>方法二：</strong></p>
<p>前面介绍了显示等待以及等待元素的几种方法，这里我们也可以通过显示等待，循环查看是否存在iframe，然后进行跳转进去</p>


<pre>from selenium import webdriver
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
import time
import re
driver = webdriver.Chrome()
driver.get('https://mail.163.com/')
# 获取页面HTML
html = driver.page_source
# 找到iframe的id，这里iframe是动态的
r = re.findall(r'<iframe name="" frameborder="0" id="(.+?)" scrolling',html)[0]
# 通过显示等待的方法进行检测iframe是否出现,并跳转
WebDriverWait(driver,10,0.5).until(EC.frame_to_be_available_and_switch_to_it(r))
time.sleep(2)
driver.find_element_by_name('email').send_keys('821006052')</pre>


<h3>方法三：</h3>
<p>从上面观察发现iframe后面的一些数字为动态的，可以通过在CSS定位方法中，可以通过“^=”匹配id属性为以“x-URS-iframe“开头的元素进行定位。</p>


<pre>from selenium import webdriver
import time
import re
driver = webdriver.Chrome()
driver.get('https://mail.163.com/')
# 获取页面HTML
html = driver.page_source
time.sleep(2)
# 通过Css方法定位
r = driver.find_element_by_css_selector('iframe[id^="x-URS-iframe"]')
driver.switch_to_frame(r)
driver.find_element_by_name('email').send_keys('821006052')</pre>


<h2>跳转回原页面</h2>
<p>执行完iframe上的操作后，需要跳转会原页面上，这里需要使用方法： <span class="1024sou_code">switch_to.default_content() 和 <span class="1024sou_code">switch_to.parent_frame() </span></span></p>
<p>源码：</p>


<pre>def default_content(self):
        """
        Switch focus to the default frame.

        :Usage:
            driver.switch_to.default_content()
        """
        self._driver.execute(Command.SWITCH_TO_FRAME, {'id': None})</pre>


<p>源码：</p>


<pre>def parent_frame(self):
        """
        Switches focus to the parent context. If the current context is the top
        level browsing context, the context remains unchanged.

        :Usage:
            driver.switch_to.parent_frame()
        """
        self._driver.execute(Command.SWITCH_TO_PARENT_FRAME)</pre>


<h2>快速查看定位元素是否处于iframe上</h2>
<p>这里打开F12，通过ctrl+F，找到需要定位的元素，观察是否有iframe上。</p>
<p></p>

<p>原文链接：</p>
<p>https://www.cnblogs.com/qican/p/13427694.html</p>
						  
					  </div>
						<!--conend-->
							<div class="p-2"></div>

						<div class="arcinfo my-3 fs-7 text-center">
							
							
			<a href='/t/etagid3116-0.html' class='tagbtn' target='_blank'>selenium</a>							
						



						</div>
						
						<div class="p-2"></div>

						

						
					</div>
					<div class="p-2"></div>
					<!--xg-->
					<div class="lbox p-4 shadow-sm rounded-3">
						<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
						
<hr>				
						
			<div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562250.html">selenium python学习笔记之八 窗口截图、验证码处理</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="">（八）自动化测试之selenium学习心得-Xpath选择器</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-560484.html">docker selenium  分布式</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555208.html">Python + Selenium 定位非selected型下拉框的方法</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-551850.html">selenium 成功绕过淘宝登录反爬机制</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-546860.html">selenium</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-538066.html">快速掌握Python Selenium Web自动化：二）Selenium操纵浏览器的最基本用例（转载）</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-535245.html">Selenium 执行driver = webdriver.Firefox()时报错解决方案</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-533610.html">selenium 元素寻找的另一种方法</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-533497.html">pycharm使用selenium库</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-531535.html">Selenium 元素等待</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-517268.html">selenium(12):启用带插件的chrome浏览器</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div>            
            
            <!---->
                                    
           <!---->
  			
						

					</div>
					<!--xgend-->
				</div>

				<div class="col-lg-3 col-12 p-0 ps-lg-2">
					<!--box-->									
					<!--boxend-->
					<!--<div class="p-2"></div>-->

					<!--box-->
									<div class="lbox p-4 shadow-sm rounded-3">
					
									   <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
										<div class="clearfix"></div>
										<ul class="m-0 p-0 fs-7 r-tag">
										</ul>
									

										
										<div class="clearfix"></div>
									</div>
					<!--box end-->

					
				</div>

			</div>
		
		
		
		</div>	

</main>
						<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
	<div class="container p-0  fs-8">
	<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
	</div>	
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
		
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>

</body>
</html>