40 lines
1.7 KiB
JavaScript
40 lines
1.7 KiB
JavaScript
import { chromium } from 'playwright';
|
|
/* Checks the hero video: does it load and play, is it gated off on phones and under reduced
|
|
motion, and does the hero fill the viewport. */
|
|
const [,, url, prefix] = process.argv;
|
|
const browser = await chromium.launch();
|
|
|
|
async function probe(label, opts, shots = []) {
|
|
const ctx = await browser.newContext(opts);
|
|
const page = await ctx.newPage();
|
|
const requested = [];
|
|
page.on('request', (r) => { if (/\.(mp4|webm)$/.test(r.url())) requested.push(r.url().split('/').pop()); });
|
|
await page.goto(url, { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(2500);
|
|
const info = await page.evaluate(() => {
|
|
const v = document.querySelector('video');
|
|
const hero = document.querySelector('.hero');
|
|
return {
|
|
hasVideo: !!v,
|
|
ready: v?.hasAttribute('data-ready') ?? null,
|
|
paused: v?.paused ?? null,
|
|
currentTime: v ? Math.round(v.currentTime * 10) / 10 : null,
|
|
videoSize: v ? `${v.videoWidth}x${v.videoHeight}` : null,
|
|
heroHeight: Math.round(hero.getBoundingClientRect().height),
|
|
viewport: window.innerHeight,
|
|
headerH: Math.round(document.querySelector('header').getBoundingClientRect().height),
|
|
};
|
|
});
|
|
for (const t of shots) {
|
|
await page.waitForTimeout(t);
|
|
await page.screenshot({ path: `${prefix}-${label}-${t}.png` });
|
|
}
|
|
console.log(label, JSON.stringify({ ...info, requested }));
|
|
await ctx.close();
|
|
}
|
|
|
|
await probe('desktop', { viewport: { width: 1440, height: 900 } }, [0, 2500]);
|
|
await probe('mobile', { viewport: { width: 390, height: 844 } });
|
|
await probe('reduced', { viewport: { width: 1440, height: 900 }, reducedMotion: 'reduce' });
|
|
await browser.close();
|