75 lines
2.8 KiB
JavaScript
75 lines
2.8 KiB
JavaScript
import { chromium } from 'playwright';
|
|
|
|
const BROWSER = await chromium.launch({ headless: true });
|
|
const PAGE = await BROWSER.newPage();
|
|
const errors = [];
|
|
PAGE.on('pageerror', err => errors.push(err.message));
|
|
|
|
const BASE = 'https://gch3n.online/pindou/';
|
|
|
|
// STEP 1: Create test image and inject via sessionStorage
|
|
await PAGE.goto(BASE, { waitUntil: 'domcontentloaded', timeout: 15000 });
|
|
|
|
const imageDataUrl = await PAGE.evaluate(() => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 100; canvas.height = 100;
|
|
const ctx = canvas.getContext('2d');
|
|
const g = ctx.createLinearGradient(0, 0, 100, 100);
|
|
g.addColorStop(0, '#ff0000'); g.addColorStop(0.25, '#00ff00');
|
|
g.addColorStop(0.5, '#0000ff'); g.addColorStop(0.75, '#ffff00');
|
|
g.addColorStop(1, '#ff00ff');
|
|
ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 100);
|
|
return canvas.toDataURL('image/png');
|
|
});
|
|
|
|
await PAGE.evaluate((img) => {
|
|
sessionStorage.setItem('bead-process-state', JSON.stringify({
|
|
sourceImage: img, extractedImage: null,
|
|
canvasWidth: 29, canvasHeight: 29, fitMode: 'fit',
|
|
grid: [], legend: [], totalBeads: 0, usedColors: 0, status: 'idle',
|
|
}));
|
|
}, imageDataUrl);
|
|
|
|
// STEP 2: Navigate to editor, then processing
|
|
console.log('=== Navigating to processing ===');
|
|
await PAGE.goto(`${BASE}#/pages/processing/processing`, { waitUntil: 'networkidle', timeout: 15000 });
|
|
await PAGE.waitForTimeout(5000); // Wait for pipeline to run
|
|
|
|
let hash = await PAGE.evaluate(() => window.location.hash);
|
|
console.log('After processing:', hash);
|
|
|
|
if (!hash.includes('result')) {
|
|
await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
|
|
await PAGE.waitForTimeout(2000);
|
|
}
|
|
|
|
// STEP 3: Check result
|
|
const state = await PAGE.evaluate(() => {
|
|
const canvasInner = document.querySelector('.canvas-inner');
|
|
const allCanvases = document.querySelectorAll('canvas');
|
|
const emptyState = document.querySelector('.empty-state');
|
|
const infoBar = document.querySelector('.info-bar');
|
|
return {
|
|
emptyVisible: !!emptyState && emptyState.offsetParent !== null,
|
|
infoBarText: infoBar?.textContent?.trim(),
|
|
canvasCount: allCanvases.length,
|
|
canvasSize: allCanvases[0] ? `${allCanvases[0].width}x${allCanvases[0].height}` : 'none',
|
|
canvasInnerChildCount: canvasInner?.children?.length,
|
|
};
|
|
});
|
|
|
|
console.log('\n=== Final Result ===');
|
|
console.log(JSON.stringify(state, null, 2));
|
|
console.log('Page errors:', errors.length, errors.slice(0, 3));
|
|
|
|
if (state.canvasCount > 0) {
|
|
console.log('\n✅ SUCCESS: Canvas rendered correctly on production!');
|
|
} else if (state.emptyVisible) {
|
|
console.log('\n⚠️ Empty state shown - pipeline may not have run');
|
|
} else {
|
|
console.log('\n❌ FAILED: No canvas and no empty state');
|
|
}
|
|
|
|
await PAGE.screenshot({ path: '/Users/guchen/.openclaw/workspace/pindou-live-flow.png', fullPage: true });
|
|
await BROWSER.close();
|