36 lines
1.7 KiB
TypeScript
36 lines
1.7 KiB
TypeScript
|
import { test } from '@playwright/test';
|
||
|
|
test('mobile hero geometry', async ({ page }) => {
|
||
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
||
|
|
await page.goto('/');
|
||
|
|
const out = await page.evaluate(() => {
|
||
|
|
const pick = (sel: string) => {
|
||
|
|
const el = document.querySelector(sel) as HTMLElement | null;
|
||
|
|
if (!el) return null;
|
||
|
|
const r = el.getBoundingClientRect();
|
||
|
|
const cs = getComputedStyle(el);
|
||
|
|
return { left: Math.round(r.left), right: Math.round(r.right),
|
||
|
|
width: Math.round(r.width), height: Math.round(r.height),
|
||
|
|
pad: cs.padding, cls: el.className.toString().slice(0, 40) };
|
||
|
|
};
|
||
|
|
const input = document.querySelector('input[type="search"]') as HTMLElement;
|
||
|
|
const box = input?.closest('div');
|
||
|
|
const form = input?.closest('form');
|
||
|
|
return {
|
||
|
|
h1: pick('h1'),
|
||
|
|
lede: pick('h1 + p') ?? pick('p'),
|
||
|
|
omniBox: box ? { left: Math.round(box.getBoundingClientRect().left),
|
||
|
|
width: Math.round(box.getBoundingClientRect().width),
|
||
|
|
pad: getComputedStyle(box).padding,
|
||
|
|
dir: getComputedStyle(box).flexDirection,
|
||
|
|
cls: box.className.toString().slice(0,40) } : null,
|
||
|
|
input: pick('input[type="search"]'),
|
||
|
|
form: form ? { left: Math.round(form.getBoundingClientRect().left),
|
||
|
|
width: Math.round(form.getBoundingClientRect().width),
|
||
|
|
pad: getComputedStyle(form).padding,
|
||
|
|
cls: form.className.toString().slice(0,40) } : null,
|
||
|
|
filterBar: pick('form'). // placeholder
|
||
|
|
constructor === Object ? null : null,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
console.log(JSON.stringify(out, null, 2));
|
||
|
|
});
|