chore: initialize WanderQ MiniAPP 2.0 repository
This commit is contained in:
inman
308
scripts/capture-source.mjs
Normal file
308
scripts/capture-source.mjs
Normal file
@@ -0,0 +1,308 @@
|
||||
import fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { chromium, devices } from "playwright";
|
||||
|
||||
const targetUrl =
|
||||
"https://m.ctrip.com/tangram/OTQ1Mg==?ctm_ref=vactang_page_9452&isHideNavBar=YES&ctm_ref=vactang_page_159930";
|
||||
|
||||
const root = process.cwd();
|
||||
const researchDir = path.join(root, "docs", "research");
|
||||
const referenceDir = path.join(root, "docs", "design-references");
|
||||
|
||||
await fs.mkdir(researchDir, { recursive: true });
|
||||
await fs.mkdir(referenceDir, { recursive: true });
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
|
||||
async function captureViewport(name, contextOptions) {
|
||||
const context = await browser.newContext({
|
||||
...contextOptions,
|
||||
locale: "zh-CN",
|
||||
timezoneId: "Asia/Shanghai",
|
||||
extraHTTPHeaders: {
|
||||
"Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
|
||||
},
|
||||
});
|
||||
const page = await context.newPage();
|
||||
const consoleMessages = [];
|
||||
const failedRequests = [];
|
||||
|
||||
page.on("console", (msg) => {
|
||||
const text = msg.text();
|
||||
if (consoleMessages.length < 50) consoleMessages.push({ type: msg.type(), text });
|
||||
});
|
||||
page.on("requestfailed", (request) => {
|
||||
if (failedRequests.length < 50) {
|
||||
failedRequests.push({
|
||||
url: request.url(),
|
||||
failure: request.failure()?.errorText,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto(targetUrl, { waitUntil: "domcontentloaded", timeout: 60000 });
|
||||
await page.waitForTimeout(8000);
|
||||
|
||||
const pageInfoBeforeScroll = await page.evaluate(() => ({
|
||||
title: document.title,
|
||||
url: location.href,
|
||||
readyState: document.readyState,
|
||||
scrollHeight: document.documentElement.scrollHeight,
|
||||
viewportHeight: innerHeight,
|
||||
bodyTextLength: document.body?.innerText?.length ?? 0,
|
||||
bodyTextStart: document.body?.innerText?.slice(0, 1000) ?? "",
|
||||
}));
|
||||
|
||||
await page.screenshot({
|
||||
path: path.join(referenceDir, `source-${name}-top.png`),
|
||||
fullPage: false,
|
||||
});
|
||||
|
||||
await page.screenshot({
|
||||
path: path.join(referenceDir, `source-${name}-full.png`),
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
const scrollSamples = [];
|
||||
let i = 0;
|
||||
let y = 0;
|
||||
let previousHeight = 0;
|
||||
while (i < 24) {
|
||||
await page.evaluate((scrollY) => window.scrollTo(0, scrollY), y);
|
||||
await page.waitForTimeout(1200);
|
||||
await page.screenshot({
|
||||
path: path.join(referenceDir, `source-${name}-segment-${String(i).padStart(2, "0")}.png`),
|
||||
fullPage: false,
|
||||
});
|
||||
scrollSamples.push(
|
||||
await page.evaluate(() => ({
|
||||
scrollY,
|
||||
visibleText: document.body.innerText.slice(0, 1600),
|
||||
activeElements: [...document.querySelectorAll("button, a, [role='button'], [class*='active'], [class*='selected']")]
|
||||
.slice(0, 80)
|
||||
.map((el) => ({
|
||||
tag: el.tagName.toLowerCase(),
|
||||
text: el.textContent?.trim().slice(0, 120) ?? "",
|
||||
className: String(el.className ?? "").slice(0, 200),
|
||||
href: el instanceof HTMLAnchorElement ? el.href : "",
|
||||
})),
|
||||
})),
|
||||
);
|
||||
const metrics = await page.evaluate(() => ({
|
||||
scrollHeight: document.documentElement.scrollHeight,
|
||||
viewportHeight: innerHeight,
|
||||
}));
|
||||
const maxScroll = Math.max(0, metrics.scrollHeight - metrics.viewportHeight);
|
||||
if (y >= maxScroll - 4 && metrics.scrollHeight === previousHeight) break;
|
||||
previousHeight = metrics.scrollHeight;
|
||||
y = Math.min(maxScroll, y + 680);
|
||||
i += 1;
|
||||
}
|
||||
|
||||
await page.evaluate(() => window.scrollTo(0, 0));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
await page.screenshot({
|
||||
path: path.join(referenceDir, `source-${name}-full-after-scroll.png`),
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
const extract = await page.evaluate(() => {
|
||||
const styleProps = [
|
||||
"fontSize",
|
||||
"fontWeight",
|
||||
"fontFamily",
|
||||
"lineHeight",
|
||||
"letterSpacing",
|
||||
"color",
|
||||
"backgroundColor",
|
||||
"backgroundImage",
|
||||
"padding",
|
||||
"margin",
|
||||
"display",
|
||||
"position",
|
||||
"top",
|
||||
"left",
|
||||
"right",
|
||||
"bottom",
|
||||
"width",
|
||||
"height",
|
||||
"borderRadius",
|
||||
"boxShadow",
|
||||
"transform",
|
||||
"opacity",
|
||||
"zIndex",
|
||||
];
|
||||
|
||||
function compactStyles(el) {
|
||||
const cs = getComputedStyle(el);
|
||||
const out = {};
|
||||
for (const prop of styleProps) {
|
||||
const value = cs[prop];
|
||||
if (value && value !== "none" && value !== "normal" && value !== "auto" && value !== "0px" && value !== "rgba(0, 0, 0, 0)") {
|
||||
out[prop] = value;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
const visibleElements = [...document.querySelectorAll("body *")]
|
||||
.map((el) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const area = Math.round(rect.width * rect.height);
|
||||
return { el, rect, area };
|
||||
})
|
||||
.filter(({ rect, area }) => area > 5000 && rect.width > 40 && rect.height > 20)
|
||||
.slice(0, 220)
|
||||
.map(({ el, rect, area }) => ({
|
||||
tag: el.tagName.toLowerCase(),
|
||||
id: el.id,
|
||||
className: String(el.className ?? "").slice(0, 240),
|
||||
text: el.textContent?.trim().replace(/\s+/g, " ").slice(0, 260) ?? "",
|
||||
rect: {
|
||||
x: Math.round(rect.x),
|
||||
y: Math.round(rect.y + scrollY),
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height),
|
||||
},
|
||||
area,
|
||||
styles: compactStyles(el),
|
||||
}));
|
||||
|
||||
const images = [...document.images].map((img) => ({
|
||||
src: img.currentSrc || img.src,
|
||||
alt: img.alt,
|
||||
naturalWidth: img.naturalWidth,
|
||||
naturalHeight: img.naturalHeight,
|
||||
className: String(img.className ?? "").slice(0, 160),
|
||||
parentClassName: String(img.parentElement?.className ?? "").slice(0, 160),
|
||||
rect: (() => {
|
||||
const rect = img.getBoundingClientRect();
|
||||
return {
|
||||
x: Math.round(rect.x),
|
||||
y: Math.round(rect.y + scrollY),
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height),
|
||||
};
|
||||
})(),
|
||||
}));
|
||||
|
||||
const backgroundImages = [...document.querySelectorAll("*")]
|
||||
.map((el) => ({
|
||||
tag: el.tagName.toLowerCase(),
|
||||
className: String(el.className ?? "").slice(0, 180),
|
||||
backgroundImage: getComputedStyle(el).backgroundImage,
|
||||
}))
|
||||
.filter((item) => item.backgroundImage && item.backgroundImage !== "none")
|
||||
.slice(0, 260);
|
||||
|
||||
const videos = [...document.querySelectorAll("video")].map((video) => ({
|
||||
src: video.currentSrc || video.src,
|
||||
poster: video.poster,
|
||||
autoplay: video.autoplay,
|
||||
loop: video.loop,
|
||||
muted: video.muted,
|
||||
}));
|
||||
|
||||
const links = [...document.querySelectorAll("a")].map((a) => ({
|
||||
text: a.textContent?.trim().replace(/\s+/g, " ").slice(0, 160) ?? "",
|
||||
href: a.href,
|
||||
className: String(a.className ?? "").slice(0, 120),
|
||||
}));
|
||||
|
||||
const buttons = [...document.querySelectorAll("button, [role='button']")].map((button) => ({
|
||||
text: button.textContent?.trim().replace(/\s+/g, " ").slice(0, 160) ?? "",
|
||||
className: String(button.className ?? "").slice(0, 160),
|
||||
styles: compactStyles(button),
|
||||
}));
|
||||
|
||||
const fontFamilies = [...new Set([...document.querySelectorAll("body *")].slice(0, 500).map((el) => getComputedStyle(el).fontFamily))];
|
||||
const colors = [...new Set([...document.querySelectorAll("body *")].slice(0, 500).flatMap((el) => {
|
||||
const cs = getComputedStyle(el);
|
||||
return [cs.color, cs.backgroundColor].filter(Boolean);
|
||||
}))].filter((color) => color !== "rgba(0, 0, 0, 0)").slice(0, 100);
|
||||
|
||||
return {
|
||||
title: document.title,
|
||||
location: location.href,
|
||||
htmlLang: document.documentElement.lang,
|
||||
bodyText: document.body.innerText,
|
||||
meta: [...document.querySelectorAll("meta")].map((meta) => ({
|
||||
name: meta.getAttribute("name"),
|
||||
property: meta.getAttribute("property"),
|
||||
content: meta.getAttribute("content"),
|
||||
})),
|
||||
styleSheets: [...document.styleSheets].map((sheet) => sheet.href).filter(Boolean),
|
||||
scripts: [...document.scripts].map((script) => script.src).filter(Boolean),
|
||||
links: [...document.querySelectorAll("link")].map((link) => ({
|
||||
rel: link.rel,
|
||||
href: link.href,
|
||||
as: link.as,
|
||||
})),
|
||||
visibleElements,
|
||||
images,
|
||||
backgroundImages,
|
||||
videos,
|
||||
anchors: links,
|
||||
buttons,
|
||||
fontFamilies,
|
||||
colors,
|
||||
viewport: {
|
||||
width: innerWidth,
|
||||
height: innerHeight,
|
||||
scrollHeight: document.documentElement.scrollHeight,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await fs.writeFile(path.join(researchDir, `source-${name}.html`), await page.content());
|
||||
await fs.writeFile(
|
||||
path.join(researchDir, `source-${name}-extract.json`),
|
||||
JSON.stringify({ pageInfoBeforeScroll, extract, scrollSamples, consoleMessages, failedRequests }, null, 2),
|
||||
);
|
||||
|
||||
await context.close();
|
||||
return { pageInfoBeforeScroll, extract, scrollSamples, consoleMessages, failedRequests };
|
||||
}
|
||||
|
||||
const iphone = devices["iPhone 13 Pro"];
|
||||
const mobile = await captureViewport("mobile", {
|
||||
...iphone,
|
||||
viewport: { width: 390, height: 844 },
|
||||
});
|
||||
|
||||
const desktop = await captureViewport("desktop", {
|
||||
viewport: { width: 1440, height: 1200 },
|
||||
userAgent:
|
||||
"Mozilla/5.0 (Macintosh; Intel Mac OS X 14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36",
|
||||
deviceScaleFactor: 1,
|
||||
isMobile: false,
|
||||
hasTouch: false,
|
||||
});
|
||||
|
||||
await browser.close();
|
||||
|
||||
await fs.writeFile(
|
||||
path.join(researchDir, "source-summary.json"),
|
||||
JSON.stringify(
|
||||
{
|
||||
targetUrl,
|
||||
mobile: mobile.pageInfoBeforeScroll,
|
||||
desktop: desktop.pageInfoBeforeScroll,
|
||||
mobileAssetCounts: {
|
||||
images: mobile.extract.images.length,
|
||||
backgrounds: mobile.extract.backgroundImages.length,
|
||||
videos: mobile.extract.videos.length,
|
||||
},
|
||||
desktopAssetCounts: {
|
||||
images: desktop.extract.images.length,
|
||||
backgrounds: desktop.extract.backgroundImages.length,
|
||||
videos: desktop.extract.videos.length,
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
|
||||
console.log("Source capture complete.");
|
||||
Reference in New Issue
Block a user