added product page

scripts/panel-shots.mjs

@@ -0,0 +1,18 @@
+import { chromium } from 'playwright';
+const [,, url, prefix, selector, width = '390'] = process.argv;
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: Number(width), height: 900 } });
+await page.goto(url, { waitUntil: 'networkidle' });
+const root = page.locator(selector);
+const tabs = root.locator('[role="tab"]');
+const n = await tabs.count();
+for (let i = 0; i < n; i++) {
+  await tabs.nth(i).click();
+  await page.waitForTimeout(500);
+  const panel = root.locator('[role="tabpanel"][data-open]').first();
+  await panel.scrollIntoViewIfNeeded();
+  await page.waitForTimeout(200);
+  await panel.screenshot({ path: `${prefix}-${i}.png` });
+}
+console.log('panels', n);
+await browser.close();

scripts/tabs-shots.mjs

@@ -0,0 +1,18 @@
+import { chromium } from 'playwright';
+const [,, url, prefix, selector, width = '1440'] = process.argv;
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: Number(width), height: 1100 } });
+await page.goto(url, { waitUntil: 'networkidle' });
+const root = page.locator(selector);
+const tabs = root.locator('[role="tab"]');
+const n = await tabs.count();
+for (let i = 0; i < n; i++) {
+  await tabs.nth(i).click();
+  await page.waitForTimeout(450);
+  const stage = root.locator('[data-stage-item][data-active]').first();
+  await stage.scrollIntoViewIfNeeded();
+  await page.waitForTimeout(200);
+  await stage.screenshot({ path: `${prefix}-${i}.png` });
+}
+console.log('tabs', n);
+await browser.close();

scripts/tabs-test.mjs

@@ -8,7 +8,7 @@ await tabs.nth(0).focus();
 await page.keyboard.press('ArrowDown');
 await page.waitForTimeout(500);
 const selected = await page.evaluate(() => Array.from(document.querySelectorAll('[role="tab"]')).map(t => t.getAttribute('aria-selected')));
-const activeImg = await page.evaluate(() => Array.from(document.querySelectorAll('[data-image]')).map(p => p.hasAttribute('data-active')));
+const activeImg = await page.evaluate(() => Array.from(document.querySelectorAll('[data-stage-item]')).map(p => p.hasAttribute('data-active')));
 const focused = await page.evaluate(() => document.activeElement?.textContent?.trim());
 console.log({ selected, activeImg, focused });
 await page.locator('#sectors').scrollIntoViewIfNeeded();