41 lines
2.0 KiB
JavaScript
41 lines
2.0 KiB
JavaScript
import { chromium } from 'playwright';
|
|
/* Walks the pinned section step by step: which step is active, does the text column fit
|
|
inside the pinned area, and is the panel where it should be. */
|
|
const [,, url, prefix, width = '1440', height = '900'] = process.argv;
|
|
const browser = await chromium.launch();
|
|
const page = await browser.newPage({ viewport: { width: Number(width), height: Number(height) } });
|
|
await page.goto(url, { waitUntil: 'networkidle' });
|
|
const count = await page.evaluate(() => document.querySelectorAll('[data-trigger]').length);
|
|
const rows = [];
|
|
for (let i = 0; i < count; i++) {
|
|
await page.evaluate((i) => {
|
|
const t = document.querySelectorAll('[data-trigger]')[i];
|
|
const r = t.getBoundingClientRect();
|
|
window.scrollTo(0, window.scrollY + r.top + r.height / 2 - window.innerHeight / 2);
|
|
}, i);
|
|
await page.waitForTimeout(900);
|
|
const info = await page.evaluate(() => {
|
|
const steps = Array.from(document.querySelectorAll('[data-step]'));
|
|
const active = steps.findIndex((s) => s.hasAttribute('data-active'));
|
|
const sticky = document.querySelector('.how__sticky').getBoundingClientRect();
|
|
const text = document.querySelector('.how__text');
|
|
const first = text.getBoundingClientRect();
|
|
const last = steps[steps.length - 1].getBoundingClientRect();
|
|
const fig = document.querySelector('[data-figure][data-active]');
|
|
const f = fig ? fig.getBoundingClientRect() : null;
|
|
const svg = fig ? fig.querySelector('svg').getBoundingClientRect() : null;
|
|
return {
|
|
active,
|
|
textTop: Math.round(first.top - sticky.top),
|
|
spaceBelowList: Math.round(sticky.bottom - last.bottom),
|
|
panel: f ? `${Math.round(f.width)}x${Math.round(f.height)}` : null,
|
|
drawing: svg ? `${Math.round(svg.width)}x${Math.round(svg.height)}` : null,
|
|
panelInside: f ? (f.top >= sticky.top - 1 && f.bottom <= sticky.bottom + 1) : null,
|
|
};
|
|
});
|
|
rows.push({ step: i, ...info });
|
|
await page.screenshot({ path: `${prefix}-${i}.png` });
|
|
}
|
|
console.table(rows);
|
|
await browser.close();
|