nunuchek
e092ac47c5
Штамп первого экрана на непрозрачной подложке, цифры под мягким фильтром, зазор кнопка→фото 40px. Ленты-наклейки сняты, у штампов на этикетках разные повороты и сдвиги. Ряд цифр в «Кто обжаривает» заменён одной tag-строкой. Дескрипторы сортов — поля этикетки, «в месяц» после цены набрано Golos. Дрип-пакеты на десктопе: три зоны по центру с вертикальными линейками. Доставка в колонках 7–12, на мобиле без фото мешка. Интерес в форме — радиокнопки. Хелпер typo: неразрывные пробелы и дефисы. Скрипт скриншотов: кадр 390 со скроллом.
37 lines
1.9 KiB
JavaScript
37 lines
1.9 KiB
JavaScript
// Скриншоты для критика: полная страница и первый экран на 390 и 1440, плюс кадр 390 со скроллом до y=1500.
|
|
// node scripts/screenshots.mjs <url> <каталог>
|
|
// Анимации доигрываются: страница прокручивается до низа, чтобы сработали IntersectionObserver.
|
|
import { mkdir } from 'node:fs/promises';
|
|
import { chromium } from 'playwright';
|
|
|
|
const [url = 'http://127.0.0.1:3000/', outDir = '.screenshots/critic'] = process.argv.slice(2);
|
|
await mkdir(outDir, { recursive: true });
|
|
|
|
const browser = await chromium.launch();
|
|
for (const width of [390, 1440]) {
|
|
const page = await browser.newPage({
|
|
viewport: { width, height: width === 390 ? 844 : 900 },
|
|
deviceScaleFactor: width === 390 ? 2 : 1,
|
|
});
|
|
await page.goto(url, { waitUntil: 'networkidle' });
|
|
await page.screenshot({ path: `${outDir}/${width}-fold.png` });
|
|
for (let y = 0; y < (await page.evaluate(() => document.body.scrollHeight)); y += 400) {
|
|
await page.evaluate((top) => window.scrollTo(0, top), y);
|
|
await page.waitForTimeout(120);
|
|
}
|
|
await page.waitForTimeout(800);
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.screenshot({ path: `${outDir}/${width}-full.png`, fullPage: true });
|
|
if (width === 390) {
|
|
// третий кадр: середина страницы, видна липкая CTA
|
|
await page.evaluate(() => window.scrollTo(0, 1500));
|
|
await page.waitForTimeout(600);
|
|
await page.screenshot({ path: `${outDir}/${width}-scroll.png` });
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
}
|
|
const overflow = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);
|
|
console.log(`${width}: ${outDir}/${width}-full.png, горизонтальный выход за экран ${overflow}px`);
|
|
await page.close();
|
|
}
|
|
await browser.close();
|