iframe

前言

很多人在用selenium定位页面元素的时候会遇到定位不到的问题，明明元素就在那儿，用firebug也可以看到，就是定位不到，这种情况很有可能是frame在搞鬼。

frame标签有frameset、frame、iframe三种，frameset跟其他普通标签没有区别，不会影响到正常的定位。而frame与iframe对selenium定位而言是一样的，selenium有一组方法对frame进行操作。

一、frame和iframe区别

Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。 frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架。
Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体，而<Frame>< /Frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。

二、案例操作：163登录界面

1.打开http://mail.163.com 登录页面
2.用firebug定位登录框
3.鼠标停留在左下角（定位到iframe位置）时，右上角整个登录框显示灰色，说明iframe区域是整个登录框区域
4.左下角箭头位置显示iframe属性

三、怎么切到frame中(switch_to.frame())

1.由于登录按钮是在iframe上，所以第一步需要把定位器切换到iframe上

2.用switch_to.frame()方法切换，若此处有id属性，可以直接用id定位切换

from selenium import webdriver
import random
driver = webdriver.Chrome()
driver.get("https://mail.163.com")
driver.implicitly_wait(10)
# 切换iframe
# driver.switch_to_frame("xxx") # 该语法已过时，不推荐使用；换成driver.switch_to.frame("xxx")
driver.switch_to.frame("xxx") # xxx为当前iframe的id属性
driver.find_element_by_name("email").send_keys("123")
driver.find_element_by_name("password").send_keys("456")

不得不提到switch_to_frame()，很多人在这样写的时候会发现，这句话被划上了删除线，原因是这个方法已经out了，之后很有可能会不支持，建议的写法是switch_to.frame()。

注：selenium提供了switch_to.frame()方法来切换frame

switch_to.frame(reference)

reference是传入的参数，用来定位frame，可以传入id、name、index以及selenium的WebElement对象。，假设有如下HTML代码 index.html：

<html lang="en">
<head>
    <title>FrameTest</title>
</head>
<body>
<iframe src="a.html" id="frame1" name="myframe"></iframe>
</body>
</html>

想要定位其中的iframe并切进去，可以通过如下代码：

from selenium import webdriver
driver = webdriver.Firefox()
driver.switch_to.frame(0)  # 1.用frame的index来定位，第一个是0
# driver.switch_to.frame("frame1")  # 2.用id来定位
# driver.switch_to.frame("myframe")  # 3.用name来定位
# driver.switch_to.frame(driver.find_element_by_tag_name("iframe"))  # 4.用WebElement对象来定位

通常采用id和name就能够解决绝大多数问题。但有时候frame并无这两项属性，则可以用index和WebElement来定位：

index从0开始，传入整型参数即判定为用index定位，传入str参数则判定为用id/name定位
WebElement对象，即用find_element系列方法所取得的对象，我们可以用tag_name、xpath等来定位frame对象

四、如果iframe没有id或name怎么办？

1.这里iframe的切换是默认支持id和name方法的，当然实际情况中会遇到没有id属性和name属性为空的情况，这时候就需要先定位iframe元素对象，再进行切换。
2.定位元素还是之前的八种方法同样适用，这里我可以通过tag先定位到，也能达到同样效果。

由于当前id属性不唯一，且没有name属性，不支持直接 driver.switch_to_frame("xxx") 的方式。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://mail.163.com")
driver.implicitly_wait(10)
# 切换iframe
loc = driver.find_element_by_xpath("//*[contains(@id,'x-URS-iframe')]")
driver.switch_to.frame(loc)
driver.find_element_by_name("email").send_keys("123")
driver.find_element_by_name("password").send_keys("456")

五、释放iframe,从frame中切回主文档(switch_to.default_content())

切到frame中之后，我们便不能继续操作主文档的元素，这时如果想操作主文档内容，则需切回主文档。

举个栗子：

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://mail.163.com")
driver.implicitly_wait(10)
# 切换iframe
loc = driver.find_element_by_xpath("//*[contains(@id,'x-URS-iframe')]")
driver.switch_to.frame(loc)
driver.find_element_by_name("email").send_keys("123")
driver.find_element_by_name("password").send_keys("456")
# 在 iframe上操作完后，想重新操作主页面上操作元素，试下是否会报NoSuchElementException错误
driver.find_element_by_link_text("企业邮箱").click()

得到结果：
D:\Dev\Python36\python.exe D:/Dev/PyCharm/workplace/redmine/test11.py
Traceback (most recent call last):
  File "D:/Dev/PyCharm/workplace/redmine/test11.py", line 11, in <module>
    driver.find_element_by_link_text("企业邮箱").click()
  File "D:\Dev\Python36\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 428, in find_element_by_link_text
    return self.find_element(by=By.LINK_TEXT, value=link_text)
  File "D:\Dev\Python36\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 978, in find_element
    'value': value})['value']
  File "D:\Dev\Python36\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "D:\Dev\Python36\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"link text","selector":"企业邮箱"}
  (Session info: chrome=70.0.3538.67)
  (Driver info: chromedriver=2.40.565498 (ea082db3280dd6843ebfb08a625e3eb905c4f5ab),platform=Windows NT 10.0.17134 x86_64)


Process finished with exit code 1

用switch_to.default_content()方法返回到主页面。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://mail.163.com")
driver.implicitly_wait(10)
# 切换iframe
loc = driver.find_element_by_xpath("//*[contains(@id,'x-URS-iframe')]")
driver.switch_to.frame(loc)
driver.find_element_by_name("email").send_keys("123")
driver.find_element_by_name("password").send_keys("456")
# 释放iframe，重新回到主页面上
driver.switch_to.default_content()
# 验证是否切换成功
driver.find_element_by_link_text("企业邮箱").click()

六、嵌套frame的操作(switch_to.parent_frame())

有时候我们会遇到嵌套的frame，如下：

<html>
    <iframe id="frame1">
        <iframe id="frame2" / >
    </iframe>
</html>

1.从主文档切到frame2，一层层切进去

driver.switch_to.frame("frame1")
driver.switch_to.frame("frame2")

2.从frame2再切回frame1，这里selenium给我们提供了一个方法能够从子frame切回到父frame，而不用我们切回主文档再切进来。

driver.switch_to.parent_frame()  # 如果当前已是主文档，则无效果

有了parent_frame()这个相当于后退的方法，我们可以随意切换不同的frame，随意的跳来跳去了。

所以只要善用以下三个方法，遇到frame分分钟搞定：

driver.switch_to.frame(reference)
driver.switch_to.parent_frame()
driver.switch_to.default_content()

七、如何判断元素是否在iframe上？（利用火狐工具）

1.定位到元素后，切换到firepath界面
2.看firebug工具左上角，如果显示Top Window说明没有iframe
3.如果显示iframe#xxx这样的，说明在iframe上，#后面就是它的id

posted @ 2018-12-28 21:51 风聆阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

风聆

iframe

公告