1.簡介
在使用appium寫app自動化的時候介紹toast的相關元素的定位，在Web UI測試過程中，也經常遇到一些toast，那么這個toast我們這邊如何進行測試呢？今天宏哥就分兩篇介紹一下。
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.2代碼設計
4.3參考代碼
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇（四十五）-java+ selenium自動化測試-web頁面定位toast-上篇（詳解教程） * * 2021年11月15日 */ public class TestToast { public static void main(String[] args) { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); WebDriver driver =null; try { driver =new ChromeDriver(); driver.get("file:///C:/Users/DELL/Desktop/test/toast.html"); driver.manage().window().maximize(); driver.findElement(By.id("anjing")).click(); WebElement elementText = driver.findElement(By.xpath("/html/body/div"));//（加粗字體根據實際定位的元素信息進行填寫） Thread.sleep(1000); String info = elementText.getText(); System.out.println(info); Thread.sleep(3000); } catch (Exception e) { e.printStackTrace(); } finally{ System.out.println("執行結束,關閉瀏覽器"); driver.quit(); } } }
4.4運行代碼
1.運行代碼，右鍵Run AS->Java Appliance，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
5.小結
宏哥個人感覺那個點擊暫停和Chrome的debug調試差不多，就是debug比較簡單，那個點擊暫停的麻煩。會調試看懂代碼的就用debug，不會的就用點擊暫停的方法。