25 lines
1.4 KiB
JavaScript
25 lines
1.4 KiB
JavaScript
import { chromium } from 'playwright';
|
|
/* Does the pinned panel hold from the first step to the last, and let go cleanly after? */
|
|
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 geo = await page.evaluate(() => {
|
|
const sc = document.querySelector('.how__scroller').getBoundingClientRect();
|
|
return { top: Math.round(sc.top + window.scrollY), height: Math.round(sc.height) };
|
|
});
|
|
const marks = { 'enter': geo.top, 'mid': geo.top + geo.height / 2, 'lastStep': geo.top + geo.height - (window?.innerHeight ?? 900), 'exit': geo.top + geo.height - 200 };
|
|
for (const [name, y] of Object.entries(marks)) {
|
|
await page.evaluate((y) => window.scrollTo(0, y), y);
|
|
await page.waitForTimeout(800);
|
|
const info = await page.evaluate(() => {
|
|
const st = document.querySelector('.how__sticky').getBoundingClientRect();
|
|
const active = Array.from(document.querySelectorAll('[data-step]')).findIndex((s) => s.hasAttribute('data-active'));
|
|
return { stickyTop: Math.round(st.top), stickyBottom: Math.round(st.bottom), active };
|
|
});
|
|
console.log(name.padEnd(9), JSON.stringify(info));
|
|
await page.screenshot({ path: `${prefix}-${name}.png` });
|
|
}
|
|
console.log('scroller', JSON.stringify(geo));
|
|
await browser.close();
|