[python][selenium] Web UI自動化切換iframe框架以及瀏覽器操作切換視窗和處理彈窗

老常的轨迹發表於2024-09-11
PythonWebUI框架瀏覽器

文章的兩部分：一、頁面切換iframe框架
       二、瀏覽器操作：切換視窗、處理彈窗

一、頁面切換iframe框架

3種iframe的切換方法：

1、切換iframe的方法：switch_to.frame
  入參有4種：
  1.1、id
  1.2、name
  1.3、index索引
  1.4、iframe元素物件

2、返回主文件(最外層的頁面)的方法：switch_to.default_content()
3、返回到上一級iframe的方法：switch_to.parent_frame()

簡單說下：
第一點：iframe元素是用來在當前html裡的其他元素中，再巢狀個html。
因為webdriver預設只能在一個頁面上識別和操作元素，所以無法直接定位和操作主文件html和內嵌html，
要定位操作iframe內嵌頁面的元素，就需要先切換到iframe。

第二點：透過檢視原始碼，可以看到傳id和name它裡面是做了呼叫find_element方法，
也就是說方法最終需要的是iframe物件，然後把切換的操作封裝成一個命令，而這個命令是json格式的。
[python][selenium] Web UI自動化切換iframe框架以及瀏覽器操作切換視窗和處理彈窗

下面我用網易雲音樂首頁來做demo，直接用程式碼+註釋演示說明。

1、切換iframe的方法的4種入參

1.1、id

使用iframe元素的 id屬性來傳參。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(10)
driver.get("https://music.163.com/")

# 操作：從頁面主文件切換到 id="g_iframe" 的iframe，定位網易雲音樂輪播圖右箭頭按鈕，用for迴圈點選30次
driver.switch_to.frame("g_iframe")
ele = driver.find_element(By.CLASS_NAME, "btnr")
for i in range(30):
    ele.click()
    sleep(0.1)

sleep(3)
driver.quit()

1.2、name

使用iframe元素的 name屬性來傳參。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
# driver.implicitly_wait(10) # 加了隱式等待後開啟頁面要等10秒左右才定位，不加就很快就定位了，原因還在研究中
driver.get("https://music.163.com/")

# 操作：從頁面主文件切換到 name="contentFrame" 的iframe，點選"使用者登入"按鈕
driver.switch_to.frame("contentFrame")
driver.find_element(By.ID, "index-enter-default").click()

sleep(3)
driver.quit()

1.3、index索引

使用索引進行傳參，iframe在頁面上是第幾個就傳第幾，就算是巢狀了多層iframe也可以直接索引到。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(10)
driver.get("https://music.163.com/")

# 操作：從頁面主文件切換到第1個iframe，點選熱門推薦的"更多"按鈕
driver.switch_to.frame(0)
driver.find_element(By.CSS_SELECTOR, 'span > a[href="/discover/playlist/"]').click()

sleep(3)
driver.quit()

傳遞一個iframe元素物件作為引數，需要先使用元素定位找到iframe。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(10)
driver.get("https://music.163.com/")

# 操作：定位到iframe元素，把元素傳給switch_to.frame方法切換iframe，點選頁面底部"音樂開放平臺"
iframe = driver.find_element(By.CSS_SELECTOR, "body > iframe")
driver.switch_to.frame(iframe)
driver.find_element(By.CSS_SELECTOR, 'a[href="https://developer.music.163.com/st/developer"]').click()

sleep(3)
driver.quit()

2、返回主文件(最外層的頁面)

如果iframe裡面還有一個iframe，這時你不想操作上一層iframe，想直接回到主文件就可以使用這個方法。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(10)
driver.get("https://music.163.com/")

# 先切換iframe
driver.switch_to.frame("g_iframe")
# 切換回主文件（把這句註釋掉，定位主文件元素就會報異常：NoSuchElementException）
driver.switch_to.default_content()
# 定位主文件的搜尋框，輸入內容
driver.find_element(By.ID, "srch").send_keys("空之軌跡")

