`cap_viewport.cjs`

34 lines
const { chromium, devices } = require('playwright');
(async () => {
  const url = process.argv[2] || 'https://corkwallcovering.com/';
  const q = process.argv[3] || 'grasscloth';
  const b = await chromium.launch();
  const ctx = await b.newContext({ ...devices['iPhone 13'] });
  const page = await ctx.newPage();
  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
  // scroll the search box into view like a user would, focus, type — but DON'T scroll to grid after
  await page.$eval('#searchInput', el => el.scrollIntoView({block:'center'}));
  await page.click('#searchInput');
  await page.type('#searchInput', q, { delay: 110 });
  await page.waitForTimeout(1600);
  const info = await page.evaluate(() => {
    const vh = window.innerHeight;
    const si = document.getElementById('searchInput').getBoundingClientRect();
    const gr = document.getElementById('grid').getBoundingClientRect();
    const firstCard = document.querySelector('#grid .card, #grid a.card');
    const fc = firstCard ? firstCard.getBoundingClientRect() : null;
    return {
      viewportH: vh,
      searchTop: Math.round(si.top),
      gridTop: Math.round(gr.top),
      firstCardTop: fc ? Math.round(fc.top) : null,
      gridBelowViewport: gr.top > vh,
      firstCardBelowViewport: fc ? fc.top > vh : null,
      statLine: (document.getElementById('statLine')||{}).textContent
    };
  });
  console.log(JSON.stringify(info, null, 2));
  await page.screenshot({ path: '/tmp/natural-viewport.png' }); // what the USER actually sees after typing
  await b.close();
})().catch(e => { console.error('ERR', e.message); process.exit(1); });