Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 31, 2023 02:34 pm GMT

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();};

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


Original Link: https://dev.to/woovi/screenshot-all-your-pages-3iem

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To