《最新出爐》系列初窺篇-Python+Playwright自動化測試-35-處理web頁面定位toast-上篇

宏哥發表於2023-12-04

1.簡介

在使用appium寫app自動化的時候介紹toast的相關元素的定位,在Web UI測試過程中,也經常遇到一些toast(出現之後一閃而過,不留下一點點痕跡),那麼這個toast我們這邊如何使用playwright進行定位測試呢?今天宏哥就分兩篇介紹一下。

2.什麼是toast?

  Android中的Toast是一種簡易的訊息提示框。當檢視顯示給使用者,在應用程式中顯示為浮動。和Dialog不一樣的是,它永遠不會獲得焦點,無法被點選。使用者將可能是在中間鍵入別的東西。Toast類的思想就是儘可能不引人注意,同時還向使用者顯示資訊,希望他們看到。而且Toast顯示的時間有限,Toast會根據使用者設定的顯示時間後自動消失。在Web中和在Android差不多一樣。toast屬於一種輕量級的反饋,常常以小彈框的形式出現,一般出現1到3秒會自動消失,可以出現在螢幕上中下任意位置,首先來看下web頁面上的toast是什麼樣子的。如下圖所示:

3.定位toast

如何定位這種toast類的元素了,在我們一眨眼的瞬間,就消失不見了,不留下一點點痕跡。不要著急聽宏哥給你慢慢道來。

3.1第一種方法

1.怎麼定位呢?宏哥給大家介紹一個小技巧。開啟chrome進入F12頁面進入到Sources,如下圖所示:

2.點選暫停,然後在透過Elements定位。如下圖所示:

3.點選“點選關注”按鈕後,然後再點選“下一步”按鈕,直到出現toast元素:“感謝關注:北京-宏哥”。如下圖所示:

4.切換到“Elements”介面,透過正常定位來檢視元素,如下圖所示:

3.2第二種方法

1.怎麼定位呢?宏哥給大家介紹一個小技巧。開啟chrome進入F12頁面進入到Sources,如下圖所示:

2.在JavaScript中找到讓toast元素消失的程式碼,點選程式碼行前邊,打一個斷點。如下圖所示:

3.點選“點選關注”按鈕後,程式碼執行到斷點處停止,然後出現toast元素:“感謝關注:北京-宏哥”,不會消失。如下圖所示:

4.切換到“Elements”介面,透過正常定位來檢視元素,如下圖所示:

4.自動化專案實戰

宏哥找了好久沒有找到,宏哥就參照網上的toast原始碼修改給一個小demo,進行自動化測試。

4.1demo頁面的HTML程式碼

1.html程式碼:toast.html。如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>北京-宏哥</title>

</head>
<style>
    #hongge {
    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;
}
</style>
<center> 
<body>
    <button id="hongge" onclick="clickme();">點選關注</but-ton>  
</body>
</center>
<script>  

function showToast(msg,duration){  
    duration=isNaN(duration)?3000:duration;  
    var m = document.createElement('div');  
    m.innerHTML = msg;  
    m.style.cssText="width:60%; min-width:180px; background:#000; opacity:0.6; height:auto;min-height: 30px; color:#fff; line-height:30px; text-align:center; border-radius:4px; position:fixed; top:30%; left:20%; z-index:999999;";  
    document.body.appendChild(m);  
    setTimeout(function() {  
        var d = 0.5;  
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';  
        m.style.opacity = '0';  
        setTimeout(function() { document.body.removeChild(m) }, d * 1000);  
    }, duration);  
}  

function clickme(){
    showToast("感謝關注:北京-宏哥",3000);
}

</script>   
</html>

4.2expect 斷言

4.2.1程式碼設計

斷言toast的訊息框內容,可以直接用expect 斷言。

4.2.2參考程式碼
# coding=utf-8?

# 1.先設定編碼,utf-8可支援中英文,如上,一般放在第一行

# 2.註釋:包括記錄建立時間,建立人,專案名稱。
'''
Created on 2023-11-19
@author: 北京-宏哥
公眾號:北京宏哥
Project: 《《最新出爐》系列初窺篇-Python+Playwright自動化測試-34-處理web頁面定位toast-上篇
'''

# 3.匯入模組
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("C:/Users/DELL/Desktop/test/toast.html")
    page.wait_for_timeout(3000)
    page.locator("#hongge").click()
    #斷言
    expect(page.locator('xpath=/html/body/div')).to_have_text("感謝關注:北京-宏哥")
    page.wait_for_timeout(3000)
    context.close()
    browser.close()
with sync_playwright() as playwright:
    run(playwright)
4.2.3執行程式碼

1.執行程式碼,右鍵Run'Test',控制檯輸出,如下圖所示:

2.執行程式碼後電腦端的瀏覽器的動作。如下圖所示:

4.3assert 斷言

4.3.1程式碼設計

先獲取內容,再用assert 斷言也可以

4.3.2參考程式碼
# coding=utf-8?

# 1.先設定編碼,utf-8可支援中英文,如上,一般放在第一行

# 2.註釋:包括記錄建立時間,建立人,專案名稱。
'''
Created on 2023-11-19
@author: 北京-宏哥
公眾號:北京宏哥
Project: 《《最新出爐》系列初窺篇-Python+Playwright自動化測試-34-處理web頁面定位toast-上篇
'''

# 3.匯入模組
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("C:/Users/DELL/Desktop/test/toast.html")
    page.wait_for_timeout(3000)
    page.locator("#hongge").click()
    page.wait_for_timeout(3)
    toastText = page.locator('xpath=/html/body/div').inner_text()
    print(f"toast訊息框內容: {toastText}")
    #斷言
    assert toastText == '感謝關注:北京-宏哥'
    page.wait_for_timeout(3000)
    context.close()
    browser.close()
with sync_playwright() as playwright:
    run(playwright)
4.3.3執行程式碼

1.執行程式碼,右鍵Run'Test',控制檯輸出,如下圖所示:

2.執行程式碼後電腦端的瀏覽器的動作。如下圖所示:

5.小結

宏哥個人感覺那個點選暫停和Chrome的debug除錯差不多,就是debug比較簡單,那個點選暫停的麻煩。會除錯看懂程式碼的就用debug,不會的就用點選暫停的方法。

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