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类的元素了，它出现之后在我们一眨眼的瞬间，就消失不见了，不留下一点点痕迹，乍一看，无从下手，这要让我们如何去定位呢？不要着急，这种类似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.3assert 断言
断言（assert）：也就是所谓的assertion，是jdk1.4后加入的新功能。
assert为动词，assertion为名词，assert是java关键字，assertion是技术名称
断言 の 定义：
官话： 断言是编程术语，表示为一些布尔表达式，程序员相信在程序中的某个特定点该表达式值为真，可以在任何时候启用和禁用断言验证，因此可以在测试时启用断言而在部署时禁用断言。同样，程序投入运行后，最终用户在遇到问题时可以重新启用断言。 ——摘自百度百科【断言】
行话： 断言（Assertion）是一种调试程序的方式，断言可以在调试情况当错误排查，用于检查前条件，是我们的代码更加接近"契约式编程"
大白话： 就是为了检测我们程序自己疏忽写出来的bug啦，当断言报错我就知道这里是我写错哒。
它主要使用在代码开发和测试时期，用于对某些关键数据的判断，如果这个关键数据不是你程序所预期的数据，程序就提出警告或退出。
当软件正式发布后，可以取消断言部分的代码。java中使用assert作为断言的一个关键字，这就可以看出java对断言还是很重视的，因为如果不是很重要的话，直接开发个类就可以了，没必要新定义一个关键字。
4.3.1代码设计
1.先获取内容，再用assert 进行断言。
4.3.2参考代码
package com.bjhg.playwright;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
/**
* @author 北京-宏哥
*
* @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
*
* 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-36-操作web页面定位toast-上篇（详细教程）
*
* 2025年08月26日
*/
public class Test_Toast {
public static void main(String[] args) {
// TODO Auto-generated method stub
try (Playwright playwright = Playwright.create()) {
//1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
//2.创建context
BrowserContext context = browser.newContext(new Browser.NewContextOptions().setIgnoreHTTPSErrors(true));
//创建page
Page page = context.newPage();
//3.浏览器访问demo
page.navigate("C:/Users/duhon/Desktop/test/toast.html");
Thread.sleep(300);
//4.定位页面的北京-宏哥，并点击
page.locator("#hongge").click();
//5.获取toast的内容
String toastText = page.locator("xpath=/html/body/div").innerText();
System.out.println(toastText);
//6.断言
System.out.println(toastText.equals("感谢关注：北京-宏哥"));//只有结果为true时，程序才可以继续执行
assert(toastText.equals("感谢关注：北京-宏哥"));
System.out.println("Test Pass");
Thread.sleep(100);
//5.关闭page
page.close();
//6.关闭browser
browser.close();
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
4.3.3运行代码
1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作（访问demo，弹出toast，toast消失不见）。如下图所示：
5.小结
宏哥个人感觉那个点击暂停和Chrome的debug调试差不多，就是debug比较简单，那个点击暂停的麻烦。会调试看懂代码的就用debug，不会的就用点击暂停的方法。
好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。
