
Building a website directory with Next.js, Tailwind CSS, and Prisma
See how easy it is to build a website directory with screenshots with Next.js, Tailwind CSS, and Prisma.
- Written by
- Dmytro Krasun
- Published on
- •
- 14 min read
Automate Website Screenshots
Guides, Product Updates, and Helpful Resources from ScreenshotOne.
See how easy it is to build a website directory with screenshots with Next.js, Tailwind CSS, and Prisma.
It's very a common need to take a screenshot of a live website. On a project I worked on recently, we had a legal requirement to take screenshots of forms which our users filled, as at the time they filled the forms, for consent documentation purposes.
Google Cloud gives $300 in credits for 3 months for experimenting. And I decided to give it a try, but not because of the free credits.
When you want to take chat widgets, there are annoying chat widgets that you would love to hide. It is easy to do.
When taking a screenshot, you want to ensure that you take a clean screenshot without cookie banners or cookie consent forms. And in this article, I will share with you how you can do it when using Puppeteer.
In this article, I share how to fix the "execution context was destroyed, most likely because of a navigation" error that might happen while using Puppeteer.
You can take a full page screenshot with Pupeeter by specifying the `fullPage` parameter as true when taking a screenshot. But there is a caveat. If a site has lazy-loaded images, they won't be rendered. Let's examine how to fix the issue and trigger lazy image loading with Puppeteer.
We can consider the screenshot of URL or HTML as a thumbnail, but I write about the thumbnail of a screenshot. How do you take a screenshot within the defined viewport but with different image width and height? Resize!
Exhaustive documentation, ready SDKs, no-code tools, and other automation to help you render website screenshots and outsource all the boring work related to that to us.