95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
import { chromium } from 'playwright';
|
|
|
|
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}`);
|
|
});
|
|
|
|
// Go to result page directly and inject grid data
|
|
const BASE = 'http://localhost:5174/pindou/';
|
|
|
|
// First: go to hash route with result page
|
|
await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
|
|
await PAGE.waitForTimeout(2000);
|
|
|
|
// Check what's on the page
|
|
const domInfo = await PAGE.evaluate(() => {
|
|
const canvasInner = document.querySelector('.canvas-inner');
|
|
const canvasWrapper = document.querySelector('.canvas-wrapper');
|
|
const beadPattern = document.querySelector('.bead-pattern');
|
|
const pageResult = document.querySelector('.page-result');
|
|
const patternSection = document.querySelector('.pattern-section');
|
|
const emptyState = document.querySelector('.empty-state');
|
|
|
|
return {
|
|
canvasInnerHTML: canvasInner?.innerHTML?.substring(0, 200),
|
|
canvasInnerChildCount: canvasInner?.children?.length,
|
|
canvasInnerTagName: canvasInner?.tagName,
|
|
canvasWrapperExists: !!canvasWrapper,
|
|
beadPatternExists: !!beadPattern,
|
|
pageResultExists: !!pageResult,
|
|
patternSectionExists: !!patternSection,
|
|
emptyStateExists: !!emptyState,
|
|
emptyStateText: emptyState?.textContent?.substring(0, 100),
|
|
// Check all canvases
|
|
allCanvases: Array.from(document.querySelectorAll('canvas')).map(c => ({
|
|
width: c.width,
|
|
height: c.height,
|
|
parent: c.parentElement?.className,
|
|
})),
|
|
};
|
|
});
|
|
|
|
console.log('=== DOM State ===');
|
|
console.log(JSON.stringify(domInfo, null, 2));
|
|
|
|
// Print relevant console logs
|
|
console.log('\n=== Console Logs ===');
|
|
const relevant = logs.filter(l =>
|
|
l.includes('BeadPattern') ||
|
|
l.includes('result.vue') ||
|
|
l.includes('processStore') ||
|
|
l.includes('GridRenderer') ||
|
|
l.includes('renderCanvas') ||
|
|
l.includes('PAGE_ERROR') ||
|
|
l.includes('restoreFromStorage') ||
|
|
l.includes('hasValidData') ||
|
|
l.includes('canvas') ||
|
|
l.includes('Canvas')
|
|
);
|
|
relevant.forEach(l => console.log(l));
|
|
|
|
if (relevant.length === 0) {
|
|
console.log('(No relevant BeadPattern/result logs found. Showing all logs:)');
|
|
logs.forEach(l => console.log(l));
|
|
}
|
|
|
|
// Try to access the store directly
|
|
const storeInfo = await PAGE.evaluate(() => {
|
|
// Try accessing Pinia store through the Vue app
|
|
const app = document.querySelector('#app');
|
|
const vm = app?.__vue_app__;
|
|
return {
|
|
hasApp: !!app,
|
|
hasVueApp: !!vm,
|
|
localStorage: {
|
|
'bead-process-state': localStorage.getItem('bead-process-state')?.substring(0, 200),
|
|
},
|
|
sessionStorage: {
|
|
'bead-process-state': sessionStorage.getItem('bead-process-state')?.substring(0, 200),
|
|
},
|
|
};
|
|
});
|
|
|
|
console.log('\n=== Store Info ===');
|
|
console.log(JSON.stringify(storeInfo, null, 2));
|
|
|
|
await BROWSER.close();
|