『心善淵』Selenium3.0基礎 — 16、Selenium對iframe表單的操作

繁華似錦Fighting發表於2021-07-04

目錄

1、什麼是iframe表單

實際上就是HTML頁面中使用iframe/frame標籤，是在當前頁面中引用了其他頁面的連結，真正的頁面資料並沒有出現在當前頁面原始碼中，但是在瀏覽器中我們是可以看到內容的。簡單理解可以使頁面中開了一個視窗顯示另一個頁面。

我們在Web應用中，經常會遇到這樣的iframe表單巢狀頁面，Frame標籤有frameset、frame、iframe三種，frameset跟其他普通標籤沒有區別，不會影響到正常的定位。而frame和iframe需要切換進去才能定位到其中的元素，這就相當於frame和iframe是當前頁面中巢狀的其他頁面。這時就需要通過switch_to.frame()方法，將當前定位的主體切換為 frame或iframe表單的內嵌頁面中。

2、iframe表單操作流程

假設：頁面上有A、B 兩個frame，其中B 在A 內，那麼定位B 中的內容則需要先到A，然後再到B。

下面frame.html檔案的程式碼中，裡面有個id為f1的frame，該頁面我們簡稱為frame 。而f1中又嵌入了id為f2的frame，該頁面我們簡稱為inner，該frame載入了百度的首頁。

首先我們進入頁面的時候，就已經在frame頁面中了，如果我們想要在inner頁面的百度搜尋框輸入內容，就要定位到inner頁面（inner的frame標籤），然後再進入到inner頁面中，然後定位inner頁面中的百度搜尋框，輸入內容。

如下圖所示：

image

注：

  • 進入瀏覽器直接就可以操作的頁面，就是最外層表單iframe。
  • 然後其他的表單從0開始，依次索引。

3、iframe表單操作常用方法

（1）進入表單

使用switch_to.frame()方法進入一個表單。

  1. 方式一：通過表單的id或name屬性切換進表單
    driver.switch_to.frame(value)或driver.switch_to_frame(value)（已過期）
  2. 方式二：先定位到表單元素，再切換進入。
    可以是各種方式定位到iframe表單元素。
    el = driver.find_element_by_xxx(value)
    然後再進入表單
    driver.switch_to.frame(el)或driver.switch_to_frame(el)（已過期）

（2）多表單切換

  1. 跳回最外層的頁面。
    driver.switch_to.default_content()
  2. 跳回上層的頁面。
    driver.switch_to.parent_frame()

4、表單操作示例

需求：在163郵箱登陸頁面中，操作iframe元素。

"""
1.學習目標:
    必須掌握iframe表單操作方式
2.語法(操作步驟)
    2.1 確定即將操作的元素是否屬於iframe
        F12中elements最下方檢視是否有iframe/frame標籤名
    2.2 定位iframe/frame標籤
    2.3 進入iframe
        driver.switch_to.frame(引數)
        引數:
            當iframe標籤有id/name屬性時,引數=id/name的屬性值,無需定位。
                driver.find_element_by_id("idframe")
            當iframe標籤沒有id/name屬性時,先定位,引數=定位元素
                el_frame = driver.find_element_by_xpath("//iframe[starts-with(@id,'x-URS-iframe')]")
                driver.switch_to.frame(el_frame)
            當明確頁面中iframe索引值,引數=索引值
                driver.switch_to.frame(0)  # 引數=索引值  從0開始
                (也就是頁面中有幾個iframe，和你需要的iframe的索引，你都知道就可以用)
    2.4 操作iframe中的元素
        和普通頁面一樣
    2.5 退出iframe
        退出到上一層   driver.switch_to.parent_frame()
        退出到最外層 driver.switch_to.default_content()
        具體跳出到哪一層,根據下一步操作而定。
3.需求
    在163郵箱登陸頁面中，操作iframe元素。
4.iframe在web中的應用位置
    1.一般的登入,163郵箱,qq郵箱,
    2.發郵件(富文字編輯器一般是嵌入到頁面中的，也就是郵件的正文也是iframe),
    3.後臺管理選單欄
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "https://mail.163.com/"
driver.get(url)
sleep(2)

# 4.iframe操作
# 4.1 進入iframe表單
# 4.1.1 方式一：先定位iframe表單再進入
el_frame = driver.find_element_by_xpath("//iframe[starts-with(@id,'x-URS-iframe')]")
# print(el_frame.get_attribute("outerHTML"))
# 4.1.2 切換進入表單中
driver.switch_to.frame(el_frame)

# 4.1.3 方式二：直接通過id或name進入表單中
# 如下id不正確
# driver.switch_to.frame('x-URS-iframe')

# 4.1.4 方式三：通過索引值切換進入表單
# 引數=索引值  從0開始
# driver.switch_to.frame(0)  # 可用

# 4.2 操作表單中的元素
# 4.2.1 定位賬號輸入框和密碼輸入框
email = driver.find_element_by_css_selector("input[name='email']")
password = driver.find_element_by_css_selector("input[name='password']")
sleep(2)

# 4.2.2 填寫內容
email.clear()
email.send_keys("Selenium")
password.clear()
password.send_keys("Selenium")
sleep(2)

# 4.3 跳出頁面中表單
# 因為頁面中只有一層iframe，所以跳到上一層和最外層一樣效果。
# 4.3.1 跳到最外層
driver.switch_to.default_content()

# 4.3.2 跳到上一層
# driver.switch_to.default_content()
sleep(2)

# 4.4 點選網易首頁
driver.find_element_by_link_text("網易首頁").click()
sleep(3)

# 5.關閉瀏覽器
driver.quit()

相關文章