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

2023-12-04 15:00:59

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