138 lines
4.7 KiB
JavaScript
138 lines
4.7 KiB
JavaScript
import { chromium } from 'playwright';
|
|
import { readFileSync } from 'fs';
|
|
|
|
const perlerPath = '/Users/guchen/.hermes/workspace/pindou/src/data/palettes/compiled/perler.json';
|
|
const palette = JSON.parse(readFileSync(perlerPath, 'utf-8'));
|
|
console.log(`Loaded ${palette.length} colors from perler.json`);
|
|
|
|
// Pick some distinct colors
|
|
const colors = [
|
|
palette.find(c => c.id === 'H01') || palette[0], // White
|
|
palette.find(c => c.id === 'H05') || palette[4], // Orange
|
|
palette.find(c => c.id === 'H06') || palette[5], // Red
|
|
palette.find(c => c.id === 'H17') || palette[16], // Blue
|
|
palette.find(c => c.id === 'H10') || palette[9], // Green
|
|
].filter(Boolean);
|
|
|
|
console.log('Test colors:', colors.map(c => `${c.id} ${c.nameZh} rgb(${c.rgb.join(',')})`));
|
|
|
|
// Create a 10x10 test grid with alternating colors
|
|
const SIZE = 10;
|
|
const grid = [];
|
|
const legendMap = new Map();
|
|
|
|
for (let row = 0; row < SIZE; row++) {
|
|
const rowData = [];
|
|
for (let col = 0; col < SIZE; col++) {
|
|
const colorIdx = (row + col) % colors.length;
|
|
const color = colors[colorIdx];
|
|
rowData.push({ color, row, col });
|
|
|
|
if (!legendMap.has(color.id)) {
|
|
legendMap.set(color.id, { color, count: 0, symbol: String.fromCharCode(65 + legendMap.size) });
|
|
}
|
|
legendMap.get(color.id).count++;
|
|
}
|
|
grid.push(rowData);
|
|
}
|
|
|
|
const legend = Array.from(legendMap.values());
|
|
const totalBeads = SIZE * SIZE;
|
|
const usedColors = legend.length;
|
|
|
|
// Create sessionStorage payload matching processStore format
|
|
const storageData = {
|
|
sourceImage: null,
|
|
extractedImage: null,
|
|
canvasWidth: SIZE,
|
|
canvasHeight: SIZE,
|
|
fitMode: 'fit',
|
|
grid,
|
|
legend,
|
|
totalBeads,
|
|
usedColors,
|
|
status: 'done',
|
|
};
|
|
|
|
console.log('Test grid:', SIZE, 'x', SIZE, 'total beads:', totalBeads, 'colors:', usedColors);
|
|
|
|
const BROWSER = await chromium.launch({ headless: true });
|
|
const PAGE = await BROWSER.newPage();
|
|
|
|
// Capture ALL console output
|
|
const logs = [];
|
|
PAGE.on('console', msg => logs.push(`[${msg.type()}] ${msg.text()}`));
|
|
PAGE.on('pageerror', err => logs.push(`[PAGE_ERROR] ${err.message}`));
|
|
|
|
const BASE = 'http://localhost:5174/pindou/';
|
|
|
|
// Inject sessionStorage BEFORE navigating
|
|
await PAGE.goto(BASE, { waitUntil: 'domcontentloaded', timeout: 10000 });
|
|
await PAGE.evaluate((data) => {
|
|
sessionStorage.setItem('bead-process-state', JSON.stringify(data));
|
|
}, storageData);
|
|
|
|
// Verify it was written
|
|
const stored = await PAGE.evaluate(() => sessionStorage.getItem('bead-process-state'));
|
|
console.log('sessionStorage written:', stored ? `${stored.length} bytes` : 'FAILED');
|
|
|
|
// Now navigate to result page
|
|
await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
|
|
await PAGE.waitForTimeout(2000);
|
|
|
|
// Detailed DOM inspection
|
|
const domInfo = await PAGE.evaluate(() => {
|
|
const canvasInner = document.querySelector('.canvas-inner');
|
|
const allCanvases = Array.from(document.querySelectorAll('canvas'));
|
|
const emptyState = document.querySelector('.empty-state');
|
|
const patternSection = document.querySelector('.pattern-section');
|
|
const beadPattern = document.querySelector('.bead-pattern');
|
|
const modeSwitcher = document.querySelector('.mode-switcher');
|
|
const infoBar = document.querySelector('.info-bar');
|
|
|
|
return {
|
|
// Empty state
|
|
emptyStateVisible: !!emptyState && emptyState.offsetParent !== null,
|
|
emptyStateText: emptyState?.textContent?.trim(),
|
|
|
|
// Pattern section
|
|
patternSectionVisible: !!patternSection && patternSection.offsetParent !== null,
|
|
beadPatternExists: !!beadPattern,
|
|
modeSwitcherText: modeSwitcher?.textContent?.trim(),
|
|
infoBarText: infoBar?.textContent?.trim(),
|
|
|
|
// Canvas inner
|
|
canvasInnerExists: !!canvasInner,
|
|
canvasInnerHTML: canvasInner?.innerHTML?.substring(0, 300),
|
|
canvasInnerChildCount: canvasInner?.children?.length,
|
|
canvasInnerTagName: canvasInner?.tagName,
|
|
canvasInnerSize: canvasInner ? `${canvasInner.offsetWidth}x${canvasInner.offsetHeight}` : 'N/A',
|
|
|
|
// All canvases
|
|
canvasCount: allCanvases.length,
|
|
canvases: allCanvases.map(c => ({
|
|
width: c.width,
|
|
height: c.height,
|
|
naturalWidth: c.naturalWidth || c.width,
|
|
naturalHeight: c.naturalHeight || c.height,
|
|
parentClass: c.parentElement?.className,
|
|
parentTag: c.parentElement?.tagName,
|
|
display: getComputedStyle(c).display,
|
|
visibility: getComputedStyle(c).visibility,
|
|
})),
|
|
};
|
|
});
|
|
|
|
console.log('\n=== DOM State ===');
|
|
console.log(JSON.stringify(domInfo, null, 2));
|
|
|
|
// Print ALL console logs
|
|
console.log('\n=== All Console Logs ===');
|
|
logs.forEach(l => console.log(l));
|
|
|
|
// Screenshot for visual inspection
|
|
await PAGE.screenshot({ path: '/Users/guchen/.openclaw/workspace/pindou-result-debug.png', fullPage: true });
|
|
console.log('\nScreenshot saved to pindou-result-debug.png');
|
|
|
|
await BROWSER.close();
|