如何在Playwright TypeScript中验证多组警报元素值均为17且一致？

安全阿岳

2026-6-26

新手友好的Playwright验证方案

1. 准备环境

先确保你电脑装了Node.js（官网下载安装即可），然后打开命令提示符/终端，按步骤执行：

新建一个文件夹，进入该文件夹
初始化项目：npm init -y
安装Playwright测试依赖：npm install @playwright/test
安装浏览器驱动：npx playwright install

2. 编写测试代码

在文件夹里新建一个文件，命名为alert-validation.spec.js，把下面的代码复制进去，务必根据你页面的实际HTML结构修改选择器：

// 导入Playwright的测试工具
const { test, expect } = require('@playwright/test');

test('验证两组警报数量均为17且一致', async ({ page }) => {
  // 替换成你要测试的页面URL
  await page.goto('你的目标页面地址');

  // 定位第一组警报（饼图下方的17个），替换成页面实际的CSS选择器
  const pieChartAlerts = page.locator('替换成饼图下方警报的CSS选择器');
  // 定位第二组警报，替换成页面实际的CSS选择器
  const anotherAlerts = page.locator('替换成另一组警报的CSS选择器');

  // 获取两组警报的元素数量
  const pieChartAlertCount = await pieChartAlerts.count();
  const anotherAlertCount = await anotherAlerts.count();

  // 执行验证逻辑：两组数量都是17，且数值一致
  expect(pieChartAlertCount).toBe(17);
  expect(anotherAlertCount).toBe(17);
  expect(pieChartAlertCount).toBe(anotherAlertCount);
});

找CSS选择器的方法：打开浏览器开发者工具（按F12），选中任意一个警报元素，右键选择「复制」→「复制选择器」，把复制的内容替换到代码里对应的位置即可。