Files
deer-flow/frontend/tests/e2e/artifact-preview.spec.ts
T
2026-05-23 16:56:14 +08:00

175 lines
5.0 KiB
TypeScript

import { expect, test } from "@playwright/test";
import { mockLangGraphAPI } from "./utils/mock-api";
const ARTIFACT_PATH = "/artifact-fixtures/report.html";
const MARKDOWN_ARTIFACT_PATH = "/artifact-fixtures/report.md";
const JSON_ARTIFACT_PATH = "/artifact-fixtures/report.json";
const IN_PROGRESS_THREAD_ID = "00000000-0000-0000-0000-000000003119";
const COMPLETE_THREAD_ID = "00000000-0000-0000-0000-000000003120";
const MARKDOWN_THREAD_ID = "00000000-0000-0000-0000-000000003121";
const JSON_THREAD_ID = "00000000-0000-0000-0000-000000003122";
function writeFileMessages({
path = ARTIFACT_PATH,
content = "<!doctype html><html><body><h1>Report draft</h1><p>测试内容</p></body></html>",
toolResult,
}: {
path?: string;
content?: string;
toolResult?: string;
} = {}) {
const messages: unknown[] = [
{
type: "human",
id: "msg-human-artifact",
content: [{ type: "text", text: "Create a report artifact" }],
},
{
type: "ai",
id: "msg-ai-write-artifact",
content: "",
tool_calls: [
{
id: "write-file-artifact",
name: "write_file",
args: {
description: "Writing report artifact",
path,
content,
},
},
],
},
];
if (toolResult !== undefined) {
messages.push({
type: "tool",
id: "msg-tool-write-artifact",
name: "write_file",
tool_call_id: "write-file-artifact",
content: toolResult,
});
}
return messages;
}
test.describe("Artifact preview stability", () => {
test("renders preview iframe for an in-progress write artifact", async ({
page,
}) => {
mockLangGraphAPI(page, {
threads: [
{
thread_id: IN_PROGRESS_THREAD_ID,
title: "Artifact preview in progress",
messages: writeFileMessages(),
},
],
});
await page.goto(`/workspace/chats/${IN_PROGRESS_THREAD_ID}`);
await expect(page.getByText(ARTIFACT_PATH)).toBeVisible({
timeout: 15_000,
});
await page.getByText(ARTIFACT_PATH).click();
const artifactsPanel = page.locator("#artifacts");
await expect(artifactsPanel.getByText("report.html")).toBeVisible();
await expect(
artifactsPanel.locator('iframe[title="Artifact preview"]'),
).toBeVisible();
});
test("renders preview iframe after the write artifact succeeds", async ({
page,
}) => {
mockLangGraphAPI(page, {
threads: [
{
thread_id: COMPLETE_THREAD_ID,
title: "Artifact preview complete",
messages: writeFileMessages({ toolResult: "OK" }),
},
],
});
await page.goto(`/workspace/chats/${COMPLETE_THREAD_ID}`);
await expect(page.getByText(ARTIFACT_PATH)).toBeVisible({
timeout: 15_000,
});
await page.getByText(ARTIFACT_PATH).click();
const artifactsPanel = page.locator("#artifacts");
await expect(artifactsPanel.getByText("report.html")).toBeVisible();
await expect(
artifactsPanel.locator('iframe[title="Artifact preview"]'),
).toBeVisible();
});
test("renders markdown preview for an in-progress write artifact", async ({
page,
}) => {
mockLangGraphAPI(page, {
threads: [
{
thread_id: MARKDOWN_THREAD_ID,
title: "Markdown artifact preview in progress",
messages: writeFileMessages({
path: MARKDOWN_ARTIFACT_PATH,
content: "# Markdown draft\n\n- 测试内容 1\n- English term",
}),
},
],
});
await page.goto(`/workspace/chats/${MARKDOWN_THREAD_ID}`);
await expect(page.getByText(MARKDOWN_ARTIFACT_PATH)).toBeVisible({
timeout: 15_000,
});
await page.getByText(MARKDOWN_ARTIFACT_PATH).click();
const artifactsPanel = page.locator("#artifacts");
await expect(artifactsPanel.getByText("report.md")).toBeVisible();
await expect(artifactsPanel.getByText("Markdown draft")).toBeVisible();
await expect(artifactsPanel.getByText("测试内容 1")).toBeVisible();
});
test("renders code view for an in-progress non-preview write artifact", async ({
page,
}) => {
mockLangGraphAPI(page, {
threads: [
{
thread_id: JSON_THREAD_ID,
title: "JSON artifact code view in progress",
messages: writeFileMessages({
path: JSON_ARTIFACT_PATH,
content:
'{\n "status": "draft",\n "中文字段": "测试内容",\n "count": 3\n}',
}),
},
],
});
await page.goto(`/workspace/chats/${JSON_THREAD_ID}`);
await expect(page.getByText(JSON_ARTIFACT_PATH)).toBeVisible({
timeout: 15_000,
});
await page.getByText(JSON_ARTIFACT_PATH).click();
const artifactsPanel = page.locator("#artifacts");
await expect(artifactsPanel.getByText("report.json")).toBeVisible();
await expect(artifactsPanel.getByText('"status": "draft"')).toBeVisible();
await expect(
artifactsPanel.getByText('"中文字段": "测试内容"'),
).toBeVisible();
});
});