94 lines
3.5 KiB
JavaScript
94 lines
3.5 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();
|
|
page.on('console', (m) => {
|
|
const t = m.text();
|
|
if (t.includes('anchor') || t.includes('Capability') || t.includes('section')) {
|
|
console.log('[browser]', t);
|
|
}
|
|
});
|
|
// 1) 打开首页
|
|
await page.goto(`${BASE}/view/mhzc/home`, { waitUntil: 'networkidle', timeout: 30000 });
|
|
// 等到 capability 区域可见
|
|
await page.waitForSelector('.capability-section', { timeout: 20000 });
|
|
console.log('home loaded');
|
|
|
|
// 滚动到 capability 区域
|
|
await page.evaluate(() => {
|
|
const el = document.getElementById('section-capability');
|
|
if (el) el.scrollIntoView({ behavior: 'instant', block: 'start' });
|
|
});
|
|
await page.waitForTimeout(800);
|
|
|
|
// 截图 home
|
|
await page.screenshot({ path: 'tmp-home.png', fullPage: false });
|
|
|
|
// 取各 capability 卡的文本
|
|
const cards = await page.$$eval('.capability-card .capability-name', (els) => els.map((e) => e.textContent.trim()));
|
|
console.log('capability cards:', cards);
|
|
|
|
// 点击 "碳核算平台"
|
|
const cardIndex = cards.indexOf('碳核算平台');
|
|
console.log('clicking index', cardIndex);
|
|
await page.locator('.capability-card').nth(cardIndex).click();
|
|
await page.waitForTimeout(2500);
|
|
console.log('after click url:', page.url());
|
|
|
|
// 等 section 出现
|
|
const hasContent1 = await page.locator('#content-1').count();
|
|
console.log('content-1 exists:', hasContent1);
|
|
if (hasContent1) {
|
|
const inView = await page.locator('#content-1').evaluate((el) => {
|
|
const r = el.getBoundingClientRect();
|
|
return { top: r.top, bottom: r.bottom, vh: window.innerHeight };
|
|
});
|
|
console.log('content-1 rect after click:', inView);
|
|
}
|
|
|
|
await page.screenshot({ path: 'tmp-gxnlpt-content-1.png', fullPage: false });
|
|
|
|
// 回到首页
|
|
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);
|
|
|
|
// 点击 "碳认证机构" -> content-2
|
|
const idx2 = cards.indexOf('碳认证机构');
|
|
await page.locator('.capability-card').nth(idx2).click();
|
|
await page.waitForTimeout(2500);
|
|
console.log('after click content-2 url:', page.url());
|
|
const r2 = await page.locator('#content-2').evaluate((el) => {
|
|
const r = el.getBoundingClientRect();
|
|
return { top: r.top, bottom: r.bottom };
|
|
});
|
|
console.log('content-2 rect after click:', r2);
|
|
|
|
// 点击 "更多能力"
|
|
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);
|
|
const moreIdx = cards.indexOf('更多能力');
|
|
await page.locator('.capability-card').nth(moreIdx).click();
|
|
await page.waitForTimeout(2000);
|
|
console.log('after click 更多能力 url:', page.url());
|
|
await page.screenshot({ path: 'tmp-gxnlpt-more.png', fullPage: false });
|
|
|
|
await browser.close();
|
|
})().catch((e) => {
|
|
console.error('TEST ERROR', e);
|
|
process.exit(1);
|
|
});
|