R108/A1-A7 固化企业微信移动端视觉门禁
这个提交包含在：
@@ -11,6 +11,7 @@
|
||||
"test:e2e:smoke": "playwright test tests/e2e/login-portal-ux.spec.ts tests/e2e/wecom-entry.spec.ts",
|
||||
"test:e2e:full": "playwright test",
|
||||
"test:e2e:r106-visual-audit": "playwright test tests/e2e/r106-visual-audit.spec.ts --workers=1 --reporter=list",
|
||||
"test:e2e:r108-mobile-visual": "playwright test tests/e2e/r108-mobile-wecom-visual.spec.ts --workers=1 --reporter=list",
|
||||
"test:e2e:r75-gap-fill": "playwright test tests/e2e/r75-automation-gap-fill.spec.ts --workers=1 --reporter=list",
|
||||
"test:e2e:r70-assist": "R70_TRIALRUN_ASSIST=1 playwright test tests/e2e/manual/r70-trialrun-assist.spec.ts --workers=1 --reporter=list",
|
||||
"test:e2e:r70-deep-assist": "PLAYWRIGHT_MANUAL=1 R70_TRIALRUN_DEEP_ASSIST=1 playwright test tests/e2e/manual/r70-trialrun-deep-assist.spec.ts --workers=1 --reporter=list",
|
||||
|
||||
@@ -33,7 +33,7 @@ export function MobileBottomNav() {
|
||||
const pendingCount = pendingCountQuery.data ?? 0;
|
||||
|
||||
return (
|
||||
<nav className="fixed inset-x-0 bottom-0 z-20 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur md:hidden">
|
||||
<nav className="z-20 shrink-0 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur md:hidden">
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{MOBILE_NAV_ITEMS.map((item) => {
|
||||
const disabled = item.anyOf ? !hasAnyPermission(permissions, [...item.anyOf]) : false;
|
||||
|
||||
@@ -28,10 +28,10 @@ export function AppShellLayout() {
|
||||
<div className="relative flex min-h-screen overflow-hidden bg-[var(--color-bg-canvas)]">
|
||||
{isMobileRoute ? null : <Sidebar />}
|
||||
|
||||
<main className={`flex min-w-0 flex-1 flex-col ${isMobileRoute ? "" : "lg:ml-72"}`}>
|
||||
<main className={`flex min-w-0 flex-1 flex-col ${isMobileRoute ? "h-[100dvh] overflow-hidden" : "lg:ml-72"}`}>
|
||||
{isMobileRoute ? null : <Topbar />}
|
||||
|
||||
<div className={`flex-1 px-4 py-5 ${isMobileRoute ? "pb-24 pt-4 sm:px-5 sm:py-5" : "sm:px-7 sm:py-7 lg:px-8"}`}>
|
||||
<div className={`flex-1 px-4 py-5 ${isMobileRoute ? "min-h-0 overflow-y-auto pb-5 pt-4 sm:px-5 sm:py-5" : "sm:px-7 sm:py-7 lg:px-8"}`}>
|
||||
<div className="layout-container max-w-none">
|
||||
<ErrorBoundary>
|
||||
<Outlet />
|
||||
|
||||
@@ -99,6 +99,17 @@ function workflowStatusLabel(status: string) {
|
||||
return status;
|
||||
}
|
||||
|
||||
function isInternalId(value: string | null | undefined) {
|
||||
return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value ?? "");
|
||||
}
|
||||
|
||||
function publicReference(value: string | null | undefined) {
|
||||
if (!value || isInternalId(value)) {
|
||||
return null;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function resolveErrorMessage(error: unknown) {
|
||||
if (isApiError(error)) {
|
||||
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
||||
@@ -170,18 +181,17 @@ function matchesEntityFilter(entityType: string | null, filter: EntityFilter) {
|
||||
|
||||
function toVisibleRemoteTask(task: WorkflowTaskSummary): VisibleTaskCard {
|
||||
const entityType = task.workflowInstance?.entityType ?? null;
|
||||
const entityId = task.workflowInstance?.entityId ?? null;
|
||||
return {
|
||||
id: task.id,
|
||||
title: task.stepName,
|
||||
subtitle:
|
||||
task.status === "completed"
|
||||
? `业务：${entityLabel(entityType)} · 完成于 ${formatDateTime(task.completedAt)}`
|
||||
: `业务：${entityLabel(entityType)} · 实体ID：${entityId ?? "-"}`,
|
||||
: `业务：${entityLabel(entityType)}`,
|
||||
status: task.status,
|
||||
entityType,
|
||||
entityId,
|
||||
reference: entityId ?? task.id,
|
||||
entityId: task.workflowInstance?.entityId ?? null,
|
||||
reference: publicReference(task.workflowInstance?.entityId),
|
||||
allowedActions: task.allowedActions,
|
||||
completedAt: task.completedAt,
|
||||
isCached: false,
|
||||
@@ -351,7 +361,7 @@ export function MobileApprovalsPage() {
|
||||
status: item.detail.task.status,
|
||||
entityType: item.taskSnapshot.entityType ?? item.detail.workflowInstance?.entityType ?? null,
|
||||
entityId: item.taskSnapshot.entityId,
|
||||
reference: item.taskSnapshot.reference ?? item.detail.task.id,
|
||||
reference: publicReference(item.taskSnapshot.reference),
|
||||
allowedActions: item.detail.allowedActions,
|
||||
completedAt: item.detail.task.completedAt,
|
||||
isCached: true,
|
||||
@@ -379,6 +389,7 @@ export function MobileApprovalsPage() {
|
||||
|
||||
const selectedTask = detailQuery.data ?? cachedDetailQuery.data?.detail ?? selectedCachedTaskDetail;
|
||||
const selectedReference = selectedTask ? resolveWorkflowTaskReferenceSnapshot(selectedTask) : null;
|
||||
const selectedDisplayReference = publicReference(selectedReference?.reference);
|
||||
const selectedTaskAllowsActions = Boolean(taskTab === "pending" && selectedTask?.task.status === "pending");
|
||||
const isOfflineUncachedDeepLink = Boolean(selectedTaskId) && !selectedTask && !canUseRemote;
|
||||
|
||||
@@ -738,7 +749,7 @@ export function MobileApprovalsPage() {
|
||||
<PageScaffold className="space-y-4">
|
||||
<PageHeader
|
||||
title="移动审批"
|
||||
subtitle={deepLinkTaskId ? `待办：${deepLinkTaskId}` : "处理待办。"}
|
||||
subtitle={deepLinkTaskId ? "已定位指定待办。" : "处理待办。"}
|
||||
/>
|
||||
|
||||
{!isOnline ? (
|
||||
@@ -915,7 +926,7 @@ export function MobileApprovalsPage() {
|
||||
className="mt-1 h-4 w-4 rounded border-zinc-300"
|
||||
checked={isBatchSelected}
|
||||
onChange={() => toggleBatchTask(task.id)}
|
||||
aria-label={`选择任务 ${task.id}`}
|
||||
aria-label={`选择${entityLabel(task.entityType)}待办`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -927,8 +938,8 @@ export function MobileApprovalsPage() {
|
||||
<div className="font-medium text-zinc-900">{task.title}</div>
|
||||
<StatusBadge status={task.status} label={workflowStatusLabel(task.status)} />
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-zinc-500">任务：{task.id}</div>
|
||||
<div className="mt-1 text-xs text-zinc-500">{task.subtitle}</div>
|
||||
{task.reference ? <div className="mt-1 text-xs text-zinc-500">业务单号：{task.reference}</div> : null}
|
||||
{task.isCached ? <div className="mt-1 text-xs text-zinc-500">来源：离线缓存</div> : null}
|
||||
</button>
|
||||
</div>
|
||||
@@ -949,11 +960,8 @@ export function MobileApprovalsPage() {
|
||||
<div className="font-medium text-zinc-900">{task.title}</div>
|
||||
<StatusBadge status={task.status} label={workflowStatusLabel(task.status)} />
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-zinc-500">任务：{task.id}</div>
|
||||
<div className="mt-1 text-xs text-zinc-500">{task.subtitle}</div>
|
||||
{task.reference && task.reference !== task.id ? (
|
||||
<div className="mt-1 text-xs text-zinc-500">业务参考：{task.reference}</div>
|
||||
) : null}
|
||||
{task.reference ? <div className="mt-1 text-xs text-zinc-500">业务单号：{task.reference}</div> : null}
|
||||
{task.isCached ? <div className="mt-1 text-xs text-zinc-500">来源：离线缓存</div> : null}
|
||||
</button>
|
||||
);
|
||||
@@ -978,7 +986,7 @@ export function MobileApprovalsPage() {
|
||||
|
||||
{isOfflineUncachedDeepLink ? (
|
||||
<p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">
|
||||
离线未缓存该待办，请联网后重试。任务号：{selectedTaskId}
|
||||
离线未缓存该待办，请联网后重试。
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
@@ -988,7 +996,7 @@ export function MobileApprovalsPage() {
|
||||
<div>任务状态：{workflowStatusLabel(selectedTask.task.status)}</div>
|
||||
<div>步骤：{selectedTask.task.stepName}</div>
|
||||
<div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
|
||||
<div>业务参考：{selectedReference?.reference ?? "-"}</div>
|
||||
<div>业务单号：{selectedDisplayReference ?? "-"}</div>
|
||||
<div>创建时间：{formatDateTime(selectedTask.task.createdAt)}</div>
|
||||
<div>完成时间：{formatDateTime(selectedTask.task.completedAt)}</div>
|
||||
{selectedTask.reimbursement ? (
|
||||
@@ -1007,7 +1015,7 @@ export function MobileApprovalsPage() {
|
||||
) : null}
|
||||
{selectedTask.purchaseRequest ? (
|
||||
<>
|
||||
<div>采购单号：{selectedTask.purchaseRequest.requestNo ?? selectedTask.purchaseRequest.id}</div>
|
||||
<div>采购单号：{selectedTask.purchaseRequest.requestNo ?? "-"}</div>
|
||||
<div>申请人：{selectedTask.purchaseRequest.applicant?.name ?? "-"}</div>
|
||||
<div>供应商：{selectedTask.purchaseRequest.supplier?.name ?? "-"}</div>
|
||||
<div>金额：{selectedTask.purchaseRequest.totalAmount ?? "-"}</div>
|
||||
@@ -1015,7 +1023,7 @@ export function MobileApprovalsPage() {
|
||||
) : null}
|
||||
{selectedTask.travelRequest ? (
|
||||
<>
|
||||
<div>差旅单号：{selectedTask.travelRequest.requestNo ?? selectedTask.travelRequest.id}</div>
|
||||
<div>差旅单号：{selectedTask.travelRequest.requestNo ?? "-"}</div>
|
||||
<div>申请人：{selectedTask.travelRequest.applicant?.name ?? "-"}</div>
|
||||
<div>出差类型：{selectedTask.travelRequest.tripType === "international" ? "国际" : "国内"}</div>
|
||||
<div>预估金额：{selectedTask.travelRequest.estimatedAmount ?? "-"}</div>
|
||||
@@ -1154,7 +1162,7 @@ export function MobileApprovalsPage() {
|
||||
{currentQueueItems.map((item) => (
|
||||
<div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3 text-sm">
|
||||
<div className="font-medium text-zinc-900">
|
||||
{item.taskSnapshot.reference ?? item.taskId} · {item.action === "approve" ? "通过" : "驳回"}
|
||||
{publicReference(item.taskSnapshot.reference) ?? entityLabel(item.taskSnapshot.entityType)} · {item.action === "approve" ? "通过" : "驳回"}
|
||||
</div>
|
||||
<div className="text-zinc-500">业务：{entityLabel(item.taskSnapshot.entityType)} · 步骤：{item.taskSnapshot.stepName ?? "-"}</div>
|
||||
<div className="text-zinc-500">状态：{queueStatusLabel(item.status)} · 更新时间：{formatDateTime(item.updatedAt)}</div>
|
||||
|
||||
@@ -243,10 +243,13 @@ export function MobileCapturePage() {
|
||||
setError("");
|
||||
|
||||
if (!isOnline) {
|
||||
const enqueuedItems: MobileUploadQueueItem[] = [];
|
||||
for (const file of selectedFiles) {
|
||||
await enqueueInvoiceUpload(file);
|
||||
enqueuedItems.push(await enqueueInvoiceUpload(file));
|
||||
}
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
||||
queryClient.setQueryData<MobileUploadQueueItem[]>(["mobile", "invoice-upload-queue"], (current) =>
|
||||
[...(current ?? []), ...enqueuedItems].sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
|
||||
);
|
||||
setSelectedFiles([]);
|
||||
setMessage(`当前离线，已加入待上传队列 ${selectedFiles.length} 项`);
|
||||
return;
|
||||
@@ -296,7 +299,9 @@ export function MobileCapturePage() {
|
||||
data-testid={`mobile-capture-remove-${item.id}`}
|
||||
onClick={async () => {
|
||||
await removeQueuedInvoiceUpload(item.id);
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
||||
queryClient.setQueryData<MobileUploadQueueItem[]>(["mobile", "invoice-upload-queue"], (current) =>
|
||||
(current ?? []).filter((queuedItem) => queuedItem.id !== item.id),
|
||||
);
|
||||
}}
|
||||
size="sm"
|
||||
type="button"
|
||||
|
||||
@@ -0,0 +1,484 @@
|
||||
import { mkdirSync, writeFileSync } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { expect, test, type Browser, type Page } from "@playwright/test";
|
||||
|
||||
import {
|
||||
EMPLOYEE,
|
||||
MANAGER,
|
||||
createAuthenticatedApiClient,
|
||||
type AuthenticatedApiClient,
|
||||
type E2EUser,
|
||||
} from "./helpers/auth";
|
||||
import { createSubmittedTravelRequestViaApi } from "./helpers/travel";
|
||||
import { waitForWorkflowTask } from "./helpers/workflow";
|
||||
|
||||
type Finding = {
|
||||
severity: "P1" | "P2";
|
||||
page: string;
|
||||
category: string;
|
||||
title: string;
|
||||
detail: string;
|
||||
evidence?: string;
|
||||
};
|
||||
|
||||
type CheckRecord = Record<string, unknown>;
|
||||
|
||||
type MobileAuditOptions = {
|
||||
label: string;
|
||||
route: string;
|
||||
screenshotName: string;
|
||||
skipNavigation?: boolean;
|
||||
};
|
||||
|
||||
type MobileMetrics = {
|
||||
text: string;
|
||||
width: number;
|
||||
height: number;
|
||||
scrollWidth: number;
|
||||
visibleTables: Array<Record<string, unknown>>;
|
||||
bannedFound: string[];
|
||||
darkSurfaces: Array<Record<string, unknown>>;
|
||||
clipped: Array<Record<string, unknown>>;
|
||||
bottomOverlap: Array<Record<string, unknown>>;
|
||||
moreMenuRatio: number | null;
|
||||
};
|
||||
|
||||
const ROOT_DIR = path.resolve(process.cwd(), "..");
|
||||
const SCREENSHOT_DIR = path.join(ROOT_DIR, "output/playwright/r108");
|
||||
const ARTIFACT_DIR = path.join(ROOT_DIR, "artifacts/r108-mobile-wecom-visual");
|
||||
const WECOM_UA =
|
||||
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 wxwork/4.1.20 MicroMessenger/8.0.1 Language/zh_CN";
|
||||
const UUID_RE = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi;
|
||||
|
||||
const findings: Finding[] = [];
|
||||
const checks: CheckRecord[] = [];
|
||||
|
||||
function screenshotPath(fileName: string) {
|
||||
mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
||||
return path.join(SCREENSHOT_DIR, `${fileName}.png`);
|
||||
}
|
||||
|
||||
function artifactPath(fileName: string) {
|
||||
mkdirSync(ARTIFACT_DIR, { recursive: true });
|
||||
return path.join(ARTIFACT_DIR, fileName);
|
||||
}
|
||||
|
||||
function redact(value: string) {
|
||||
return value.replace(UUID_RE, "[uuid]");
|
||||
}
|
||||
|
||||
function addFinding(finding: Finding) {
|
||||
findings.push({
|
||||
...finding,
|
||||
detail: redact(finding.detail),
|
||||
});
|
||||
}
|
||||
|
||||
async function loginForMobile(page: Page, user: E2EUser) {
|
||||
await page.goto("/login");
|
||||
await expect(page.getByTestId("login-identifier")).toBeVisible();
|
||||
await page.getByTestId("login-identifier").fill(user.identifier);
|
||||
await page.getByTestId("login-password").fill(user.password);
|
||||
await page.getByTestId("login-submit").click();
|
||||
await page.waitForURL(/\/(portal|mobile)/, { timeout: 30_000 });
|
||||
await page.waitForLoadState("networkidle").catch(() => undefined);
|
||||
}
|
||||
|
||||
async function newWecomPage(browser: Browser, viewport: { width: number; height: number }) {
|
||||
const context = await browser.newContext({
|
||||
viewport,
|
||||
isMobile: true,
|
||||
hasTouch: true,
|
||||
userAgent: WECOM_UA,
|
||||
locale: "zh-CN",
|
||||
serviceWorkers: "block",
|
||||
});
|
||||
return { context, page: await context.newPage() };
|
||||
}
|
||||
|
||||
async function firstEnabledExpenseTypeId(client: AuthenticatedApiClient) {
|
||||
const response = await client.api.get("/api/expense-types?enabled=true");
|
||||
const payload = await response.json() as {
|
||||
data?: { items?: Array<{ id: string; enabled?: boolean }> };
|
||||
};
|
||||
const item = payload.data?.items?.find((candidate) => candidate.enabled !== false) ?? payload.data?.items?.[0];
|
||||
if (!response.ok() || !item?.id) {
|
||||
throw new Error(`无法读取可用费用类型：HTTP ${response.status()}`);
|
||||
}
|
||||
return item.id;
|
||||
}
|
||||
|
||||
async function seedEmployeeMobileData() {
|
||||
const client = await createAuthenticatedApiClient(EMPLOYEE);
|
||||
try {
|
||||
const expenseTypeId = await firstEnabledExpenseTypeId(client);
|
||||
const reimbursementResponse = await client.api.post("/api/reimbursements", {
|
||||
data: { description: "R108 移动端巡检报销草稿" },
|
||||
});
|
||||
const reimbursementPayload = await reimbursementResponse.json() as { data?: { id?: string } };
|
||||
if (!reimbursementResponse.ok() || !reimbursementPayload.data?.id) {
|
||||
throw new Error(`创建移动端报销草稿失败：HTTP ${reimbursementResponse.status()}`);
|
||||
}
|
||||
|
||||
const itemResponse = await client.api.post(`/api/reimbursements/${reimbursementPayload.data.id}/items`, {
|
||||
data: {
|
||||
expenseTypeId,
|
||||
expenseDate: "2026-05-07",
|
||||
amount: "88.80",
|
||||
description: "R108 移动巡检明细",
|
||||
},
|
||||
});
|
||||
if (!itemResponse.ok()) {
|
||||
throw new Error(`创建移动端报销明细失败：HTTP ${itemResponse.status()}`);
|
||||
}
|
||||
|
||||
return { reimbursementId: reimbursementPayload.data.id };
|
||||
} finally {
|
||||
await client.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
async function auditMobilePage(page: Page, options: MobileAuditOptions): Promise<MobileMetrics> {
|
||||
if (!options.skipNavigation) {
|
||||
await page.goto(options.route);
|
||||
await page.waitForLoadState("networkidle").catch(() => undefined);
|
||||
}
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const shot = screenshotPath(options.screenshotName);
|
||||
await page.screenshot({ path: shot, fullPage: true });
|
||||
|
||||
const metrics = await page.evaluate(() => {
|
||||
function parseRgb(value: string) {
|
||||
const match = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/i);
|
||||
if (!match) return null;
|
||||
return {
|
||||
r: Number(match[1]),
|
||||
g: Number(match[2]),
|
||||
b: Number(match[3]),
|
||||
a: match[4] == null ? 1 : Number(match[4]),
|
||||
};
|
||||
}
|
||||
|
||||
function isVisible(element: Element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const style = getComputedStyle(element);
|
||||
return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none";
|
||||
}
|
||||
|
||||
const text = document.body?.innerText ?? "";
|
||||
const documentElement = document.documentElement;
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
const scrollWidth = Math.max(documentElement.scrollWidth, document.body?.scrollWidth ?? 0);
|
||||
const visibleTables = Array.from(document.querySelectorAll("table"))
|
||||
.filter(isVisible)
|
||||
.map((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return {
|
||||
testid: element.getAttribute("data-testid") ?? "",
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height),
|
||||
};
|
||||
});
|
||||
const bannedTerms = ["先处理", "清爽", "低频模块放在这里", "Choose File", "/invoice-pool", "/purchase-requests"];
|
||||
const bannedFound = bannedTerms.filter((term) => text.includes(term));
|
||||
|
||||
const darkSurfaces: Array<Record<string, unknown>> = [];
|
||||
for (const element of Array.from(document.querySelectorAll("body *"))) {
|
||||
if (!isVisible(element)) continue;
|
||||
const style = getComputedStyle(element);
|
||||
const rgb = parseRgb(style.backgroundColor);
|
||||
if (!rgb || rgb.a < 0.2) continue;
|
||||
const average = (rgb.r + rgb.g + rgb.b) / 3;
|
||||
const rect = element.getBoundingClientRect();
|
||||
const area = rect.width * rect.height;
|
||||
if (average < 36 && area > 2200) {
|
||||
darkSurfaces.push({
|
||||
tag: element.tagName.toLowerCase(),
|
||||
testid: element.getAttribute("data-testid") ?? "",
|
||||
text: (element.textContent ?? "").trim().slice(0, 40),
|
||||
backgroundColor: style.backgroundColor,
|
||||
area: Math.round(area),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const clipped: Array<Record<string, unknown>> = [];
|
||||
for (const element of Array.from(document.querySelectorAll("button,a,[role='button'],select,input,textarea,[data-testid]"))) {
|
||||
if (!isVisible(element)) continue;
|
||||
if (element.classList.contains("sr-only")) continue;
|
||||
const style = getComputedStyle(element);
|
||||
const overflowHidden = ["hidden", "clip"].includes(style.overflowX) || ["hidden", "clip"].includes(style.overflowY);
|
||||
const isClipped = element.scrollWidth > element.clientWidth + 2 || element.scrollHeight > element.clientHeight + 2;
|
||||
if (isClipped && overflowHidden) {
|
||||
clipped.push({
|
||||
tag: element.tagName.toLowerCase(),
|
||||
testid: element.getAttribute("data-testid") ?? "",
|
||||
text: (element.textContent ?? element.getAttribute("aria-label") ?? element.getAttribute("placeholder") ?? "").trim().slice(0, 60),
|
||||
client: `${element.clientWidth}x${element.clientHeight}`,
|
||||
scroll: `${element.scrollWidth}x${element.scrollHeight}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const nav = document.querySelector("[data-testid='mobile-nav-home']")?.closest("nav");
|
||||
const navRect = nav?.getBoundingClientRect() ?? null;
|
||||
const bottomOverlap: Array<Record<string, unknown>> = [];
|
||||
function canScrollDownFrom(element: Element) {
|
||||
let current = element.parentElement;
|
||||
while (current && current !== document.body) {
|
||||
const style = getComputedStyle(current);
|
||||
const canScroll = /(auto|scroll)/.test(style.overflowY) && current.scrollHeight > current.clientHeight + 4;
|
||||
if (canScroll) {
|
||||
return current.scrollTop < current.scrollHeight - current.clientHeight - 4;
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
|
||||
const root = document.scrollingElement ?? document.documentElement;
|
||||
return root.scrollTop < root.scrollHeight - root.clientHeight - 4;
|
||||
}
|
||||
|
||||
if (navRect) {
|
||||
for (const element of Array.from(document.querySelectorAll("main button, main a, main input, main select, main textarea, main [role='button']"))) {
|
||||
if (!isVisible(element) || nav?.contains(element)) continue;
|
||||
const rect = element.getBoundingClientRect();
|
||||
const area = rect.width * rect.height;
|
||||
if (area > 300 && rect.bottom > navRect.top + 4 && rect.top < navRect.bottom - 4 && !canScrollDownFrom(element)) {
|
||||
bottomOverlap.push({
|
||||
tag: element.tagName.toLowerCase(),
|
||||
testid: element.getAttribute("data-testid") ?? "",
|
||||
text: (element.textContent ?? element.getAttribute("aria-label") ?? "").trim().slice(0, 40),
|
||||
rect: `${Math.round(rect.left)},${Math.round(rect.top)},${Math.round(rect.width)}x${Math.round(rect.height)}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const moreLinks = document.querySelector("[data-testid='mobile-more-links']");
|
||||
const moreRect = moreLinks?.getBoundingClientRect() ?? null;
|
||||
const moreMenuRatio = moreRect ? moreRect.height / window.innerHeight : null;
|
||||
|
||||
return {
|
||||
text,
|
||||
width,
|
||||
height,
|
||||
scrollWidth,
|
||||
visibleTables,
|
||||
bannedFound,
|
||||
darkSurfaces: darkSurfaces.slice(0, 8),
|
||||
clipped: clipped.slice(0, 12),
|
||||
bottomOverlap: bottomOverlap.slice(0, 8),
|
||||
moreMenuRatio,
|
||||
};
|
||||
});
|
||||
|
||||
const uuids = Array.from(new Set(metrics.text.match(UUID_RE) ?? [])).slice(0, 8);
|
||||
checks.push({
|
||||
label: options.label,
|
||||
route: options.route,
|
||||
screenshot: shot,
|
||||
width: metrics.width,
|
||||
height: metrics.height,
|
||||
scrollWidth: metrics.scrollWidth,
|
||||
visibleTableCount: metrics.visibleTables.length,
|
||||
uuidCount: uuids.length,
|
||||
});
|
||||
|
||||
if (metrics.scrollWidth > metrics.width + 2) {
|
||||
addFinding({
|
||||
severity: "P1",
|
||||
page: options.label,
|
||||
category: "响应式",
|
||||
title: "手机页面存在横向溢出",
|
||||
detail: `viewport=${metrics.width}px, scrollWidth=${metrics.scrollWidth}px`,
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (metrics.visibleTables.length > 0) {
|
||||
addFinding({
|
||||
severity: "P1",
|
||||
page: options.label,
|
||||
category: "移动端",
|
||||
title: "手机视口仍出现桌面表格",
|
||||
detail: JSON.stringify(metrics.visibleTables),
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (metrics.bannedFound.length > 0) {
|
||||
addFinding({
|
||||
severity: "P1",
|
||||
page: options.label,
|
||||
category: "文案",
|
||||
title: "出现移动端禁用文案",
|
||||
detail: metrics.bannedFound.join("、"),
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (uuids.length > 0) {
|
||||
addFinding({
|
||||
severity: "P1",
|
||||
page: options.label,
|
||||
category: "业务展示",
|
||||
title: "手机页面向用户暴露内部 UUID",
|
||||
detail: `${uuids.length} 个 UUID`,
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (metrics.darkSurfaces.length > 0) {
|
||||
addFinding({
|
||||
severity: "P2",
|
||||
page: options.label,
|
||||
category: "视觉",
|
||||
title: "手机页面存在大块近黑背景",
|
||||
detail: JSON.stringify(metrics.darkSurfaces.slice(0, 3)),
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (metrics.clipped.length > 0) {
|
||||
addFinding({
|
||||
severity: "P2",
|
||||
page: options.label,
|
||||
category: "视觉",
|
||||
title: "存在疑似文字/控件裁切",
|
||||
detail: JSON.stringify(metrics.clipped.slice(0, 5)),
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (metrics.bottomOverlap.length > 0) {
|
||||
addFinding({
|
||||
severity: "P2",
|
||||
page: options.label,
|
||||
category: "移动导航",
|
||||
title: "底部导航疑似遮挡主操作",
|
||||
detail: JSON.stringify(metrics.bottomOverlap.slice(0, 4)),
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
if (metrics.moreMenuRatio != null && metrics.moreMenuRatio > 0.6) {
|
||||
addFinding({
|
||||
severity: "P2",
|
||||
page: options.label,
|
||||
category: "移动菜单",
|
||||
title: "更多菜单占用过多首屏空间",
|
||||
detail: `ratio=${metrics.moreMenuRatio.toFixed(2)}`,
|
||||
evidence: shot,
|
||||
});
|
||||
}
|
||||
|
||||
return metrics;
|
||||
}
|
||||
|
||||
function writeReport() {
|
||||
const generatedAt = new Date().toISOString();
|
||||
const report = { generatedAt, checks, findings };
|
||||
writeFileSync(artifactPath("report.json"), redact(JSON.stringify(report, null, 2)));
|
||||
|
||||
const lines = [
|
||||
"# R108 企业微信移动端视觉巡检报告",
|
||||
"",
|
||||
`生成时间：${generatedAt}`,
|
||||
"",
|
||||
"## 结论",
|
||||
"",
|
||||
`- 巡检记录数：${checks.length}`,
|
||||
`- 发现问题数：${findings.length}`,
|
||||
`- 截图目录：${SCREENSHOT_DIR}`,
|
||||
"",
|
||||
"## 发现的问题",
|
||||
"",
|
||||
];
|
||||
|
||||
if (!findings.length) {
|
||||
lines.push("- 未发现规则命中的移动端视觉/交互/展示问题。");
|
||||
} else {
|
||||
findings.forEach((finding, index) => {
|
||||
lines.push(`${index + 1}. [${finding.severity}] ${finding.page} / ${finding.category}：${finding.title}`);
|
||||
lines.push(` - 详情：${finding.detail.slice(0, 600)}`);
|
||||
if (finding.evidence) lines.push(` - 截图：${finding.evidence}`);
|
||||
});
|
||||
}
|
||||
|
||||
lines.push("", "## 巡检页面", "");
|
||||
checks.forEach((item) => {
|
||||
lines.push(`- ${String(item.label)}：${redact(String(item.route))}，viewport=${String(item.width)}x${String(item.height)}，scrollWidth=${String(item.scrollWidth)}`);
|
||||
});
|
||||
|
||||
writeFileSync(artifactPath("report.md"), lines.join("\n"));
|
||||
}
|
||||
|
||||
test.describe.serial("R108 企业微信移动端视觉专项", () => {
|
||||
test.skip(process.env.E2E_MODE === "live", "R108 本地移动专项只在临时本地环境运行");
|
||||
|
||||
test("员工移动页面、票据上传队列与经理移动审批可巡检", async ({ browser }) => {
|
||||
await seedEmployeeMobileData();
|
||||
const travel = await createSubmittedTravelRequestViaApi({
|
||||
user: EMPLOYEE,
|
||||
purposePrefix: "R108移动审批视觉",
|
||||
amount: "1098.00",
|
||||
});
|
||||
const managerClient = await createAuthenticatedApiClient(MANAGER);
|
||||
|
||||
try {
|
||||
const task = await waitForWorkflowTask(managerClient.api, {
|
||||
entityId: travel.travelRequest.requestId,
|
||||
entityType: "travel_request",
|
||||
});
|
||||
|
||||
const employee390 = await newWecomPage(browser, { width: 390, height: 844 });
|
||||
await loginForMobile(employee390.page, EMPLOYEE);
|
||||
await auditMobilePage(employee390.page, { label: "企微 390-首页", route: "/mobile", screenshotName: "mobile-390-home" });
|
||||
await auditMobilePage(employee390.page, { label: "企微 390-报销", route: "/mobile/reimbursements", screenshotName: "mobile-390-reimbursements" });
|
||||
await auditMobilePage(employee390.page, { label: "企微 390-请假", route: "/mobile/leave", screenshotName: "mobile-390-leave" });
|
||||
await auditMobilePage(employee390.page, { label: "企微 390-我的", route: "/mobile/me", screenshotName: "mobile-390-me" });
|
||||
|
||||
await employee390.page.goto("/mobile/capture");
|
||||
await expect(employee390.page.getByRole("heading", { name: "票据上传", exact: true })).toBeVisible();
|
||||
await employee390.page.context().setOffline(true);
|
||||
await employee390.page.evaluate(() => window.dispatchEvent(new Event("offline")));
|
||||
await expect(employee390.page.getByText("离线", { exact: true })).toBeVisible();
|
||||
await employee390.page.getByTestId("mobile-capture-file").setInputFiles([
|
||||
{ name: "r108-mobile-a.jpg", mimeType: "image/jpeg", buffer: Buffer.from("r108-mobile-a") },
|
||||
{ name: "r108-mobile-b.pdf", mimeType: "application/pdf", buffer: Buffer.from("%PDF-1.4\n%%EOF\n") },
|
||||
]);
|
||||
await expect(employee390.page.getByText("已选择 2 个")).toBeVisible();
|
||||
await employee390.page.getByTestId("mobile-capture-upload").click();
|
||||
await expect(employee390.page.getByTestId("mobile-capture-queue")).toContainText("待上传 2 项", { timeout: 15_000 });
|
||||
await employee390.page.getByRole("button", { name: "移除" }).first().click();
|
||||
await expect(employee390.page.getByTestId("mobile-capture-queue")).toContainText("待上传 1 项", { timeout: 15_000 });
|
||||
await auditMobilePage(employee390.page, { label: "企微 390-票据上传队列", route: "/mobile/capture", screenshotName: "mobile-390-capture-queue", skipNavigation: true });
|
||||
await employee390.page.context().setOffline(false);
|
||||
await employee390.page.evaluate(() => window.dispatchEvent(new Event("online")));
|
||||
await expect(employee390.page.getByTestId("mobile-capture-queue")).toContainText("无待上传项", { timeout: 30_000 });
|
||||
await employee390.context.close();
|
||||
|
||||
const employee414 = await newWecomPage(browser, { width: 414, height: 896 });
|
||||
await loginForMobile(employee414.page, EMPLOYEE);
|
||||
await auditMobilePage(employee414.page, { label: "企微 414-首页", route: "/mobile", screenshotName: "mobile-414-home" });
|
||||
await auditMobilePage(employee414.page, { label: "企微 414-票据上传", route: "/mobile/capture", screenshotName: "mobile-414-capture" });
|
||||
await employee414.context.close();
|
||||
|
||||
const manager390 = await newWecomPage(browser, { width: 390, height: 844 });
|
||||
await loginForMobile(manager390.page, MANAGER);
|
||||
await manager390.page.goto(`/mobile/approvals?taskId=${encodeURIComponent(task.id)}`);
|
||||
await expect(manager390.page.getByTestId("mobile-approvals-detail")).toBeVisible({ timeout: 30_000 });
|
||||
await expect(manager390.page.getByTestId("mobile-approvals-detail")).toContainText(travel.travelRequest.requestNo);
|
||||
await expect(manager390.page.getByTestId("mobile-approvals-approve")).toBeEnabled();
|
||||
await expect(manager390.page.getByTestId("mobile-approvals-reject")).toBeEnabled();
|
||||
await manager390.page.getByTestId("mobile-approvals-comment").fill("R108 移动审批操作区验证");
|
||||
await auditMobilePage(manager390.page, { label: "企微 390-审批详情", route: `/mobile/approvals?taskId=${encodeURIComponent(task.id)}`, screenshotName: "mobile-390-approvals-detail" });
|
||||
await manager390.page.getByTestId("mobile-approvals-approve").click();
|
||||
await expect(manager390.page.getByText("操作成功")).toBeVisible({ timeout: 30_000 });
|
||||
await manager390.context.close();
|
||||
|
||||
writeReport();
|
||||
if (process.env.R108_MOBILE_ALLOW_FINDINGS !== "1") {
|
||||
const summary = findings.map((finding) => `${finding.severity} ${finding.page} / ${finding.category}: ${finding.title}`).join("\n");
|
||||
expect(findings, summary || "R108 mobile visual findings should be empty").toEqual([]);
|
||||
}
|
||||
} finally {
|
||||
await Promise.all([travel.client.dispose(), managerClient.dispose()]);
|
||||
}
|
||||
});
|
||||
});
|
||||
在新工单中引用
屏蔽一个用户