import {chromium} from 'playwright';
const url = process.argv[2] || 'http://localhost/s/stay';
const b = await chromium.launch({channel: 'chrome'});
const page = await b.newPage({viewport: {width: 1280, height: 900}});
await page.goto(url, {waitUntil: 'domcontentloaded'});
await page.waitForTimeout(6000);
const list = await page.evaluate(() => {
  const out = [];
  const add = (el, kind) => {
    const sec = el.closest('section[id], div[id]');
    out.push({kind, sec: sec ? sec.id : '?', label: el.getAttribute('aria-label') || '',
      w: Math.round(el.getBoundingClientRect().width),
      over: Math.round(el.scrollWidth - el.clientWidth), hidden: !el.getClientRects().length});
  };
  document.querySelectorAll('#root .slider-viewport').forEach((el) => add(el, 'embla'));
  document.querySelectorAll('#root *').forEach((el) => {
    if (el.classList.contains('slider-viewport')) return;
    const f = getComputedStyle(el).overflowX;
    if ((f === 'auto' || f === 'scroll') && el.scrollWidth - el.clientWidth > 40) add(el, 'scroll상자');
  });
  return out;
});
console.table(list);
await b.close();