const { chromium } = require('playwright');
(async () => {
  const b = await chromium.launch();
  const p = await b.newPage({ viewport: { width: 1200, height: 2200 }, deviceScaleFactor: 3 });
  await p.goto('http://localhost:8081/', { waitUntil: 'networkidle' });
  // localizar card cuyo autor sea Fray Marcos
  const card = p.locator('.fea-card', { hasText: 'Fray Marcos' }).first();
  await card.scrollIntoViewIfNeeded();
  await card.screenshot({ path: '/tmp/card_fraymarcos.png' });
  // estilos calculados del span avatar y del img
  const info = await card.evaluate((el) => {
    const span = el.querySelector('.fea-card-avatar');
    const img  = el.querySelector('img');
    const cs = getComputedStyle(span);
    const ci = getComputedStyle(img);
    return {
      span_borderRadius: cs.borderRadius, span_overflow: cs.overflow,
      span_boxShadow: cs.boxShadow, span_bg: cs.backgroundColor,
      img_src: img.currentSrc, img_borderRadius: ci.borderRadius,
      img_bg: ci.backgroundColor, img_objectFit: ci.objectFit,
      img_natural: img.naturalWidth + 'x' + img.naturalHeight,
    };
  });
  console.log(JSON.stringify(info, null, 2));
  // tambien una card de iniciales para comparar
  const card2 = p.locator('.fea-card', { hasText: 'María Gómez' }).first();
  await card2.screenshot({ path: '/tmp/card_initials.png' }).catch(()=>{});
  await b.close();
})();