『心善淵』Selenium3.0基礎 — 18、使用Selenium操作瀏覽器的彈窗

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

1、操作瀏覽器自帶彈窗

(1)說明

webdriver中處理JavaScript所生成的alertconfirm 以及prompt 彈窗是很簡單的。具體思路是使用switch_to.alert()方法定位到alert/confirm/prompt彈窗。然後使用text/accept/dismiss/send_keys 方法按需進行操做。

(2)常用操作

操作 說明
text 返回alert/confirm/prompt中的文字資訊。
accept() 點選彈窗中的確認按鈕。(接收警告)
dismiss() 點選彈窗中的取消按鈕,如果有的話。(彈窗中的)
send_keys() 輸入文字到警告框,alert/confirm沒有對話方塊就不能用了,不然會報錯。

(3)示例

頁面程式碼片段:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        button {
            padding: 8px;
            background: #f8f8f8;
            border-radius: 5px
        }
    </style>
</head>
<body>
<button type="button_alert" value="alert" id="alert" onclick="al()">button_alert</button>
<br>
<button type="button_confirm" value="confirm" id="confirm" onclick="con()">button_confirm</button>
<br>
<button type="button_prompt" value="prompt" id="prompt" onclick="pro()">button_prompt</button>
<br>

<script>
    function al() {
        alert('你是一個懂得愛自己的人!')
    }

    function con() {
        confirm('你是一個懂得愛自己的人?')
    }

    function pro() {
        prompt('請對自己說一句話!')
    }
</script>
</body>
</html>

指令碼程式碼:

"""
1.學習目標:
    掌握瀏覽器自帶彈窗的處理方法
2.語法(操作步驟):
    2.1 操作觸發彈窗的元素
    2.2 獲取彈窗(進入彈窗)
        alert = driver.switch_to.alert
    2.3 操作彈窗
        alert.text   獲取彈窗文字
        alert.accept() 點選彈窗確定按鈕
        alert.dismiss() 點選彈窗取消按鈕
        alert.send_keys("輸入內容") 在彈窗中輸入文字
3.需求
    在頁面中,操作瀏覽器自帶彈窗
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os

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

# 3.開啟頁面
url = "file:///" + os.path.abspath("./1.html")
driver.get(url)
sleep(2)

# 4.處理瀏覽器自帶彈窗
# 4.1 觸發彈窗的元素button_alert,完成text和accept()方法
# 4.1.1 定位alert按鈕,觸發彈窗
el = driver.find_element_by_id("alert")
el.click()
sleep(2)

# 4.1.2 獲取彈窗(進入彈窗)
alert = driver.switch_to.alert

# 4.1.3 獲取彈窗文字值
print("彈窗文字值:", alert.text)

# 4.1.4 點選彈窗確定按鈕
alert.accept()
sleep(2)

# 4.2 觸發彈窗的元素button_confirm,完成dismiss()方法
# 4.2.1 定位confirm按鈕,觸發彈窗
el = driver.find_element_by_id("confirm")
el.click()
sleep(2)

# 4.2.2 獲取彈窗(進入彈窗)
confirm = driver.switch_to.alert

# 4.2.3 獲取彈窗文字值
print("彈窗文字值:", confirm.text)

# 4.2.4 點選彈窗取消按鈕
confirm.dismiss()
sleep(2)

# 4.3 觸發彈窗的元素button_prompt,完成send_keys("輸入內容")方法
# 4.3.1 定位prompt按鈕,觸發彈窗
el = driver.find_element_by_id("prompt")
el.click()
sleep(2)

# 4.3.2 獲取彈窗(進入彈窗)
prompt = driver.switch_to.alert

# 4.3.3 獲取彈窗文字值
print("彈窗文字值:", prompt.text)

# 4.3.4 點選彈窗確定按鈕
prompt.send_keys("怎麼顯示不了")
sleep(2)

# 4.3.5 點選彈窗確定按鈕
prompt.accept()
sleep(2)

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

注意:prompt彈窗輸入框,Chrome不顯示輸入文字。

Python版本 3.7.7

  • Edge版本:18.18362,沒有問題。
  • Firefox版本:76.0.1 (64 位),沒有問題。
  • Chrome版本:74.0.3729.131(正式版本)32位,有問題。

2、操作瀏覽器頁面自定義彈窗

由於alert彈窗不美觀,現在大多數網站都會使用自定義彈窗,使用Selenium自帶的方法就駕馭不了了,此時就要搬出JS方法來進行處理。

(1)需求

需求:去掉淘寶首頁的自定義彈窗

淘寶首頁的自定義彈窗如下:

image

提示:網頁中彈出的對話方塊,也屬於頁面自定義彈窗,都可以用下面方式處理。

(2)實現方式

大家能看到,上圖中的這種彈窗就是自定義彈窗的表現形式,處理這種彈窗可以利用HTMLDOMStyle物件中的一個display屬性來處理,可以設定元素如何被顯示。

詳細解釋可以參考:http://www.w3school.com.cn/jsref/prop_style_display.asp

display的值設定成none:此元素不會被顯示,就可以去除這個彈窗了。

注意:手動頁面重新整理之後還會出現彈窗。

步驟如下:

# JavaScript語法
js = 'document.getElementById("div_company_mini").style.display="none";'

# 使用Python執行JS語句
driver.execute_script(js1)

提示

document.getElementById()JS獲取元素的方式,在JS獲取元素方式中,就只有ById()獲取的是一個元素。

其他獲取元素的方式,都獲取的是結果集,需要獲取具體元素的時候,注意要使用索引。

簡單舉例:

  1. 通過ID獲取(getElementById
  2. 通過name屬性(getElementsByName
  3. 通過標籤名(getElementsByTagName
  4. 通過類名(getElementsByClassName

(3)示例

"""
1.學習目標:
    瞭解關閉web頁面自定義彈窗
2.語法(操作步驟)
    2.1 找到自定義彈窗的元素,
        修改樣式:tyle.display='none'
        display='none'表示不顯示樣式,目的是將彈窗隱藏
    2.2 操作步驟
        js = document.getElementById("id屬性值").style.display="none"
        或者其他的JS獲取元素方式
        driver.execute_script(js)
3.需求
    隱藏頁面自定義彈窗
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

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

# 3.開啟頁面
url = "https://www.taobao.com/"
driver.get(url)
sleep(5)

# 4.關閉自定義彈窗
js = 'document.querySelector("body > div.tbh-fixedtool.J_Module > div").style.display="none"'
driver.execute_script(js)
sleep(2)

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

相關文章