[python][selenium] Web UI自動(dòng)化切換iframe框架以及瀏覽器操作切換窗口和處理彈窗

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

一、頁面切換iframe框架

3種iframe的切換方法：

1、切換iframe的方法：switch_to.frame
入?yún)⒂?種：
1.1、id
1.2、name
1.3、index索引
1.4、iframe元素對象

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

簡單說下：
第一點(diǎn)：iframe元素是用來在當(dāng)前html里的其他元素中，再嵌套個(gè)html。
因?yàn)閣ebdriver默認(rèn)只能在一個(gè)頁面上識(shí)別和操作元素，所以無法直接定位和操作主文檔html和內(nèi)嵌html，
要定位操作iframe內(nèi)嵌頁面的元素，就需要先切換到iframe。

第二點(diǎn)：通過查看源碼，可以看到傳id和name它里面是做了調(diào)用find_element方法，
也就是說方法最終需要的是iframe對象，然后把切換的操作封裝成一個(gè)命令，而這個(gè)命令是json格式的。

下面我用網(wǎng)易云音樂首頁來做demo，直接用代碼+注釋演示說明。

1、切換iframe的方法的4種入?yún)?

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，定位網(wǎng)易云音樂輪播圖右箭頭按鈕，用for循環(huán)點(diǎn)擊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，點(diǎn)擊"用戶登錄"按鈕
driver.switch_to.frame("contentFrame")
driver.find_element(By.ID, "index-enter-default").click()

sleep(3)
driver.quit()

1.3、index索引

使用索引進(jìn)行傳參，iframe在頁面上是第幾個(gè)就傳第幾，就算是嵌套了多層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個(gè)iframe，點(diǎn)擊熱門推薦的"更多"按鈕
driver.switch_to.frame(0)
driver.find_element(By.CSS_SELECTOR, 'span > a[href="/discover/playlist/"]').click()

sleep(3)
driver.quit()

1.4、iframe元素對象

傳遞一個(gè)iframe元素對象作為參數(shù)，需要先使用元素定位找到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，點(diǎn)擊頁面底部"音樂開放平臺(tái)"
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里面還有一個(gè)iframe，這時(shí)你不想操作上一層iframe，想直接回到主文檔就可以使用這個(gè)方法。

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")
# 切換回主文檔（把這句注釋掉，定位主文檔元素就會(huì)報(bào)異常：NoSuchElementException）
driver.switch_to.default_content()
# 定位主文檔的搜索框，輸入內(nèi)容
driver.find_element(By.ID, "srch").send_keys("空之軌跡")

sleep(3)
driver.quit()

3、返回到上一級(jí)iframe

如果iframe里面還有一個(gè)iframe，這時(shí)你不想回到主文檔，想操作上一層iframe就可以使用這個(gè)方法。

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")
# 切換到上一級(jí)iframe（把這句注釋掉，定位上一級(jí)iframe的元素就會(huì)報(bào)異常：NoSuchElementException）
driver.switch_to.parent_frame()
# 定位主文檔的搜索框，輸入內(nèi)容
driver.find_element(By.ID, "srch").send_keys("空之軌跡")

sleep(3)
driver.quit()

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

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

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

二、操作瀏覽器標(biāo)簽頁：
1、current_window_handle：獲取當(dāng)前標(biāo)簽頁的句柄。
2、window_handles：獲取所有標(biāo)簽頁的句柄。
3、switch_to.window(handle)：切換到指定句柄的標(biāo)簽頁。
4、close()：關(guān)閉當(dāng)前標(biāo)簽頁。

直接用代碼+注釋演示說明
菜鳥教程網(wǎng)站里提供的在線編輯器可以用來做demo演示，但缺點(diǎn)是頁面完全加載完比較慢，下面演示代碼執(zhí)行過程需要耐心等待下。

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")

# 點(diǎn)擊按鈕后，頁面在新的標(biāo)簽頁打開
print("切換前頁面handle：" + driver.current_window_handle)
driver.find_element(By.CSS_SELECTOR, 'a[href="/try/try.php?filename=tryjs_prompt"]').click()

# 獲取到瀏覽器的所有標(biāo)簽頁，以列表的類型返回
handles = driver.window_handles
print(handles)
# 在switch_to.window()方法,傳入要切換的窗口的句柄，就能切換到這個(gè)標(biāo)簽頁
driver.switch_to.window(handles[1])
# 切換后，打印當(dāng)前標(biāo)簽頁的handle、url、title信息來確認(rèn)切換成功
print("切換后頁面handle：" + driver.current_window_handle)
print("current_url：" + driver.current_url)
print("title：" + driver.title)

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

# 點(diǎn)擊按鈕后，彈出一個(gè)提示框
driver.find_element(By.XPATH, '//body/button').click()
# 獲取提示框的信息內(nèi)容并打印
print(driver.switch_to.alert.text)
sleep(3)
# 點(diǎn)擊提示框的取消按鈕
driver.switch_to.alert.dismiss()

sleep(2)

# 再次點(diǎn)擊按鈕，彈出提示框
driver.find_element(By.XPATH, '//body/button').click()
# 向提示框的輸入框輸入內(nèi)容，輸入信息不會(huì)顯示在輸入框
driver.switch_to.alert.send_keys("空之軌跡")
sleep(3)
# 點(diǎn)擊提示框的確認(rèn)按鈕
driver.switch_to.alert.accept()
sleep(2)

# 執(zhí)行完畢，關(guān)閉當(dāng)前標(biāo)簽頁
driver.close()

sleep(2)
# 關(guān)閉整個(gè)瀏覽器
driver.quit()

關(guān)聯(lián)文章： Web UI自動(dòng)化8種頁面元素定位方式