DEV Community

Cover image for Screenshot all your pages
Sibelius Seraphini for Woovi

Posted on

4

Screenshot all your pages

We migrated our landing page woovi.com from Gatsby to Next.js. Gatsby was a good idea back then, but Next.js evolved better and faster. We need to modify our landing page faster to add new products, articles and experimentation, so the migration to Next.js was worth it.

Validating if all the pages are the same

To validate that all migrated pages have the same design as the old one, we create an automation to screenshot all the pages from the old and next website, so we can easily check for "bugs"

export const snapshotPages = async (
  pages: string[],
  snapshotDir: string,
  toRelative: (url: string) => string,
) => {
  const browser = await puppeteer.launch();

  if (!fs.existsSync(snapshotDir)) {
    fs.mkdirSync(snapshotDir);
  }

  // process 10 pages at a time
  await processPromisesBatch(pages, 10, async (url) => {
    const page = await browser.newPage();

    // eslint-disable-next-line
    console.log(`Opening ${url}`);
    await page.goto(url, {
      waitUntil: 'networkidle2',
    });

    const relative = toRelative(url);

    const snapshotPath = path.join(snapshotDir, relative);

    const dir = path.dirname(snapshotPath);
    try {
      if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir);
      }

      await page.screenshot({ path: `${snapshotPath}.png`, fullPage: true });
    } catch (err) {
      // eslint-disable-next-line
      console.log('err: ', err);
    }
  })

  await browser.close();
};
Enter fullscreen mode Exit fullscreen mode

In Short


Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!


Photo by Ishon Studios on Unsplash

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs