txw/tmp-snap.mjs
2026-06-05 12:54:11 +08:00

55 lines
1.8 KiB
JavaScript

import { chromium } from 'playwright';
const BASE = 'http://localhost:9027';
(async () => {
const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
const page = await ctx.newPage();
await page.goto(`${BASE}/view/mhzc/home`, { waitUntil: 'networkidle', timeout: 30000 });
await page.waitForSelector('.capability-section', { timeout: 20000 });
await page.evaluate(() => {
const el = document.getElementById('section-capability');
if (el) el.scrollIntoView({ behavior: 'instant', block: 'start' });
});
await page.waitForTimeout(800);
await page.locator('.capability-card').nth(0).click();
await page.waitForTimeout(3500);
// 给 gxnlpt-page 元素截图
const gxnlptEl = await page.locator('.gxnlpt-page').first();
await gxnlptEl.screenshot({ path: 'tmp-gxnlpt-el.png' });
// 给视口截图
await page.screenshot({ path: 'tmp-snap-viewport.png', fullPage: false });
// 给 body 截图
const body = await page.locator('body').first();
await body.screenshot({ path: 'tmp-snap-body.png' });
// 检查 gxnlpt-page 的可见性
const r = await gxnlptEl.evaluate((el) => {
const rect = el.getBoundingClientRect();
const style = getComputedStyle(el);
return {
rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height, bottom: rect.bottom, right: rect.right },
display: style.display,
visibility: style.visibility,
opacity: style.opacity,
zIndex: style.zIndex,
transform: style.transform,
transformOrigin: style.transformOrigin,
position: style.position,
};
});
console.log('gxnlpt:', JSON.stringify(r, null, 2));
await browser.close();
})().catch((e) => {
console.error('TEST ERROR', e);
process.exit(1);
});