2.3.5 iframe 元素定位实战
在自动化测试中，如果无法定位到一个元素，那么 大的可能是定位的元素属性在 iframe 框架中。iframe 对象代表一个 HTML 的内联框架，在 HTML 中 iframe 每出现一次，一个 iframe 对象就会被创建。
1. 处理未嵌套的 iframe
iframe 存在嵌套和未嵌套的页面。首先来看未嵌套的页面，如图 2-3-7 所示。
实现以上截图效果的 HTML 代码如下。其中 frame.html 代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <center> <a href="frame-1.html" target="10">无涯课堂</a> <a href="frame-2.html" target="10">Python接口测试实战</a><br><br> </center> <iframe id="text" src="frame-1.html" name="10-20" width="500" height="170" align="center"> </iframe> </body> </html> |
frame-1.html 代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <center> <font size=5>无涯课堂</font><br><br> </center> 无涯课堂在网易平台已上线，欢迎大家关注<br> </body> </html> |
frame-2.html 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <center> <font size=5>Python接口测试实战</font><br><br> </center> 基于Python语言的接口自动化测试实战课程。 </body> </html> |
在图 2-3-7 中，想要获取 iframe 框架中的"无涯课堂"，实现的代码如下：
#!/usr/bin/env python #-*-coding:utf-8-*- from selenium import webdriver from selenium.webdriver.common.by import By driver=webdriver.Firefox() driver.maximize_window() driver.implicitly_wait(30) #index.html的地址依据自己本地实际地址 driver.get('file:///D:/git/github/book/html/frame/frame.html') #获取"无涯课堂"文本信息 print driver.find_element_by_xpath('/html/body/center/font').text driver.quit() |
运行以上代码后，会出现如下的错误：
selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: /html/body/center/font
依据给出的错误信息可以发现这个错误是元素定位错误导致的。由于存在 iframe 框架，首先需要进入到 iframe 框架，再定位 iframe 框架中的元素。定位的方式分为两种，一种是以 ID 的方式，另外一种是索引的方式。
以 ID 的方式定位时的实现代码：
#!/usr/bin/env python #-*-coding:utf-8-*- from selenium import webdriver driver=webdriver.Firefox() driver.maximize_window() driver.implicitly_wait(30) #index.html的地址依据自己本地实际地址 driver.get('file:///D:/git/github/book/html/frame/frame.html') #依据iframe的Id进入到frame框架 driver.switch_to_frame('text') #获取"无涯课堂"文本信息 print driver.find_element_by_xpath('/html/body/center/font').text driver.quit() |
也可以通过索引的方式进入到 iframe 框架中，然后再定位对应页面的元素属性。在以上的实例中，只有一个 iframe，那么它的索引就是 0，实现的代码如下：
#!/usr/bin/env python #-*-coding:utf-8-*- from selenium import webdriver driver=webdriver.Firefox() driver.maximize_window() driver.implicitly_wait(30) #index.html的地址依据自己本地实际地址 driver.get('file:///D:/git/github/book/html/frame/frame.html') #依据索引进入到frame框架 driver.switch_to_frame(0) #获取"无涯课堂"文本信息 print driver.find_element_by_xpath('/html/body/center/font').text driver.quit() |
2. 处理嵌套的 iframe
下面来看嵌套的 iframe 在自动化测试中如何进行元素定位，以及如何跳出嵌套。嵌套页面的效果如图 2-3-8 所示。
在图 2-3-8 中可以看到在一个页面里面嵌套了 Bing 搜索的首页，该页面的
HTML 代码如下：
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>嵌套的页面</title> </head> <body> <center> <iframe id="son" src="http://www.bing.com" width="800" height="400"> </iframe> </center> <br><br> </body> </html> |
在该页面要实现 Bing 的搜索效果，首先需要进入到 iframe 框架中，然后再定位 Bing 首页搜索输入框的元素属性。该 iframe 的 ID 是 son，Bing 首页搜索输入框的元素属性 ID 是 sb_form_q。实现在 Bing 首页搜索输入框中输入搜索关键字的代码如下：
#!/usr/bin/env python #-*-coding:utf-8-*- from selenium import webdriver driver=webdriver.Firefox() driver.maximize_window() driver.implicitly_wait(30) #bing.html的地址依据自己本地实际地址 driver.get('file:///C:/Users/Administrator/Desktop/san/san/1130/frame/bi ng.html') #依据索引进入到frame框架 driver.switch_to_frame('son') #输入搜索关键字Selenium driver.find_element_by_id('sb_form_q').send_keys('Selenium') driver.quit() |
下面是一个多层级的嵌套页面在自动化测试中的应用实例，如图 2-3-9 所示。
HTML 代码如下：
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>多层嵌套</title> </head> <body> <center> <iframe id="parent" src="bing.html" width="1000" height="300" align="center"> </iframe> </center> <hr> <center> 请输入用户名：<input type="text" id="userid" name="username" class="classname" > </center> </body> </html> |
在以上 HTML 代码中，可以看到 Bing 首页的搜索多了二层嵌套，页面层级结构如图 2-3-10 所示。
要想在 Bing 首页搜索输入框中输入搜索关键字 Selenium，然后在下面的用
户名输入框中输入 Selenium，实现的代码如下：
#!/usr/bin/env python #-*-coding:utf-8-*- from selenium import webdriver driver=webdriver.Firefox() driver.maximize_window() driver.implicitly_wait(30) #second.html的地址依据自己本地实际地址 driver.get('file:///D:/git/github/book/html/frame/second.html') #依据ID进入到第一层frame框架中 driver.switch_to_frame('parent') #依据ID进入到第二层frame框架中 driver.switch_to_frame('son') #输入搜索关键字Selenium driver.find_element_by_id('sb_form_q').send_keys('Selenium') #跳出frame框架 driver.switch_to_default_content() #用户名输入框中输入Selenium driver.find_element_by_name('username').send_keys('Selenium') driver.quit() |
版权声明：51Testing软件测试网获得电子工业出版社和作者授权连载本书部分章节。
任何个人或单位未获得明确的书面许可，不得对本文内容复制、转载或进行镜像，否则将追究法律责任。
