1.簡介
在使用appium寫app自動化的時候介紹toast的相關元素的定位，在Web UI測試過程中，也經常遇到一些toast（出現之後一閃而過，不留下一點點痕跡），那麼這個toast我們這邊如何使用playwright進行定位測試呢？今天宏哥就分兩篇介紹一下。
2.什麼是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，不會的就用點擊暫停的方法。
好了，今天時間也不早了，宏哥就講解和分享到這裏，感謝您耐心的閱讀，希望對您有所幫助。