《最新出爐》系列初窺篇-Python+Playwright自動化測試-16-處理模態對話框彈窗

1.簡介

我們在日常工作中，會經常遇到彈出警告框的問題，彈框無法繞過，必須處理纔可以執行後續的測試，所以彈框處理也是我們必須掌握的一個知識。宏哥在java+selenium系列文章中介紹過這部分內容。那麼，playwright對於彈框的處理是怎樣的？是否比selenium更加簡單呢？下面我們就來介紹一下playwright對於彈框的處理。

2.彈框分類

彈框通常分爲3種，分別爲alert，confirm，promot。

alert彈框：只有信息和確定按鍵
confirm彈框：在alert彈窗基礎上增加了取消按鈕
prompt彈框：在confirm的基礎上增加了可輸入文本內容的功能

3.dialog 彈窗

3.1dialog屬性和方法

accept()當對話框被接收時返回。

dialog.accept()
dialog.accept(**kwargs)

參數 prompt_text（可選), 要在提示中輸入的文本。如果對話框 type 沒有提示，則不會產生任何影響.

default_value, 如果對話框是提示的，則返回默認提示值。否則，返回空字符串。

dialog.default_value

dismiss 關閉對話框

dialog.dismiss()

message 獲取對話框中顯示的消息

dialog.message

type返回對話框的類型，可以是alert, beforeunload, confirm或 prompt其中一個

dialog.type

3.2dialog 事件監聽

playwright 框架可以監聽dialog事件，不管你alert 什麼時候彈出來，監聽到事件就自動處理了。

當出現 JavaScript 對話框時發出，例如alert、prompt。監聽器必須dialog.accept()或dialog.dismiss()對話框 - 否則頁面將凍結等待對話框，並且單擊等操作將永遠不會完成。

#彈窗中確認
page.on("dialog", lambda dialog: dialog.accept())
page.locator("button").click()
#彈窗中取消
page.on("dialog", lambda dialog: dialog.dismiss())
page.locator("button").click()

注:當沒有page.on("dialog")偵聽器存在時，所有對話框都會自動關閉。

語法如下：

page.on("dialog", handler)

3.模態框的定義

　　模態對話框（Modal Dialogue Box，又叫做模式對話框），是指在用戶想要對對話框以外的應用程序進行操作時，必須首先對該對話框進行響應。如單擊【確定】或【取消】按鈕等將該對話框關閉。一般來說，Windows應用程序中，對話框分爲模態對話框和非模態對話框兩種。二者的區別在於當對話框打開時，是否允許用戶進行其他對象的操作。

3.1警告框

警告框經常用於確保用戶可以得到某些信息。

當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。

語法：

alert("文本")

3.2確認框

確認框用於使用戶可以驗證或者接受某些信息。

當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

如果用戶點擊確認，那麼返回值爲 true。如果用戶點擊取消，那麼返回值爲 false。

語法：

confirm("文本")

3.3提示框

提示框經常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那麼返回值爲輸入的值。如果用戶點擊取消，那麼返回值爲 null。

語法：

prompt("文本","默認值")

3.4測試頁面準備

ModalDialogueBox.html頁面參考代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模態框</title>
</head>
<script type="text/javascript">
window.onload = function(){
    document.getElementById("input_1").onclick = function(){
        alert("您關注了‘北京宏哥’微信公衆號！");
    };
    document.getElementById("input_2").onclick = function(){
        confirm("確定關注微信公衆號：北京宏哥？")
    };
    document.getElementById("input_3").onclick = function(){
        prompt("請輸入微信公衆號：","北京宏哥");
    };
}

</script>
<style>
.button1 {
    background-color: #f44336; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 28px;
    margin-bottom: 100px;
    text-decoration:none;
    color: white;
}
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#myAnchor
{
  text-decoration:none;
  color: white;
}
</style>
<body>
    <div style=" text-align:center;">
        <div style="height: 100px;margin-top: 200px;">
            <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
            測試練習模態框的處理：<br><br>
            1.警告框
            <input class="button" type="button" id="input_1" value="點擊彈出警告框"><br><br>
            2.確認框
            <input class="button" type="button" id="input_2" value="點擊彈出確認框"><br><br>
            3.提示框
            <input class="button" type="button" id="input_3" value="點擊彈出提示框"><br><br>
        </div>
    </div
