Playwright(TypeScript)中如何校验Toast Message？新手求助

一、确认开发者提供的XPath是否正确 #

按以下步骤验证即可：

1. 浏览器开发者工具直接验证
   • 打开目标网站，触发Toast消息弹出（比如点击对应操作按钮）
   • 按下F12打开开发者工具，切换到Elements标签页
   • 按Ctrl+F（Windows/Linux）或Cmd+F（Mac）调出搜索框，输入开发者给的XPath //ngb-alert//pre/text()
   • 查看搜索结果：如果能精准高亮到Toast里的文本内容，说明XPath有效；如果无结果或定位到无关元素，就需要调整。
2. Playwright调试工具验证
   • 在测试代码里添加一行await page.pause();，运行测试
   • 测试暂停后，在Playwright调试面板的搜索框输入XPath，查看是否能定位到目标文本

小提示：//ngb-alert//pre/text()是定位文本节点，Playwright的locator更常用元素节点定位，建议改成//ngb-alert//pre（定位包含文本的<pre>元素），后续断言操作更方便。

二、Toast Message的断言选择 #

1. toContainText的适用场景 #

如果你的需求是校验Toast包含某段指定文本（比如只需要确认有“成功”关键词，不管完整文本是什么），用toContainText完全没问题，示例代码：

// 定位Toast元素
const toast = page.locator('//ngb-alert//pre');
// 等待Toast加载完成（必须加，否则可能因元素未出现报错）
await toast.waitFor();
// 校验包含指定文本
await expect(toast).toContainText('操作成功');

2. 精准校验用toHaveText #

如果要完全匹配Toast的全部文本内容，请用toHaveText，示例：

const toast = page.locator('//ngb-alert//pre');
await toast.waitFor();
// 完全匹配预期文本
await expect(toast).toHaveText('数据提交成功，请等待审核');

新手必注意： #

Toast一般是动态弹出的临时元素，一定要先调用waitFor()等待元素出现后再做断言，否则会出现“元素未找到”的错误。

内容的提问来源于stack exchange，提问作者Nguyễn Minh Khang