#!/usr/bin/env node "use strict"; const assert = require("node:assert"); const fs = require("node:fs"); const os = require("node:os"); const path = require("node:path"); const { chromium } = require("playwright"); const { ensureAuthenticated, UI_TIMEOUT_MS } = require("./tree-shell-smoke-helpers"); const BASE_URL = (process.env.MNOTE_WEB_SMOKE_BASE_URL || process.env.MNOTE_UI_BASE_URL || "http://127.0.0.1:3000").replace(/\/+$/, ""); const TASK = "task526-local-folder-ocr-api-smoke"; const OUTPUT_DIR = path.join(process.cwd(), "tmp", TASK); const RESULT_PATH = path.join(OUTPUT_DIR, "result.json"); function fileUrl(localPath) { return `file://${localPath.split(path.sep).map((part, index) => ( index === 0 ? "" : encodeURIComponent(part) )).join("/")}`; } function localMdDocumentId(relativePath) { return `local-md:${Buffer.from(relativePath, "utf8") .toString("hex") .replace(/../g, (hex) => { const code = Number.parseInt(hex, 16); const ch = String.fromCharCode(code); return /[A-Za-z0-9._-]/.test(ch) ? ch : `~${hex.toUpperCase()}`; })}`; } function documentUrl(root, relativePath) { const url = new URL(`${BASE_URL}/documents/${encodeURIComponent(localMdDocumentId(relativePath))}`); url.searchParams.set("sourceKind", "local_folder"); url.searchParams.set("rootUri", fileUrl(root)); url.searchParams.set("treeView", "filetree"); return url.toString(); } function writeWorkspaceManifest(root, ownerId) { const metadataDir = path.join(root, ".mnote"); fs.mkdirSync(metadataDir, { recursive: true }); fs.writeFileSync( path.join(metadataDir, "workspace.json"), `${JSON.stringify({ workspaceId: `local-ws:${ownerId}:task526`, ownerId, createdAt: new Date().toISOString(), capabilities: ["local_files", "markdown_edit", "ocr"], }, null, 2)}\n`, "utf8", ); } async function writeResult(payload) { fs.mkdirSync(OUTPUT_DIR, { recursive: true }); fs.writeFileSync(RESULT_PATH, `${JSON.stringify({ ...payload, resultPath: RESULT_PATH }, null, 2)}\n`, "utf8"); } async function ensureDocumentVisible(page, root, relativePath) { await page.goto(documentUrl(root, relativePath), { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS }); if (new URL(page.url()).pathname === "/auth") { const quickLogin = page.getByRole("button", { name: "测试账号快速登录" }); await quickLogin.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); await quickLogin.click({ timeout: UI_TIMEOUT_MS }); await page.waitForURL((url) => url.pathname !== "/auth", { timeout: UI_TIMEOUT_MS }).catch(() => undefined); await page.goto(documentUrl(root, relativePath), { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS }); } await page.locator('[data-testid="mnote-leptos-tiptap-island-editor-root"]').first().waitFor({ state: "visible", timeout: UI_TIMEOUT_MS, }); } async function main() { fs.mkdirSync(OUTPUT_DIR, { recursive: true }); const root = fs.mkdtempSync(path.join(os.tmpdir(), "mnote-task526-ocr-")); const actorId = "mnote-e2e"; const workspaceId = `local-ws:${actorId}:task526`; const relativePath = "docs/Page.md"; const documentId = localMdDocumentId(relativePath); const sourceRootRelativePath = "docs/Page.assets/photo.png"; const failedSourceRootRelativePath = "docs/Page.assets/photo-failed.png"; const ocrToken = "TASK526_OCR_TOKEN"; writeWorkspaceManifest(root, actorId); fs.mkdirSync(path.join(root, "docs", "Page.assets"), { recursive: true }); fs.writeFileSync(path.join(root, relativePath), "# OCR Page\n\n![photo](<./Page.assets/photo.png>)\n", "utf8"); const tinyPng = Buffer.from( "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAFgwJ/l8FQOQAAAABJRU5ErkJggg==", "base64", ); fs.writeFileSync(path.join(root, sourceRootRelativePath), tinyPng); fs.writeFileSync(path.join(root, failedSourceRootRelativePath), tinyPng); const browser = await chromium.launch({ headless: true }); const context = await browser.newContext(); const page = await context.newPage(); const screenshots = {}; try { await ensureAuthenticated(page, context.request); await ensureDocumentVisible(page, root, relativePath); await page.waitForFunction(() => { const image = document.querySelector('.document-pane[data-pane-role="primary"] .editor-surface .ProseMirror img'); return image instanceof HTMLImageElement && image.complete && image.naturalWidth > 0 && image.src.includes("Page.assets%2Fphoto.png") && !image.src.includes("%3C") && !image.src.includes("%3E"); }, null, { timeout: UI_TIMEOUT_MS }); screenshots.page = path.join(OUTPUT_DIR, "01-page.png"); await page.screenshot({ path: screenshots.page, fullPage: true }); await page.waitForFunction(() => Boolean(window.__mnoteDocumentPaneRuntime?.openResourceInActiveTab), null, { timeout: UI_TIMEOUT_MS, }); await page.evaluate(async ({ rootUri, documentId, sourceRootRelativePath, workspaceId }) => { window.__MNOTE_LOCAL_OCR_PROVIDER = "mock"; const title = sourceRootRelativePath.split("/").filter(Boolean).pop() || "photo.png"; const fileUrl = new URL("/api/local-folder/files/open", window.location.origin); fileUrl.searchParams.set("rootUri", rootUri); fileUrl.searchParams.set("path", sourceRootRelativePath); const opened = await window.__mnoteDocumentPaneRuntime.openResourceInActiveTab({ objectIdentity: `local-file:${sourceRootRelativePath}`, assetId: `local-file:${sourceRootRelativePath}`, title, fileName: title, kind: "image", rootUri, path: sourceRootRelativePath, href: fileUrl.toString(), documentId, ownerDocumentId: documentId, workspaceId, sourceKind: "local_folder", }); if (!opened) throw new Error("OCR source image resource tab did not open"); }, { rootUri: fileUrl(root), documentId, sourceRootRelativePath, workspaceId, }); await page.locator('[data-mnote-resource-tab-panel]:not([hidden]) [data-testid="mnote-local-ocr-toolbar"]').first().waitFor({ state: "detached", timeout: UI_TIMEOUT_MS, }); const watchBatchBeforeOcr = await page.evaluate(() => document.documentElement.getAttribute("data-mnote-local-folder-watch-batch-applied") || ""); await page.getByTestId("mnote-local-ocr-task-toggle").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); await page.getByTestId("mnote-local-ocr-task-toggle").click({ timeout: UI_TIMEOUT_MS }); await page.getByTestId("mnote-local-ocr-settings-popover").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); await page.locator('[data-local-ocr-settings-action="run-active"]').click({ timeout: UI_TIMEOUT_MS }); await page.getByTestId("mnote-local-ocr-task-drawer").waitFor({ state: "hidden", timeout: UI_TIMEOUT_MS }); const topbarOcrButtonInfo = await page.getByTestId("mnote-local-ocr-task-toggle").evaluate((node) => { const topbar = node.closest(".wolai-topbar-actions"); return { inTopbar: Boolean(topbar), action: node.getAttribute("data-mnote-action") || "", label: node.getAttribute("aria-label") || "", text: node.textContent || "", badge: node.querySelector("[data-mnote-local-ocr-task-count]")?.textContent || "", }; }); assert.equal(topbarOcrButtonInfo.inTopbar, true, `OCR 设置入口应位于右上角 topbar: ${JSON.stringify(topbarOcrButtonInfo)}`); assert.equal(topbarOcrButtonInfo.action, "open-ocr-settings", `OCR 顶栏按钮应打开设置: ${JSON.stringify(topbarOcrButtonInfo)}`); await page.waitForFunction( (sourcePath) => { const row = document.querySelector(`[data-mnote-local-ocr-task-row="${CSS.escape(sourcePath)}"]`); return row && row.getAttribute("data-mnote-local-ocr-task-status") === "done"; }, sourceRootRelativePath, { timeout: UI_TIMEOUT_MS }, ); await page.getByTestId("mnote-local-ocr-task-toggle").click({ timeout: UI_TIMEOUT_MS }); await page.getByTestId("mnote-local-ocr-settings-popover").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); await page.locator('[data-local-ocr-settings-action="tasks"]').click({ timeout: UI_TIMEOUT_MS }); await page.getByTestId("mnote-local-ocr-task-drawer").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); const uiOcrPath = await page.evaluate(async ({ rootUri, sourceRootRelativePath }) => { const url = new URL("/api/local-folder/ocr/status", window.location.origin); url.searchParams.set("rootUri", rootUri); url.searchParams.set("sourceRootRelativePath", sourceRootRelativePath); const response = await fetch(url.toString(), { cache: "no-store", headers: { accept: "application/json" } }); const payload = await response.json().catch(() => null); return payload?.job?.ocrRootRelativePath || ""; }, { rootUri: fileUrl(root), sourceRootRelativePath, }); assert(uiOcrPath && uiOcrPath.endsWith(".ocr.md"), `UI OCR path invalid: ${uiOcrPath}`); await page.waitForFunction( ({ before, ocrPath }) => { const root = document.documentElement; const marker = root.getAttribute("data-mnote-local-ocr-filetree-refresh") || ""; const applied = root.getAttribute("data-mnote-local-folder-watch-batch-applied") || ""; return marker === ocrPath && applied && applied !== before; }, { before: watchBatchBeforeOcr, ocrPath: uiOcrPath }, { timeout: UI_TIMEOUT_MS }, ); screenshots.ocrToolbar = path.join(OUTPUT_DIR, "02-ocr-toolbar.png"); await page.screenshot({ path: screenshots.ocrToolbar, fullPage: true }); const failedOcrRoute = async (route) => { if (route.request().method() !== "POST") return route.fallback(); const body = route.request().postDataJSON(); if (body?.sourceRootRelativePath !== failedSourceRootRelativePath) return route.fallback(); return route.fulfill({ status: 401, contentType: "application/json", body: JSON.stringify({ ok: false, error: { message: "local_ocr_job_failed_401" } }), }); }; await page.route("**/api/local-folder/ocr/jobs", failedOcrRoute); await page.evaluate(async ({ rootUri, documentId, sourceRootRelativePath, workspaceId }) => { window.__MNOTE_LOCAL_OCR_PROVIDER = "mineru"; const title = sourceRootRelativePath.split("/").filter(Boolean).pop() || "photo-failed.png"; const fileUrl = new URL("/api/local-folder/files/open", window.location.origin); fileUrl.searchParams.set("rootUri", rootUri); fileUrl.searchParams.set("path", sourceRootRelativePath); const opened = await window.__mnoteDocumentPaneRuntime.openResourceInActiveTab({ objectIdentity: `local-file:${sourceRootRelativePath}`, assetId: `local-file:${sourceRootRelativePath}`, title, fileName: title, kind: "image", rootUri, path: sourceRootRelativePath, href: fileUrl.toString(), documentId, ownerDocumentId: documentId, workspaceId, sourceKind: "local_folder", }); if (!opened) throw new Error("OCR failed source image resource tab did not open"); }, { rootUri: fileUrl(root), documentId, sourceRootRelativePath: failedSourceRootRelativePath, workspaceId, }); const failedImageTab = page.locator('.mnote-main-tab[data-mnote-tab-kind="image"]', { hasText: "photo-failed.png" }).first(); await failedImageTab.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); await failedImageTab.click({ timeout: UI_TIMEOUT_MS }); await page.waitForFunction( () => { const active = document.querySelector('.mnote-main-tab.is-active[data-mnote-tab-kind="image"] .mnote-main-tab-title'); return active && (active.textContent || "").includes("photo-failed.png"); }, null, { timeout: UI_TIMEOUT_MS }, ); await page.locator('[data-mnote-resource-tab-panel]:not([hidden]) [data-testid="mnote-local-ocr-toolbar"]').first().waitFor({ state: "detached", timeout: UI_TIMEOUT_MS, }); await page.getByTestId("mnote-local-ocr-task-toggle").click({ timeout: UI_TIMEOUT_MS }); await page.getByTestId("mnote-local-ocr-settings-popover").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); await page.locator('[data-local-ocr-settings-action="run-active"]').click({ timeout: UI_TIMEOUT_MS }); await page.waitForFunction( (sourcePath) => { const row = document.querySelector(`[data-mnote-local-ocr-task-row="${CSS.escape(sourcePath)}"]`); return row && row.getAttribute("data-mnote-local-ocr-task-status") === "failed" && (row.textContent || "").includes("local_ocr_job_failed_401"); }, failedSourceRootRelativePath, { timeout: UI_TIMEOUT_MS }, ); screenshots.ocrFailedTask = path.join(OUTPUT_DIR, "04-ocr-failed-task.png"); await page.screenshot({ path: screenshots.ocrFailedTask, fullPage: true }); await page.unroute("**/api/local-folder/ocr/jobs", failedOcrRoute); const openResourceResult = await page.evaluate(async ({ rootUri, documentId, ocrRootRelativePath, workspaceId }) => { const runtime = window.__mnoteDocumentPaneRuntime; if (!runtime || typeof runtime.openResourceInActiveTab !== "function") { throw new Error("缺少 openResourceInActiveTab runtime"); } const title = ocrRootRelativePath.split("/").filter(Boolean).pop() || "OCR"; return await runtime.openResourceInActiveTab({ kind: "markdown", title, path: ocrRootRelativePath, objectIdentity: `local-ocr:${ocrRootRelativePath}`, assetId: `local-ocr:${ocrRootRelativePath}`, documentId, ownerDocumentId: documentId, workspaceId, sourceKind: "local_folder", rootUri, resourceKind: "markdown", }); }, { rootUri: fileUrl(root), documentId, ocrRootRelativePath: uiOcrPath, workspaceId, }); assert.equal(openResourceResult, true, "OCR sidecar resource tab should open"); await page.locator('[data-mnote-resource-tab-panel][data-resource-kind="markdown"]:not([hidden]) [data-testid="mnote-leptos-tiptap-island-editor-root"]').first().waitFor({ state: "visible", timeout: UI_TIMEOUT_MS, }); await page.waitForFunction( () => { const active = document.querySelector('[data-mnote-resource-tab-panel][data-resource-kind="markdown"]:not([hidden]) .ProseMirror'); return active && (active.textContent || "").includes("OCR UI smoke text"); }, null, { timeout: UI_TIMEOUT_MS }, ).catch(async (error) => { const debug = await page.evaluate(() => ({ activeTab: document.querySelector('.mnote-main-tab.is-active')?.outerHTML || '', activePanels: Array.from(document.querySelectorAll('[data-mnote-resource-tab-panel]:not([hidden])')).map((panel) => ({ kind: panel.getAttribute('data-resource-kind') || '', objectIdentity: panel.getAttribute('data-mnote-object-identity') || '', text: (panel.textContent || '').slice(0, 200), html: panel.innerHTML.slice(0, 500), })), marker: document.documentElement.getAttribute('data-mnote-local-ocr-filetree-open') || '', })); throw new Error(`${error.message}; debug=${JSON.stringify(debug)}`); }); const fileTreeOpenResult = await page.evaluate((ocrRootRelativePath) => { const parentPath = ocrRootRelativePath.split("/").slice(0, -1).join("/"); const parentRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"][data-local-relative-path="${CSS.escape(parentPath)}"]`); if (!(parentRow instanceof HTMLElement)) return { ok: false, reason: "ocr_parent_row_missing", parentPath }; if (parentRow.getAttribute("aria-expanded") !== "true") { const toggle = parentRow.querySelector('[data-rust-action="toggle"]'); if (toggle instanceof HTMLElement) toggle.click(); } return { ok: true, parentPath }; }, uiOcrPath); assert.equal(fileTreeOpenResult.ok, true, `OCR sidecar parent should exist in filetree: ${JSON.stringify(fileTreeOpenResult)}`); const ocrFileTreeOpenResult = await page.waitForFunction( (ocrRootRelativePath) => { const rows = Array.from(document.querySelectorAll('#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"]')); const exact = rows.find((row) => row.getAttribute("data-local-relative-path") === ocrRootRelativePath); const fileName = ocrRootRelativePath.split("/").filter(Boolean).pop() || ocrRootRelativePath; const fallback = rows.find((row) => { const relativePath = row.getAttribute("data-local-relative-path") || ""; return relativePath.endsWith(`/${fileName}`) || relativePath === fileName || (row.textContent || "").includes(fileName); }); const target = exact || fallback; if (!(target instanceof HTMLElement)) return false; target.click(); return { ok: true, exact: Boolean(exact), relativePath: target.getAttribute("data-local-relative-path") || "", }; }, uiOcrPath, { timeout: UI_TIMEOUT_MS }, ).then((handle) => handle.jsonValue()); assert.equal(ocrFileTreeOpenResult.ok, true, `OCR sidecar filetree row should open: ${JSON.stringify(ocrFileTreeOpenResult)}`); await page.waitForFunction( () => document.documentElement.getAttribute("data-mnote-local-ocr-filetree-open") === "resource-tab", null, { timeout: UI_TIMEOUT_MS }, ); await page.waitForFunction( () => { const active = document.querySelector('[data-mnote-resource-tab-panel][data-resource-kind="markdown"]:not([hidden]) .ProseMirror'); return active && (active.textContent || "").includes("OCR UI smoke text"); }, null, { timeout: UI_TIMEOUT_MS }, ).catch(async (error) => { const debug = await page.evaluate(() => ({ activeTab: document.querySelector('.mnote-main-tab.is-active')?.outerHTML || '', activePanels: Array.from(document.querySelectorAll('[data-mnote-resource-tab-panel]:not([hidden])')).map((panel) => ({ kind: panel.getAttribute('data-resource-kind') || '', objectIdentity: panel.getAttribute('data-mnote-object-identity') || '', text: (panel.textContent || '').slice(0, 200), html: panel.innerHTML.slice(0, 500), })), marker: document.documentElement.getAttribute('data-mnote-local-ocr-filetree-open') || '', })); throw new Error(`${error.message}; debug=${JSON.stringify(debug)}`); }); screenshots.ocrResource = path.join(OUTPUT_DIR, "03-ocr-resource-tab.png"); await page.screenshot({ path: screenshots.ocrResource, fullPage: true }); await page.evaluate((sourcePath) => { const row = document.querySelector(`[data-mnote-local-ocr-task-row="${CSS.escape(sourcePath)}"]`); const clear = row && row.querySelector("[data-mnote-local-ocr-task-clear]"); if (!(clear instanceof HTMLButtonElement)) throw new Error("missing OCR clear button"); clear.click(); }, failedSourceRootRelativePath); await page.waitForFunction( (sourcePath) => !document.querySelector(`[data-mnote-local-ocr-task-row="${CSS.escape(sourcePath)}"]`), failedSourceRootRelativePath, { timeout: UI_TIMEOUT_MS }, ); const deleteButtonVisible = await page.evaluate((sourcePath) => { const row = document.querySelector(`[data-mnote-local-ocr-task-row="${CSS.escape(sourcePath)}"]`); return Boolean(row && row.querySelector("[data-mnote-local-ocr-task-delete]")); }, sourceRootRelativePath); assert.equal(deleteButtonVisible, true, "已完成 OCR 任务应展示删除 OCR 按钮"); await writeResult({ ok: true, task: TASK, root, documentId, ocrRootRelativePath: uiOcrPath, screenshots, }); console.log(JSON.stringify({ ok: true, task: TASK, root, documentId, ocrRootRelativePath: uiOcrPath, screenshots, }, null, 2)); } catch (error) { screenshots.failure = path.join(OUTPUT_DIR, "failure.png"); await page.screenshot({ path: screenshots.failure, fullPage: true }).catch(() => undefined); await writeResult({ ok: false, task: TASK, error: error instanceof Error ? error.message : String(error), root, documentId, screenshots, }); throw error; } finally { await browser.close(); } } main().catch((error) => { console.error(error instanceof Error ? error.stack || error.message : String(error)); process.exit(1); });