《刚刚问世》系列初窥篇-Java+Playwright自动化测试-37-操作web页面定位toast-下篇（详细教程）

1.简介

按理说，现在这种一闪而过的toast的已经相当普及或者是见怪不怪了，应该网上的大网站会用到的，尤其是在一些网站的登录或者注册的时候，这个就是最常用的，因为提示了错误而不需要用户自己去点击消除提示框，从而方便了用户简化操作，就可以给用户一个更好体验感受。偶然的在一次租房网站中，看到了这种场景，所以宏哥决定将其拿来主义，进行演示实践一下。

2.网站

事先声明啊，宏哥没有收他们的广告费啊，纯粹是为了学习和实战演示的。因为之前得文章中用到过，但是这次不知道为啥自动化代码运行后一直转圈。。。。最后报错超时了。然后宏哥试了一下不用代码正常访问在登录页面也是一直转圈。所以好像不能用了，于是宏哥在别的地方找了一个在线的不同的toast元素的demo来给小伙伴或者童鞋们演示一下。

2.1demo1

1.被测网址的地址：

www.jq22.com/demo/toast2…

2.网页点击效果（点击弹出提示框或者加载中的提示框后自动消失）如下图：

2.2demo2

1.被测网址的地址：

www.jq22.com/demo/jquery…

2.网页点击效果（点击弹出带有进度条的提示框，进度条走完，提示框自动消失）如下图：

3.demo1实战

今天就利用上边的实际网站demo1，进行讲解和演示一下，同时来巩固一下前边的知识，温故而知新。

3.1代码设计

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.FrameLocator;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-37-操作web页面定位toast-下篇（详细教程）
 *
 * 2025年09月02日
 */

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();
            //创建page
            Page page = context.newPage();
            //3.浏览器访问demo
            page.navigate("https://www.jq22.com/demo/toast202008182346");
            Thread.sleep(300);
            //4.定位页面
            //xpath 匹配
            page.locator("#toast").click();
            Locator toastText = page.locator("#toastId").getByText("请打开麦克风");
            System.out.println("Toast text is:"+toastText.innerText());
            Thread.sleep(6000);
            page.locator("#toast1").click();
            Locator toastText1 = page.locator("#toastId").getByText("停留5秒再消失");
            System.out.println("Toast1 text is:"+toastText1.innerText());
            Thread.sleep(6000);
            page.locator("#toast2").click();
            Locator toastText2 = page.locator("#toastId").getByText("请打开麦克风");
            System.out.println("Toast2 text is:"+toastText2.innerText());
            System.out.println("Test Pass");
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

3.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（访问demo1，逐个点击弹出toast，toast逐个消失不见）。如下图所示：

4.demo2实战

今天就利用上边的实际网站demo2，进行讲解和演示一下，同时来巩固一下前边的知识，温故而知新。

4.1代码设计

4.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.FrameLocator;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-37-操作web页面定位toast-下篇（详细教程）
 *
 * 2025年09月02日
 */

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();
            //创建page
            Page page = context.newPage();
            //3.浏览器访问demo
            page.navigate("https://www.jq22.com/demo/jqueryToast201708310012");
            Thread.sleep(300);
            //4.定位页面
            //xpath 匹配
            page.locator("//html/body/a").click();
            Locator toastText = page.locator("//html/body/div/p[2]").getByText("this is a test message.");
            System.out.println("Toast text is:"+toastText.innerText());
            Thread.sleep(1000);
            System.out.println("Test Pass");
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

4.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（访问demo2，弹出toast，toast消失不见）。如下图所示：

5.小结

这里宏哥再次提醒小伙伴或者童鞋们，要注意iframe的陷阱，否则定位一辈子也定位不到元素，还有就是要注意iframe里toast的定位方法。本来demo的网站是带有iframe的，宏哥为了省事就单独将其拎出来了。小伙伴或者童鞋们要灵活运动定位的方法。尤其是xpath定位时要注意起始位是双线杠，单斜杠会报错的。还有就是定位toast可以按宏哥前边讲解的方法定位，当然了有些简单的例如本篇文章中的demo1，宏哥为了省事就直接在F12时候，用肉眼观察到了出现和消失的元素，刚刚能看到其id，但是demo2宏哥也想偷懒用类似的办法，结果还没有等宏哥观察到就消失，最后无奈没有办法，还是老老实实地按照前边讲解的方法进行定位吧。宏哥这里就讲解和分享了三到四种toast，想必还有好多其他类型的toast，但是都是换汤不换药，直接按宏哥讲解的进行参考和定位操作绝大多数我们工作中常用的都可以解决的。

好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。