leefer/aigc-home
1
0
Fork 0
Code Issues Pull Requests 11 Actions Packages Projects Releases Wiki Activity

test: map canvas viewport and minimap state in comparisons

Browse Source 
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
leefer
2026-10-23 18:54:50 +08:00
co-authored by multica-agent
parent 32d0297564
commit 37bd8d85b8
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/hel818.cjs
+4 -3
View File
@@ -30,11 +30,12 @@ const theme=async(p,id)=>{await p.evaluate(id=>{document.documentElement.dataset
await sample.setViewportSize({width,height});await sample.goto('http://127.0.0.1:'+server.address().port+'/?theme='+id+'&chrome=0');await wait(150);
await sample.screenshot({path:`${OUT}/shots/reference-original-${id}-${width}.png`});
// Runtime-only data/state mapping: source HTML and its CSS stay untouched.
const mapping=await p.evaluate(()=>{const board=document.querySelector('.flow-panel').getBoundingClientRect();return {title:document.querySelector('.title-btn').textContent,cards:[...document.querySelectorAll('.canvas-card')].map(e=>{const r=e.getBoundingClientRect(),m=e.querySelector('.media');return {title:e.querySelector('.title').textContent,foot:e.querySelector('footer').innerText,kind:e.dataset.kind,x:r.x-board.x,y:r.y-board.y,scale:r.width/parseFloat(getComputedStyle(e).width),image:m.querySelector('img')?.src,selected:e.classList.contains('a-in-frame'),status:e.querySelector('.status')?.textContent||''}}),messages:[...document.querySelectorAll('.chat-panel .row')].filter(e=>e.matches('.user,.assistant')).map(e=>({user:e.classList.contains('user'),name:e.querySelector('.agent-tag')?.innerText,text:e.querySelector('.bubble')?.innerText}))}});
const frame=await p.locator('.canvas-card video').screenshot();mapping.video='data:image/png;base64,'+frame.toString('base64');
const mapping=await p.evaluate(()=>{const board=document.querySelector('.flow-panel').getBoundingClientRect();return {title:document.querySelector('.title-btn').textContent,zoom:document.querySelector('.zoom-value').textContent,subtitle:document.querySelector('.chat-subtitle')?.textContent,sendDisabled:document.querySelector('.composer button.primary').disabled,cards:[...document.querySelectorAll('.canvas-card')].map(e=>{const r=e.getBoundingClientRect(),m=e.querySelector('.media');return {title:e.querySelector('.title').textContent,foot:e.querySelector('footer').innerText,kind:e.dataset.kind,x:r.x-board.x,y:r.y-board.y,scale:r.width/parseFloat(getComputedStyle(e).width),image:m.querySelector('img')?.src,selected:e.classList.contains('a-in-frame'),status:e.querySelector('.status')?.textContent||''}}),messages:[...document.querySelectorAll('.chat-panel .row')].filter(e=>e.matches('.user,.assistant')).map(e=>({user:e.classList.contains('user'),name:e.querySelector('.agent-tag')?.innerText,text:e.querySelector('.bubble')?.innerText}))}});
const frame=await p.locator('.canvas-card video').screenshot();mapping.video='data:image/png;base64,'+frame.toString('base64');mapping.minimap='data:image/png;base64,'+(await p.locator('.svelte-flow__minimap svg').screenshot()).toString('base64');
await sample.evaluate(mapping=>{
document.querySelector('.zoomv').textContent=mapping.zoom;document.querySelector('.chat-head .sub').textContent=mapping.subtitle;document.querySelector('.cbar .btn.primary').disabled=mapping.sendDisabled;const nativeMap=document.createElement('img');nativeMap.src=mapping.minimap;nativeMap.style.cssText='width:100%;height:100%;display:block';document.querySelector('.minimap .mm').replaceChildren(nativeMap);document.querySelector('.minimap .mmtag')?.remove();
document.querySelector('.demo-badge').remove();document.querySelector('.titlecard .saved').remove();document.querySelector('.tname').firstChild.nodeValue=mapping.title.trim();
document.querySelectorAll('.card').forEach((e,i)=>{const d=mapping.cards[i];e.classList.toggle('sel',d.selected);e.classList.toggle('on',d.selected);e.classList.remove('running');e.style.setProperty('left',d.x+'px','important');e.style.setProperty('top',d.y+'px','important');e.style.transform='scale('+d.scale+')';e.style.transformOrigin='top left';e.querySelector('.t').textContent=d.title;const m=e.querySelector('.media');m.replaceChildren();const img=document.createElement('img');img.src=d.image||mapping.video;img.style.cssText='display:block;width:100%;height:100%;object-fit:cover';m.append(img);const badge=document.createElement('span');badge.className='kind';badge.textContent=d.kind==='video'?'video':'image';m.append(badge);const foot=e.querySelector('.cfoot');foot.replaceChildren();const left=document.createElement('span');left.textContent=d.foot.replace(/\s*#\d+$/,'');const grow=document.createElement('span');grow.className='grow';const number=document.createElement('span');number.className='mono';number.textContent=d.foot.match(/#\d+$/)?.[0]||'';foot.append(left,grow,number);const chip=e.querySelector('.chead .pill');if(chip)chip.textContent=d.kind;});
document.querySelectorAll('.card').forEach((e,i)=>{const d=mapping.cards[i];e.classList.toggle('sel',d.selected);e.classList.toggle('on',d.selected);e.classList.remove('running');if(d.kind!=='video')e.querySelector('.chead .play')?.remove();e.style.setProperty('left',d.x+'px','important');e.style.setProperty('top',d.y+'px','important');e.style.transform='scale('+d.scale+')';e.style.transformOrigin='top left';e.querySelector('.t').textContent=d.title;const m=e.querySelector('.media');m.replaceChildren();const img=document.createElement('img');img.src=d.image||mapping.video;img.style.cssText='display:block;width:100%;height:100%;object-fit:cover';m.append(img);const badge=document.createElement('span');badge.className='kind';badge.textContent=d.kind==='video'?'video':'image';m.append(badge);const foot=e.querySelector('.cfoot');foot.replaceChildren();const left=document.createElement('span');left.textContent=d.foot.replace(/\s*#\d+$/,'');const grow=document.createElement('span');grow.className='grow';const number=document.createElement('span');number.className='mono';number.textContent=d.foot.match(/#\d+$/)?.[0]||'';foot.append(left,grow,number);const chip=e.querySelector('.chead .pill');if(chip)chip.textContent=d.kind;});
const body=document.querySelector('.chat-body');body.replaceChildren();for(const d of mapping.messages){const row=document.createElement('div');row.className='msg '+(d.user?'me':'ai');const wrap=document.createElement('div');if(!d.user){const tag=document.createElement('div');tag.className='agent-tag';tag.textContent=d.name;wrap.append(tag)}const b=document.createElement('div');b.className='bub';b.textContent=d.text;wrap.append(b);row.append(wrap);body.append(row)}
},mapping);await wait(50);
fs.writeFileSync(`${OUT}/mapping-${id}-${width}.json`,JSON.stringify(mapping,null,2));