42 lines
2.6 KiB
TypeScript
42 lines
2.6 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
for (const width of [1440, 375, 320]) {
|
|
test(`conversation title aligns with assistant text ${width}`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await mockWorkbenchContext(page);
|
|
const title = "育秀路人民路路口部分查找三根大管径的管道";
|
|
await mockAgentApi(page, { sessions: [{ session_id: "header-preview", title, created_at: Date.now(), updated_at: Date.now() }] });
|
|
await page.route("**/api/v1/session/header-preview?**", route => route.fulfill({
|
|
headers: { "Access-Control-Allow-Origin": "*" }, json: {
|
|
session_id: "header-preview", title, purpose: "ordinary_chat", status: "active", is_streaming: false,
|
|
messages: [{ id: "prompt", role: "user", parts: [{ type: "text", text: "重新定位下" }] },
|
|
{ id: "reply", role: "assistant", parts: [{ type: "text", text: Array.from({ length: 35 }, (_, i) => `第${i + 1}条核查记录：核对管道位置、压力与流量。`).join("\n\n") }] }]
|
|
}
|
|
}));
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await panel.getByRole("button", { name: "打开 Agent 历史记录" }).click();
|
|
await page.locator(".agent-history-session-trigger").filter({ hasText: title }).click();
|
|
const context = panel.locator(".agent-chat-context-bar");
|
|
await expect(context).toBeVisible();
|
|
await expect(context).toHaveCSS("text-align", "left");
|
|
const paragraph = panel.locator('[data-agent-message-id="reply"] .agent-streaming-response p').first();
|
|
await expect(paragraph).toBeVisible();
|
|
await page.evaluate(() => document.fonts.ready);
|
|
const textLeft = (element: Element) => {
|
|
const text = document.createTreeWalker(element, NodeFilter.SHOW_TEXT).nextNode()!;
|
|
const range = document.createRange();
|
|
range.selectNodeContents(text);
|
|
return range.getClientRects()[0].x;
|
|
};
|
|
const titleX = await context.getByText(title, { exact: true }).evaluate(textLeft);
|
|
const paragraphX = await paragraph.evaluate(textLeft);
|
|
console.log(JSON.stringify({ width, titleX, paragraphX }));
|
|
await panel.screenshot({ path: `/tmp/agent-title-alignment-${width}.png` });
|
|
expect(Math.abs(titleX - paragraphX)).toBeLessThanOrEqual(1);
|
|
});
|
|
}
|