</body>
</html>

瀏覽器打開頁面如下圖所示：

4.牛刀小試

下邊宏哥就利用上邊準備好的模態框例子進行一下演示。首先演示當監聽器存在時，我們如何處理。

監聽器存在

4.1代碼設計

4.2參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-07-14
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-15-處理模態對話框彈窗
'''

# 3.導入模塊
from playwright.sync_api import sync_playwright

def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch(headless=False, slow_mo=3000)
    page = browser.new_page()
    page.goto("C:/Users/DELL/Desktop/test/ModalDialogueBox.html")
    page.on("dialog", lambda dialog: dialog.accept())
    page.on("dialog", lambda dialog: print(dialog.message))
    # 點擊彈出警告框
    page.locator("#input_1").click()
    # 點擊彈出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_2").click()
    # 點擊彈出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_3").click()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.3運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：

監聽器不存在

4.4代碼設計

4.5參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-07-14
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-15-處理模態對話框彈窗
'''

# 3.導入模塊
from playwright.sync_api import sync_playwright

def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch(headless=False, slow_mo=3000)
    page = browser.new_page()
    page.goto("C:/Users/DELL/Desktop/test/ModalDialogueBox.html")
    # page.on("dialog", lambda dialog: dialog.accept())
    # page.on("dialog", lambda dialog: print(dialog.message))
    # 點擊彈出警告框
    page.locator("#input_1").click()
    # 點擊彈出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_2").click()
    # 點擊彈出警告框
    page.wait_for_timeout(5000)
    page.locator("#input_3").click()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.6運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：

5.項目實戰

宏哥繼續用java+selenium中的一個alert例子（http://news.cyol.com/node_60799.htm），只有點擊確定這個按鈕，alert框纔會消失。

5.1參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-07-14
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-15-處理模態對話框彈窗
'''

# 3.導入模塊
from playwright.sync_api import sync_playwright

def run(playwright):
    chromium = playwright.chromium
    browser = chromium.launch(headless=False, slow_mo=3000)
    page = browser.new_page()
    page.on("dialog", lambda dialog: dialog.accept())
    page.on("dialog", lambda dialog: print(dialog.message))
    page.goto("http://news.cyol.com/node_60799.htm")
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

5.2運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：

6.小結

page.on（“dialog”）監聽器必須處理該對話框。否則您的操作將停止，無論是 locator.click（）還是其他內容。這是因爲Web中的對話框是模態，因此在處理它們之前會阻止進一步的頁面執行。

例如下邊宏哥演示的是：只打印message，而沒有處理就會一直卡在那個彈出框不繼續往下操作了。宏哥就是將處理代碼註釋，打印代碼留下。不過這種情況你手動點擊“確定”，代碼也是可以向下執行的。

# page.on("dialog", lambda dialog: dialog.accept())
page.on("dialog", lambda dialog: print(dialog.message))

運行代碼後電腦端的瀏覽器的動作（可以看到卡主不動了，也就是代碼不向下執行了）。如下圖所示：

好了，今天時間也不早了，宏哥就講解和分享到這裏，感謝您耐心的閱讀，希望對您有所幫助。

《最新出爐》系列初窺篇-Python+Playwright自動化測試-16-處理模態對話框彈窗

1.簡介

2.彈框分類

3.dialog 彈窗

3.1dialog屬性和方法

3.2dialog 事件監聽

3.模態框的定義

3.1警告框

3.2確認框

3.3提示框

3.4測試頁面準備

4.牛刀小試

4.1代碼設計

4.2參考代碼

4.3運行代碼

4.4代碼設計

4.5參考代碼

4.6運行代碼

5.項目實戰

5.1參考代碼

5.2運行代碼

6.小結

這個博客不用了

《最新出爐》系列初窺篇-Python+Playwright自動化測試-16-處理模態對話框彈窗

《最新出爐》系列入門篇-Python+Playwright自動化測試-15-playwright處理瀏覽器多窗口切換

《最新出爐》系列初窺篇-Python+Playwright自動化測試-14-playwright操作iframe-番外篇

《最新出爐》系列初窺篇-Python+Playwright自動化測試-13-playwright操作iframe-下篇

《最新出爐》系列初窺篇-Python+Playwright自動化測試-12-playwright操作iframe-中篇

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結