import {chromium, devices} from 'playwright';
const b = await chromium.launch({channel: 'chrome'});

// ① 데스크톱 — 휠로 내린 뒤 커서를 레일 밖으로 뺀다
{
  const page = await b.newPage({viewport: {width: 1280, height: 900}});
  await page.goto('http://localhost/s/stay', {waitUntil: 'domcontentloaded'});
  await page.waitForTimeout(5000);
  await page.evaluate(() => document.querySelector('#itinerary').scrollIntoView({block: 'center'}));
  await page.waitForTimeout(9000);
  await page.evaluate(() => { const r = document.querySelector('#itinerary .slider-viewport');
    window.__pos = () => { const c = r.firstElementChild; let m = 0;
      try { m = new DOMMatrix(getComputedStyle(c).transform).m41; } catch {} return Math.round(r.scrollLeft + m); }; });
  await page.mouse.move(640, 450);
  await page.mouse.wheel(0, 200);
  const p0 = await page.evaluate(() => window.__pos());
  await page.waitForTimeout(10000);
  const stay = await page.evaluate((p) => window.__pos() - p, p0);
  await page.mouse.move(5, 5);              // 커서를 레일 밖으로
  await page.waitForTimeout(10000);
  const after = await page.evaluate((p) => window.__pos() - p, p0);
  console.log(`데스크톱: 커서가 레일 위 10초 → ${stay}px · 커서 뺀 뒤 10초 → ${after}px`);
  await page.close();
}

// ② 모바일 — 손가락으로 세로 스와이프
{
  const ctx = await b.newContext({...devices['iPhone 13'], hasTouch: true, isMobile: true});
  const page = await ctx.newPage();
  await page.goto('http://localhost/s/stay', {waitUntil: 'domcontentloaded'});
  await page.waitForTimeout(6000);
  await page.evaluate(() => document.querySelector('#itinerary').scrollIntoView({block: 'center'}));
  await page.waitForTimeout(9000);
  await page.evaluate(() => { const r = document.querySelector('#itinerary .slider-viewport');
    window.__pos = () => { const c = r.firstElementChild; let m = 0;
      try { m = new DOMMatrix(getComputedStyle(c).transform).m41; } catch {} return Math.round(r.scrollLeft + m); }; });
  const p0 = await page.evaluate(() => window.__pos());
  // 세로 스와이프 (레일 위에서)
  await page.touchscreen.tap(200, 400);
  await page.waitForTimeout(600);
  const t1 = await page.evaluate((p) => window.__pos() - p, p0);
  await page.waitForTimeout(6000);
  const t6 = await page.evaluate((p) => window.__pos() - p, p0);
  await page.waitForTimeout(8000);
  const t14 = await page.evaluate((p) => window.__pos() - p, p0);
  console.log(`모바일: 탭 직후 ${t1}px · 6초 ${t6}px · 14초 ${t14}px`);
  await ctx.close();
}
await b.close();