hanzo.ai/scripts/take-screenshots.mjs

import { chromium } from '@playwright/test';
import path from 'node:path';

async function main() {
  const browser = await chromium.launch({ headless: true });
  const desktopDir = '/home/z/Desktop';

  const targets = [
    {
      name: 'hanzo-pricing-personal-desktop.png',
      url: 'http://localhost:3000/pricing',
      viewport: { width: 1440, height: 1200 },
      isMobile: false,
      tab: 'personal',
    },
    {
      name: 'hanzo-pricing-business-desktop.png',
      url: 'http://localhost:3000/pricing',
      viewport: { width: 1440, height: 1200 },
      isMobile: false,
      tab: 'business',
    },
    {
      name: 'hanzo-pricing-business-annual-desktop.png',
      url: 'http://localhost:3000/pricing',
      viewport: { width: 1440, height: 1200 },
      isMobile: false,
      tab: 'business-annual',
    },
    {
      name: 'hanzo-pricing-personal-mobile.png',
      url: 'http://localhost:3000/pricing',
      viewport: { width: 390, height: 844 },
      isMobile: true,
      tab: 'personal',
    },
    {
      name: 'hanzo-pricing-business-mobile.png',
      url: 'http://localhost:3000/pricing',
      viewport: { width: 390, height: 844 },
      isMobile: true,
      tab: 'business',
    },
    {
      name: 'hanzo-pricing-50off-desktop.png',
      url: 'http://localhost:3000/pricing?coupon=50OFFBETA',
      viewport: { width: 1440, height: 1200 },
      isMobile: false,
      tab: 'personal',
    },
    {
      name: 'hanzo-pricing-50off-mobile.png',
      url: 'http://localhost:3000/pricing?coupon=50OFFBETA',
      viewport: { width: 390, height: 844 },
      isMobile: true,
      tab: 'personal',
    },
    {
      name: 'hanzo-beta-desktop.png',
      url: 'http://localhost:3000/beta',
      viewport: { width: 1440, height: 900 },
      isMobile: false,
    },
    {
      name: 'hanzo-beta-mobile.png',
      url: 'http://localhost:3000/beta',
      viewport: { width: 390, height: 844 },
      isMobile: true,
    },
    {
      name: 'hanzo-buying-specialist-desktop.png',
      url: 'http://localhost:3000/buying-specialist',
      viewport: { width: 1440, height: 900 },
      isMobile: false,
    },
    {
      name: 'hanzo-buying-specialist-mobile.png',
      url: 'http://localhost:3000/buying-specialist',
      viewport: { width: 390, height: 844 },
      isMobile: true,
    },
    {
      name: 'hanzo-buying-specialist-chat-desktop.png',
      url: 'http://localhost:3000/buying-specialist',
      viewport: { width: 1440, height: 900 },
      isMobile: false,
      chatPrompt: 'We have 15 standard developers and 5 senior AI leads. What plan do you suggest?',
    },
  ];

  for (const t of targets) {
    const context = await browser.newContext({
      viewport: t.viewport,
      isMobile: t.isMobile,
      hasTouch: t.isMobile,
    });
    const page = await context.newPage();
    console.log(`Navigating to ${t.url} (${t.name})...`);
    await page.goto(t.url, { waitUntil: 'networkidle', timeout: 30000 });

    // Dismiss cookie notice first if visible
    const accept = page.getByRole('button', { name: 'Accept all' });
    if (await accept.isVisible()) {
      await accept.click();
      await page.waitForTimeout(300);
    }

    if (t.tab === 'business' || t.tab === 'business-annual') {
      const btn = page.getByRole('radio', { name: 'Business' });
      if (await btn.isVisible()) {
        await btn.click({ force: true });
        await page.waitForTimeout(600);
      }
    }

    if (t.tab === 'business-annual') {
      const annualBtn = page.getByRole('button', { name: /Annual/ });
      if (await annualBtn.isVisible()) {
        await annualBtn.click({ force: true });
        await page.waitForTimeout(600);
      }
    }

    if (t.chatPrompt) {
      const textarea = page.locator('textarea');
      if (await textarea.isVisible()) {
        await textarea.fill(t.chatPrompt);
        await page.waitForTimeout(300);
        await page.keyboard.press('Enter');
        await page.waitForTimeout(1500);
      }
    }

    // Wait for animations/fonts to settle
    await page.waitForTimeout(1000);

    const outPath = path.join(desktopDir, t.name);
    await page.screenshot({ path: outPath, fullPage: false });
    console.log(`Saved screenshot: ${outPath}`);
    await context.close();
  }

  await browser.close();
  console.log('All screenshots captured successfully!');
}

main().catch((err) => {
  console.error(err);
  process.exit(1);
});