From 35ed0f72f2ee8452943c4e9ceb1e3ac379c8bcf6 Mon Sep 17 00:00:00 2001 From: "xiuting.xu" Date: Thu, 30 Oct 2025 10:19:39 +0800 Subject: [PATCH] modify playwright ts --- src/sys/tests/scripts/16_web_verify.sh | 2 +- src/web/tests/playwright/alerts.spec.ts | 121 +++++++++--------- src/web/tests/playwright/dashboard.spec.ts | 3 +- src/web/tests/playwright/helpers/testUtils.ts | 4 +- src/web/tests/playwright/helpers/utils.ts | 1 + src/web/tests/playwright/logs.spec.ts | 3 +- src/web/tests/playwright/metric.spec.ts | 3 +- src/web/tests/playwright/node-info.spec.ts | 3 +- src/web/tests/playwright/web-pages.spec.ts | 2 +- 9 files changed, 74 insertions(+), 68 deletions(-) create mode 100644 src/web/tests/playwright/helpers/utils.ts diff --git a/src/sys/tests/scripts/16_web_verify.sh b/src/sys/tests/scripts/16_web_verify.sh index d092c5e..b4f83ad 100644 --- a/src/sys/tests/scripts/16_web_verify.sh +++ b/src/sys/tests/scripts/16_web_verify.sh @@ -69,7 +69,7 @@ rm -rf "$REPORT_DIR" # Run Playwright tests with reporters set +e # temporarily disable exit-on-error to capture test result -npx playwright test tests/playwright --reporter=list,html +BASE_URL=${FRONTEND_URL} npx playwright test tests/playwright --reporter=list,html TEST_RESULT=$? set -e # re-enable strict mode diff --git a/src/web/tests/playwright/alerts.spec.ts b/src/web/tests/playwright/alerts.spec.ts index 8d468c3..cfb5681 100644 --- a/src/web/tests/playwright/alerts.spec.ts +++ b/src/web/tests/playwright/alerts.spec.ts @@ -1,77 +1,78 @@ -import { test, expect } from "@playwright/test"; +import {test, expect} from "@playwright/test"; +import { BASE_URL } from './helpers/utils' test.describe("Alerts 页面功能测试", () => { - test.beforeEach(async ({ page }) => { - await page.goto("http://localhost:8080/alerts"); // 根据你实际路由调整 - }); + test.beforeEach(async ({page}) => { + await page.goto(`${BASE_URL}/alerts`); // 根据你实际路由调整 + }); - test("页面加载并显示告警统计", async ({ page }) => { - await expect(page.locator("text=告警详情")).toBeVisible(); - await expect(page.locator("text=总数")).toBeVisible(); - await expect(page.locator("text=严重")).toBeVisible(); - await expect(page.locator("text=警告")).toBeVisible(); - await expect(page.locator("text=信息")).toBeVisible(); - }); + test("页面加载并显示告警统计", async ({page}) => { + await expect(page.locator("text=告警详情")).toBeVisible(); + await expect(page.locator("text=总数")).toBeVisible(); + await expect(page.locator("text=严重")).toBeVisible(); + await expect(page.locator("text=警告")).toBeVisible(); + await expect(page.locator("text=信息")).toBeVisible(); + }); - test("筛选功能验证", async ({ page }) => { - const severitySelect = page.getByLabel("严重性"); - const stateSelect = page.getByLabel("状态"); - const nodeSelect = page.getByLabel("节点"); + test("筛选功能验证", async ({page}) => { + const severitySelect = page.getByLabel("严重性"); + const stateSelect = page.getByLabel("状态"); + const nodeSelect = page.getByLabel("节点"); - await severitySelect.selectOption("critical"); - await expect(severitySelect).toHaveValue("critical"); + await severitySelect.selectOption("critical"); + await expect(severitySelect).toHaveValue("critical"); - await stateSelect.selectOption("active"); - await expect(stateSelect).toHaveValue("active"); + await stateSelect.selectOption("active"); + await expect(stateSelect).toHaveValue("active"); - await nodeSelect.selectOption("all"); - await expect(nodeSelect).toHaveValue("all"); - }); + await nodeSelect.selectOption("all"); + await expect(nodeSelect).toHaveValue("all"); + }); - test("排序功能", async ({ page }) => { - const severityHeader = page.locator("th:has-text('严重性') button"); - await severityHeader.click(); // 切换升序 - await severityHeader.click(); // 切换降序 + test("排序功能", async ({page}) => { + const severityHeader = page.locator("th:has-text('严重性') button"); + await severityHeader.click(); // 切换升序 + await severityHeader.click(); // 切换降序 - const instanceHeader = page.locator("th:has-text('节点') button"); - await instanceHeader.click(); - await instanceHeader.click(); - }); + const instanceHeader = page.locator("th:has-text('节点') button"); + await instanceHeader.click(); + await instanceHeader.click(); + }); - test("分页功能", async ({ page }) => { - const nextButton = page.locator("button:has-text('下一页')"); - const prevButton = page.locator("button:has-text('上一页')"); + test("分页功能", async ({page}) => { + const nextButton = page.locator("button:has-text('下一页')"); + const prevButton = page.locator("button:has-text('上一页')"); - if (await nextButton.isEnabled()) { - await nextButton.click(); - await expect(prevButton).toBeEnabled(); - } - }); + if (await nextButton.isEnabled()) { + await nextButton.click(); + await expect(prevButton).toBeEnabled(); + } + }); - test("展开更多信息行", async ({ page }) => { - const infoIcons = page.locator("table tbody tr td [title='显示/隐藏更多信息']"); - if (await infoIcons.count() > 0) { - await infoIcons.first().click(); - // 展开的详情行应出现 - const details = page.locator("table tbody tr >> text=alertname"); - const detailCount = await details.count(); - expect(detailCount).toBeGreaterThan(0); - } - }); + test("展开更多信息行", async ({page}) => { + const infoIcons = page.locator("table tbody tr td [title='显示/隐藏更多信息']"); + if (await infoIcons.count() > 0) { + await infoIcons.first().click(); + // 展开的详情行应出现 + const details = page.locator("table tbody tr >> text=alertname"); + const detailCount = await details.count(); + expect(detailCount).toBeGreaterThan(0); + } + }); - test("自动刷新开关与刷新按钮", async ({ page }) => { - const switchBtn = page.getByRole("switch", { name: "自动刷新" }); - const refreshBtn = page.getByTitle("刷新"); + test("自动刷新开关与刷新按钮", async ({page}) => { + const switchBtn = page.getByRole("switch", {name: "自动刷新"}); + const refreshBtn = page.getByTitle("刷新"); - await expect(switchBtn).toBeVisible(); - await expect(refreshBtn).toBeVisible(); + await expect(switchBtn).toBeVisible(); + await expect(refreshBtn).toBeVisible(); - // 手动点击刷新按钮 - await refreshBtn.click(); + // 手动点击刷新按钮 + await refreshBtn.click(); - // 自动刷新开关切换 - const isChecked = await switchBtn.isChecked(); - await switchBtn.click(); - await expect(switchBtn).toHaveJSProperty("checked", !isChecked); - }); + // 自动刷新开关切换 + const isChecked = await switchBtn.isChecked(); + await switchBtn.click(); + await expect(switchBtn).toHaveJSProperty("checked", !isChecked); + }); }); diff --git a/src/web/tests/playwright/dashboard.spec.ts b/src/web/tests/playwright/dashboard.spec.ts index d87f6b3..b01036f 100644 --- a/src/web/tests/playwright/dashboard.spec.ts +++ b/src/web/tests/playwright/dashboard.spec.ts @@ -1,10 +1,11 @@ import { test, expect } from '@playwright/test'; +import { BASE_URL } from './helpers/utils' test.describe('Dashboard 页面测试', () => { test.beforeEach(async ({ page }) => { // 打开仪表盘页面 - await page.goto('http://localhost:8080/dashboard', { waitUntil: 'networkidle' }); + await page.goto(`${BASE_URL}/dashboard`, { waitUntil: 'networkidle' }); }); test('应能成功加载页面并显示标题', async ({ page }) => { diff --git a/src/web/tests/playwright/helpers/testUtils.ts b/src/web/tests/playwright/helpers/testUtils.ts index 2d37c92..ba86afb 100644 --- a/src/web/tests/playwright/helpers/testUtils.ts +++ b/src/web/tests/playwright/helpers/testUtils.ts @@ -1,10 +1,10 @@ import { Page, expect } from '@playwright/test'; - +import { BASE_URL } from './utils' /** * 通用函数：验证页面导航是否正确 */ export async function checkPage(page: Page, path: string, title: string) { - await page.goto('http://localhost:8080/'); + await page.goto(`${BASE_URL}`); const menu = page.getByRole('link', { name: title }); await expect(menu).toBeVisible(); await menu.click(); diff --git a/src/web/tests/playwright/helpers/utils.ts b/src/web/tests/playwright/helpers/utils.ts new file mode 100644 index 0000000..7e125c6 --- /dev/null +++ b/src/web/tests/playwright/helpers/utils.ts @@ -0,0 +1 @@ +export const BASE_URL = process.env.BASE_URL || "http://localhost:8080"; \ No newline at end of file diff --git a/src/web/tests/playwright/logs.spec.ts b/src/web/tests/playwright/logs.spec.ts index 4c983bd..4b72456 100644 --- a/src/web/tests/playwright/logs.spec.ts +++ b/src/web/tests/playwright/logs.spec.ts @@ -1,10 +1,11 @@ import { test, expect } from '@playwright/test'; import { logsEntries } from './test-entries'; import { testEntryCards } from './helpers/entrycards-helpers'; +import { BASE_URL } from './helpers/utils' test.describe('Logs Page', () => { test('should render all log cards', async ({ page }) => { - await page.goto('http://localhost:8080m/logs'); + await page.goto(`${BASE_URL}/logs`); await expect(page.locator('h2', { hasText: '日志详情' })).toBeVisible(); await testEntryCards(page, logsEntries); }); diff --git a/src/web/tests/playwright/metric.spec.ts b/src/web/tests/playwright/metric.spec.ts index 1a300e6..b9089ec 100644 --- a/src/web/tests/playwright/metric.spec.ts +++ b/src/web/tests/playwright/metric.spec.ts @@ -1,11 +1,12 @@ import { test, expect } from '@playwright/test'; import { metricsEntries } from './test-entries'; import { testEntryCards } from './helpers/entrycards-helpers'; +import { BASE_URL } from './helpers/utils' test.describe('Metrics Page', () => { test('should render all metric cards', async ({ page }) => { - await page.goto('http://localhost:8080/metrics'); + await page.goto(`${BASE_URL}/metrics`); await expect(page.locator('h2', { hasText: '指标详情' })).toBeVisible(); await testEntryCards(page, metricsEntries); }); diff --git a/src/web/tests/playwright/node-info.spec.ts b/src/web/tests/playwright/node-info.spec.ts index ae80bc7..59db616 100644 --- a/src/web/tests/playwright/node-info.spec.ts +++ b/src/web/tests/playwright/node-info.spec.ts @@ -1,9 +1,10 @@ import { test, expect } from "@playwright/test"; +import { BASE_URL } from './helpers/utils' test.describe("节点信息页面 NodeInfo", () => { // 每次测试前打开目标页面 test.beforeEach(async ({ page }) => { - await page.goto("http://localhost:8080/node"); + await page.goto(`${BASE_URL}/node`); }); test("页面标题应该正确显示", async ({ page }) => { diff --git a/src/web/tests/playwright/web-pages.spec.ts b/src/web/tests/playwright/web-pages.spec.ts index 0a68485..3b4e586 100644 --- a/src/web/tests/playwright/web-pages.spec.ts +++ b/src/web/tests/playwright/web-pages.spec.ts @@ -1,7 +1,7 @@ import { test } from '@playwright/test'; import { checkPage, noConsoleError } from './helpers/testUtils'; +import { BASE_URL } from './helpers/utils' -const BASE_URL = 'http://localhost:8080'; const pages = [ { path: '/dashboard', title: '仪表盘' }, { path: '/nodeInfo', title: '节点信息' },