|
|
import type { Page } from "playwright";
|
|
|
|
|
|
/** 候选出现后 / 点选前后：焦点、combobox、pac、listbox 快照（仅取证，不改交互） */
|
|
|
export type SelectionTraceSnapshot = {
|
|
|
label: string;
|
|
|
at: number;
|
|
|
activeElement: {
|
|
|
tagName: string;
|
|
|
role: string | null;
|
|
|
className: string;
|
|
|
id: string;
|
|
|
ariaExpanded: string | null;
|
|
|
ariaAutocomplete: string | null;
|
|
|
ariaActivedescendant: string | null;
|
|
|
placeholder: string | null;
|
|
|
valuePreview: string;
|
|
|
isPacTarget: boolean;
|
|
|
} | null;
|
|
|
activeDescendant: {
|
|
|
id: string;
|
|
|
tagName: string;
|
|
|
role: string | null;
|
|
|
className: string;
|
|
|
ariaSelected: string | null;
|
|
|
textPreview: string;
|
|
|
} | null;
|
|
|
pac: {
|
|
|
visible: boolean;
|
|
|
itemCount: number;
|
|
|
highlightedIndex: number;
|
|
|
items: Array<{ index: number; className: string; textPreview: string }>;
|
|
|
};
|
|
|
listboxOptions: Array<{
|
|
|
index: number;
|
|
|
tagName: string;
|
|
|
role: string | null;
|
|
|
className: string;
|
|
|
ariaSelected: string | null;
|
|
|
textPreview: string;
|
|
|
}>;
|
|
|
widgetInputs: Array<{
|
|
|
tagName: string;
|
|
|
role: string | null;
|
|
|
className: string;
|
|
|
placeholder: string;
|
|
|
ariaActivedescendant: string | null;
|
|
|
isPacTarget: boolean;
|
|
|
valuePreview: string;
|
|
|
}>;
|
|
|
comboboxAlive: boolean;
|
|
|
};
|
|
|
|
|
|
export type ManualInteractionRecord = {
|
|
|
kind: "click" | "keydown";
|
|
|
at: number;
|
|
|
key?: string;
|
|
|
target: {
|
|
|
tagName: string;
|
|
|
role: string | null;
|
|
|
className: string;
|
|
|
id: string;
|
|
|
textPreview: string;
|
|
|
closestOption: string | null;
|
|
|
closestPacItem: string | null;
|
|
|
dataOptionId: string | null;
|
|
|
closestMothershipSuggestion: string | null;
|
|
|
};
|
|
|
};
|
|
|
|
|
|
const CAPTURE_SELECTION_TRACE = `(function(label) {
|
|
|
function summarize(el) {
|
|
|
if (!el) return null;
|
|
|
var html = el;
|
|
|
return {
|
|
|
tagName: html.tagName || "",
|
|
|
role: html.getAttribute("role"),
|
|
|
className: (html.className && String(html.className)) || "",
|
|
|
id: html.id || "",
|
|
|
ariaExpanded: html.getAttribute("aria-expanded"),
|
|
|
ariaAutocomplete: html.getAttribute("aria-autocomplete"),
|
|
|
ariaActivedescendant: html.getAttribute("aria-activedescendant"),
|
|
|
placeholder: html.getAttribute("placeholder"),
|
|
|
valuePreview: ("value" in html && html.value)
|
|
|
? String(html.value).replace(/\\s+/g, " ").trim().slice(0, 80)
|
|
|
: (html.textContent || "").replace(/\\s+/g, " ").trim().slice(0, 80),
|
|
|
isPacTarget: html.classList && html.classList.contains("pac-target-input"),
|
|
|
};
|
|
|
}
|
|
|
function resolveDescendant(id) {
|
|
|
if (!id) return null;
|
|
|
var el = document.getElementById(id);
|
|
|
if (!el) return null;
|
|
|
return {
|
|
|
id: id,
|
|
|
tagName: el.tagName || "",
|
|
|
role: el.getAttribute("role"),
|
|
|
className: (el.className && String(el.className)) || "",
|
|
|
ariaSelected: el.getAttribute("aria-selected"),
|
|
|
textPreview: (el.textContent || "").replace(/\\s+/g, " ").trim().slice(0, 100),
|
|
|
};
|
|
|
}
|
|
|
var active = document.activeElement;
|
|
|
var activeSummary = summarize(active);
|
|
|
var descendant = activeSummary && activeSummary.ariaActivedescendant
|
|
|
? resolveDescendant(activeSummary.ariaActivedescendant)
|
|
|
: null;
|
|
|
var pacContainer = document.querySelector(".pac-container");
|
|
|
var pacVisible = !!(pacContainer && pacContainer.offsetParent !== null);
|
|
|
var pacItems = pacContainer
|
|
|
? Array.prototype.slice.call(pacContainer.querySelectorAll(".pac-item"))
|
|
|
: [];
|
|
|
var highlightedIndex = -1;
|
|
|
var pacItemSummaries = [];
|
|
|
for (var i = 0; i < pacItems.length; i += 1) {
|
|
|
var item = pacItems[i];
|
|
|
var cls = (item.className && String(item.className)) || "";
|
|
|
if (cls.indexOf("pac-item-selected") >= 0 || cls.indexOf("pac-item-hover") >= 0) {
|
|
|
highlightedIndex = i;
|
|
|
}
|
|
|
pacItemSummaries.push({
|
|
|
index: i,
|
|
|
className: cls.slice(0, 120),
|
|
|
textPreview: (item.textContent || "").replace(/\\s+/g, " ").trim().slice(0, 100),
|
|
|
});
|
|
|
}
|
|
|
var listboxOptions = [];
|
|
|
var optionNodes = document.querySelectorAll('[role="listbox"] [role="option"]');
|
|
|
for (var j = 0; j < optionNodes.length && j < 12; j += 1) {
|
|
|
var opt = optionNodes[j];
|
|
|
listboxOptions.push({
|
|
|
index: j,
|
|
|
tagName: opt.tagName || "",
|
|
|
role: opt.getAttribute("role"),
|
|
|
className: ((opt.className && String(opt.className)) || "").slice(0, 120),
|
|
|
ariaSelected: opt.getAttribute("aria-selected"),
|
|
|
textPreview: (opt.textContent || "").replace(/\\s+/g, " ").trim().slice(0, 100),
|
|
|
});
|
|
|
}
|
|
|
var widget = document.querySelector("#react-quoter-landing-plugin");
|
|
|
var widgetInputs = [];
|
|
|
if (widget) {
|
|
|
var inputs = widget.querySelectorAll("input, textarea, [role='combobox']");
|
|
|
for (var k = 0; k < inputs.length && k < 8; k += 1) {
|
|
|
var inp = inputs[k];
|
|
|
widgetInputs.push({
|
|
|
tagName: inp.tagName || "",
|
|
|
role: inp.getAttribute("role"),
|
|
|
className: ((inp.className && String(inp.className)) || "").slice(0, 120),
|
|
|
placeholder: inp.getAttribute("placeholder") || "",
|
|
|
ariaActivedescendant: inp.getAttribute("aria-activedescendant"),
|
|
|
isPacTarget: inp.classList && inp.classList.contains("pac-target-input"),
|
|
|
valuePreview: ("value" in inp && inp.value)
|
|
|
? String(inp.value).replace(/\\s+/g, " ").trim().slice(0, 80)
|
|
|
: "",
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
var comboboxAlive = widgetInputs.some(function(w) {
|
|
|
return !!w.ariaActivedescendant;
|
|
|
}) || highlightedIndex >= 0;
|
|
|
return {
|
|
|
label: label,
|
|
|
at: Date.now(),
|
|
|
activeElement: activeSummary,
|
|
|
activeDescendant: descendant,
|
|
|
pac: {
|
|
|
visible: pacVisible,
|
|
|
itemCount: pacItems.length,
|
|
|
highlightedIndex: highlightedIndex,
|
|
|
items: pacItemSummaries,
|
|
|
},
|
|
|
listboxOptions: listboxOptions,
|
|
|
widgetInputs: widgetInputs,
|
|
|
comboboxAlive: comboboxAlive,
|
|
|
};
|
|
|
})`;
|
|
|
|
|
|
const INSTALL_MANUAL_LISTENERS = `(function() {
|
|
|
if (window.__rpaManualSelectionTrace) {
|
|
|
return { ok: true, reason: "already-installed" };
|
|
|
}
|
|
|
window.__rpaManualSelectionTrace = { clicks: [], keys: [] };
|
|
|
function closestMothershipSuggestionRow(el) {
|
|
|
if (!el || !el.closest) return null;
|
|
|
var widget = document.querySelector("#react-quoter-landing-plugin");
|
|
|
if (!widget || !widget.contains(el)) return null;
|
|
|
var node = el;
|
|
|
while (node && node !== widget) {
|
|
|
var tag = node.tagName || "";
|
|
|
if (tag !== "DIV" && tag !== "LI" && tag !== "BUTTON") {
|
|
|
node = node.parentElement;
|
|
|
continue;
|
|
|
}
|
|
|
var cls = (node.className && String(node.className)) || "";
|
|
|
if (cls.indexOf("sc-") !== 0) {
|
|
|
node = node.parentElement;
|
|
|
continue;
|
|
|
}
|
|
|
var text = (node.textContent || "").replace(/\\s+/g, " ").trim();
|
|
|
if (text.length < 18) {
|
|
|
node = node.parentElement;
|
|
|
continue;
|
|
|
}
|
|
|
if (/^(pick up from|deliver to|use my location)$/i.test(text)) {
|
|
|
node = node.parentElement;
|
|
|
continue;
|
|
|
}
|
|
|
if (node.querySelector && node.querySelector("input, textarea")) {
|
|
|
node = node.parentElement;
|
|
|
continue;
|
|
|
}
|
|
|
var clsShort = cls.split(/\\s+/).slice(0, 2).join(".");
|
|
|
return tag + "." + clsShort + ":" + text.slice(0, 100);
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
|
function summarizeTarget(el) {
|
|
|
if (!el || !el.closest) {
|
|
|
return {
|
|
|
tagName: "",
|
|
|
role: null,
|
|
|
className: "",
|
|
|
id: "",
|
|
|
textPreview: "",
|
|
|
closestOption: null,
|
|
|
closestPacItem: null,
|
|
|
dataOptionId: null,
|
|
|
closestMothershipSuggestion: null,
|
|
|
};
|
|
|
}
|
|
|
var opt = el.closest('[role="option"], [data-option-id], button[data-option-id], li[role="option"]');
|
|
|
var pac = el.closest(".pac-item");
|
|
|
var dataOptionId = el.getAttribute("data-option-id");
|
|
|
if (!dataOptionId && opt) {
|
|
|
dataOptionId = opt.getAttribute("data-option-id");
|
|
|
}
|
|
|
var msRow = closestMothershipSuggestionRow(el);
|
|
|
return {
|
|
|
tagName: el.tagName || "",
|
|
|
role: el.getAttribute("role"),
|
|
|
className: ((el.className && String(el.className)) || "").slice(0, 160),
|
|
|
id: el.id || "",
|
|
|
textPreview: (el.textContent || "").replace(/\\s+/g, " ").trim().slice(0, 120),
|
|
|
closestOption: opt
|
|
|
? (opt.tagName + "#" + (opt.id || "") + "." + ((opt.className && String(opt.className)) || "").slice(0, 80))
|
|
|
: null,
|
|
|
closestPacItem: pac
|
|
|
? ("pac-item:" + ((pac.textContent || "").replace(/\\s+/g, " ").trim().slice(0, 80)))
|
|
|
: null,
|
|
|
dataOptionId: dataOptionId,
|
|
|
closestMothershipSuggestion: msRow,
|
|
|
};
|
|
|
}
|
|
|
document.addEventListener("click", function(e) {
|
|
|
var t = e.target;
|
|
|
window.__rpaManualSelectionTrace.clicks.push({
|
|
|
kind: "click",
|
|
|
at: Date.now(),
|
|
|
target: summarizeTarget(t),
|
|
|
});
|
|
|
}, true);
|
|
|
document.addEventListener("keydown", function(e) {
|
|
|
window.__rpaManualSelectionTrace.keys.push({
|
|
|
kind: "keydown",
|
|
|
at: Date.now(),
|
|
|
key: e.key,
|
|
|
target: summarizeTarget(e.target),
|
|
|
});
|
|
|
}, true);
|
|
|
return { ok: true, reason: "installed" };
|
|
|
})()`;
|
|
|
|
|
|
const DRAIN_MANUAL_INTERACTIONS = `(function() {
|
|
|
var buf = window.__rpaManualSelectionTrace || { clicks: [], keys: [] };
|
|
|
window.__rpaManualSelectionTrace = { clicks: [], keys: [] };
|
|
|
return {
|
|
|
clicks: buf.clicks || [],
|
|
|
keys: buf.keys || [],
|
|
|
};
|
|
|
})()`;
|
|
|
|
|
|
const traceBuffer: SelectionTraceSnapshot[] = [];
|
|
|
|
|
|
export function drainSelectionTraces(): SelectionTraceSnapshot[] {
|
|
|
const out = [...traceBuffer];
|
|
|
traceBuffer.length = 0;
|
|
|
return out;
|
|
|
}
|
|
|
|
|
|
export function peekSelectionTraces(): SelectionTraceSnapshot[] {
|
|
|
return [...traceBuffer];
|
|
|
}
|
|
|
|
|
|
export function formatSelectionTraceEvent(snapshot: SelectionTraceSnapshot): string {
|
|
|
const active = snapshot.activeElement;
|
|
|
const descendant = snapshot.activeDescendant?.id ?? "null";
|
|
|
const pacHi =
|
|
|
snapshot.pac.highlightedIndex >= 0
|
|
|
? `pac-highlight=${snapshot.pac.highlightedIndex}`
|
|
|
: "pac-highlight=none";
|
|
|
const listboxSel = snapshot.listboxOptions.find(
|
|
|
(o) => o.ariaSelected === "true",
|
|
|
);
|
|
|
const listboxPart = listboxSel
|
|
|
? `listbox-selected=${listboxSel.index}`
|
|
|
: "listbox-selected=none";
|
|
|
const combobox = snapshot.comboboxAlive ? "combobox-alive" : "combobox-dead";
|
|
|
const focus = active
|
|
|
? `focus=${active.tagName}${active.isPacTarget ? "+pac" : ""}`
|
|
|
: "focus=null";
|
|
|
return `selection-trace:${snapshot.label}:${focus}:aria-activedescendant=${descendant}:${pacHi}:${listboxPart}:${combobox}`;
|
|
|
}
|
|
|
|
|
|
function emptySelectionTraceSnapshot(label: string): SelectionTraceSnapshot {
|
|
|
return {
|
|
|
label,
|
|
|
at: Date.now(),
|
|
|
activeElement: null,
|
|
|
activeDescendant: null,
|
|
|
pac: { visible: false, itemCount: 0, highlightedIndex: -1, items: [] },
|
|
|
listboxOptions: [],
|
|
|
widgetInputs: [],
|
|
|
comboboxAlive: false,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
export async function captureSelectionTrace(
|
|
|
page: Page,
|
|
|
label: string,
|
|
|
): Promise<SelectionTraceSnapshot> {
|
|
|
let snapshot: SelectionTraceSnapshot;
|
|
|
try {
|
|
|
snapshot = (await page.evaluate(
|
|
|
`${CAPTURE_SELECTION_TRACE}(${JSON.stringify(label)})`,
|
|
|
)) as SelectionTraceSnapshot;
|
|
|
} catch (error) {
|
|
|
console.warn(
|
|
|
`[rpa] selection-trace:capture-failed label=${label}`,
|
|
|
error instanceof Error ? error.message : error,
|
|
|
);
|
|
|
snapshot = emptySelectionTraceSnapshot(label);
|
|
|
}
|
|
|
if (!snapshot || typeof snapshot !== "object" || !snapshot.label) {
|
|
|
console.warn(`[rpa] selection-trace:capture-empty label=${label}`);
|
|
|
snapshot = emptySelectionTraceSnapshot(label);
|
|
|
}
|
|
|
traceBuffer.push(snapshot);
|
|
|
return snapshot;
|
|
|
}
|
|
|
|
|
|
export function logSelectionTrace(
|
|
|
side: "pickup" | "delivery" | "manual" | "rpa",
|
|
|
snapshot: SelectionTraceSnapshot | null | undefined,
|
|
|
): void {
|
|
|
if (!snapshot) {
|
|
|
console.log(`[rpa] selection-trace:${side} {"error":"snapshot为空"}`);
|
|
|
return;
|
|
|
}
|
|
|
console.log(
|
|
|
`[rpa] selection-trace:${side} ${JSON.stringify({
|
|
|
label: snapshot.label,
|
|
|
at: snapshot.at,
|
|
|
activeElement: snapshot.activeElement,
|
|
|
activeDescendant: snapshot.activeDescendant,
|
|
|
pac: {
|
|
|
visible: snapshot.pac.visible,
|
|
|
itemCount: snapshot.pac.itemCount,
|
|
|
highlightedIndex: snapshot.pac.highlightedIndex,
|
|
|
},
|
|
|
listboxCount: snapshot.listboxOptions.length,
|
|
|
listboxSelected: snapshot.listboxOptions
|
|
|
.filter((o) => o.ariaSelected === "true")
|
|
|
.map((o) => o.index),
|
|
|
comboboxAlive: snapshot.comboboxAlive,
|
|
|
widgetInputs: snapshot.widgetInputs,
|
|
|
})}`,
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export type ManualInteractionBundle = {
|
|
|
clicks: ManualInteractionRecord[];
|
|
|
keys: ManualInteractionRecord[];
|
|
|
};
|
|
|
|
|
|
const WIDGET_CHROME_LABEL_RE =
|
|
|
/^(pick up from|deliver to|use my location)$/i;
|
|
|
|
|
|
/** MotherShip 联想行：styled-components DIV，非 role=option / pac-item */
|
|
|
export function isMothershipSuggestionClickTarget(
|
|
|
target: ManualInteractionRecord["target"],
|
|
|
): boolean {
|
|
|
if (
|
|
|
target.closestOption ||
|
|
|
target.closestPacItem ||
|
|
|
target.dataOptionId ||
|
|
|
target.closestMothershipSuggestion
|
|
|
) {
|
|
|
return true;
|
|
|
}
|
|
|
const cls = target.className || "";
|
|
|
if (!/\bsc-/.test(cls)) {
|
|
|
return false;
|
|
|
}
|
|
|
const tag = (target.tagName || "").toUpperCase();
|
|
|
if (tag === "INPUT" || tag === "BUTTON" || tag === "SVG") {
|
|
|
return false;
|
|
|
}
|
|
|
const text = (target.textPreview || "").trim();
|
|
|
if (text.length < 18 || WIDGET_CHROME_LABEL_RE.test(text)) {
|
|
|
return false;
|
|
|
}
|
|
|
return /,|\bUSA\b|\bFL\b|\bCA\b|Street|Boulevard|Avenue|Hollywood|Key West/i.test(
|
|
|
text,
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export function pickSelectionGoldInteractions(
|
|
|
interactions: ManualInteractionBundle,
|
|
|
): {
|
|
|
selectionClicks: ManualInteractionRecord[];
|
|
|
selectionKeys: ManualInteractionRecord[];
|
|
|
} {
|
|
|
const selectionClicks = interactions.clicks.filter((c) =>
|
|
|
isMothershipSuggestionClickTarget(c.target),
|
|
|
);
|
|
|
const selectionKeys = interactions.keys.filter((k) => {
|
|
|
const key = k.key ?? "";
|
|
|
if (!["Enter", "ArrowDown", "ArrowUp", "Tab"].includes(key)) {
|
|
|
return false;
|
|
|
}
|
|
|
const tag = (k.target.tagName || "").toUpperCase();
|
|
|
return tag === "INPUT" || tag === "TEXTAREA";
|
|
|
});
|
|
|
return { selectionClicks, selectionKeys };
|
|
|
}
|
|
|
|
|
|
export function logManualInteractionGoldSample(
|
|
|
phase: "pickup" | "delivery",
|
|
|
interactions: ManualInteractionBundle,
|
|
|
): void {
|
|
|
const { selectionClicks, selectionKeys } =
|
|
|
pickSelectionGoldInteractions(interactions);
|
|
|
console.log(
|
|
|
`[manual] interactions-gold:${phase} clicks=${interactions.clicks.length} keys=${interactions.keys.length} selectionClicks=${selectionClicks.length} selectionKeys=${selectionKeys.length}`,
|
|
|
);
|
|
|
if (selectionClicks.length > 0) {
|
|
|
const last = selectionClicks[selectionClicks.length - 1]!;
|
|
|
console.log(
|
|
|
`[manual] interactions-gold:${phase} last-selection-click ${JSON.stringify(last.target)}`,
|
|
|
);
|
|
|
} else if (selectionKeys.length > 0) {
|
|
|
const last = selectionKeys[selectionKeys.length - 1]!;
|
|
|
console.log(
|
|
|
`[manual] interactions-gold:${phase} last-selection-key ${JSON.stringify({ key: last.key, target: last.target })}`,
|
|
|
);
|
|
|
} else {
|
|
|
console.warn(
|
|
|
`[manual] ⚠ interactions-gold:${phase} 未捕获到联想点选。请用鼠标点联想行（sc- DIV）或键盘 ↓+Enter 后再按检查点。`,
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export async function installManualSelectionListeners(
|
|
|
page: Page,
|
|
|
): Promise<void> {
|
|
|
const result = await page.evaluate(INSTALL_MANUAL_LISTENERS);
|
|
|
console.log(`[rpa] selection-trace:manual-listeners ${JSON.stringify(result)}`);
|
|
|
}
|
|
|
|
|
|
export async function drainManualInteractions(page: Page): Promise<{
|
|
|
clicks: ManualInteractionRecord[];
|
|
|
keys: ManualInteractionRecord[];
|
|
|
}> {
|
|
|
try {
|
|
|
return (await page.evaluate(DRAIN_MANUAL_INTERACTIONS)) as {
|
|
|
clicks: ManualInteractionRecord[];
|
|
|
keys: ManualInteractionRecord[];
|
|
|
};
|
|
|
} catch {
|
|
|
return { clicks: [], keys: [] };
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export async function recordManualCheckpoint(
|
|
|
page: Page,
|
|
|
phase: string,
|
|
|
): Promise<{
|
|
|
snapshot: SelectionTraceSnapshot;
|
|
|
interactions: { clicks: ManualInteractionRecord[]; keys: ManualInteractionRecord[] };
|
|
|
}> {
|
|
|
const interactions = await drainManualInteractions(page);
|
|
|
const snapshot = await captureSelectionTrace(page, phase);
|
|
|
logSelectionTrace("manual", snapshot);
|
|
|
return { snapshot, interactions };
|
|
|
}
|