sleep(3)
driver.quit()

3、返回到上一級iframe

如果iframe裡面還有一個iframe，這時你不想回到主文件，想操作上一層iframe就可以使用這個方法。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(10)
driver.get("https://music.163.com/")

# 先切換iframe (多層iframe的頁面不好找，，將就下吧，原理一樣的)
driver.switch_to.frame("g_iframe")
# 切換到上一級iframe（把這句註釋掉，定位上一級iframe的元素就會報異常：NoSuchElementException）
driver.switch_to.parent_frame()
# 定位主文件的搜尋框，輸入內容
driver.find_element(By.ID, "srch").send_keys("空之軌跡")

sleep(3)
driver.quit()

二、瀏覽器操作：切換視窗、處理彈窗

一、操作瀏覽器彈窗：
彈窗一般分為兩種：瀏覽器自帶彈窗 和 html的自定義彈窗。html的彈窗使用元素定位可以找到，瀏覽器彈窗就需要使用switch_to.alert的方法。
1、瀏覽器彈窗的3個種類：
告警框：alert，只有資訊和一個確認按鈕。
確認框：Confirm，有資訊、確認和取消按鈕。
提示框：Prompt，有輸入框可以輸入文字，有資訊、確認和取消按鈕。

2、switch_to.alert裡面處理瀏覽器彈窗的4個方法：
switch_to.alert.accept()：彈窗確認按鈕
switch_to.alert.dismiss()：彈窗取消按鈕
switch_to.alert.send_keys()：向彈窗輸入框輸入資訊
switch_to.alert.text：獲取彈窗上的資訊內容
瀏覽器3種彈窗都是用這4種方法處理。

二、操作瀏覽器標籤頁：
1、current_window_handle：獲取當前標籤頁的控制代碼。
2、window_handles：獲取所有標籤頁的控制代碼。
3、switch_to.window(handle)：切換到指定控制代碼的標籤頁。
4、close()：關閉當前標籤頁。

直接用程式碼+註釋演示說明
菜鳥教程網站裡提供的線上編輯器可以用來做demo演示，但缺點是頁面完全載入完比較慢，下面演示程式碼執行過程需要耐心等待下。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(10)
driver.get("https://www.runoob.com/js/js-popup.html")

# 點選按鈕後，頁面在新的標籤頁開啟
print("切換前頁面handle：" + driver.current_window_handle)
driver.find_element(By.CSS_SELECTOR, 'a[href="/try/try.php?filename=tryjs_prompt"]').click()

# 獲取到瀏覽器的所有標籤頁，以列表的型別返回
handles = driver.window_handles
print(handles)
# 在switch_to.window()方法,傳入要切換的視窗的控制代碼，就能切換到這個標籤頁
driver.switch_to.window(handles[1])
# 切換後，列印當前標籤頁的handle、url、title資訊來確認切換成功
print("切換後頁面handle：" + driver.current_window_handle)
print("current_url：" + driver.current_url)
print("title：" + driver.title)

# 切換到iframe裡
driver.switch_to.frame(0)

# 點選按鈕後，彈出一個提示框
driver.find_element(By.XPATH, '//body/button').click()
# 獲取提示框的資訊內容並列印
print(driver.switch_to.alert.text)
sleep(3)
# 點選提示框的取消按鈕
driver.switch_to.alert.dismiss()

sleep(2)

# 再次點選按鈕，彈出提示框
driver.find_element(By.XPATH, '//body/button').click()
# 向提示框的輸入框輸入內容，輸入資訊不會顯示在輸入框
driver.switch_to.alert.send_keys("空之軌跡")
sleep(3)
# 點選提示框的確認按鈕
driver.switch_to.alert.accept()
sleep(2)

# 執行完畢，關閉當前標籤頁
driver.close()

sleep(2)
# 關閉整個瀏覽器
driver.quit()

關聯文章：Web UI自動化8種頁面元素定位方式

相關文章