Skip to main content

Tutorial Intro

Let's discover Webshot Archive.

Getting Started​

Webshot Archive is a tool for capturing screenshots of your website and comparing them to previous screenshots. It is designed to work with Github Actions to capture screenshots of your website and upload them to the Webshot Archive API. Below is an example of what a comment looks like on a Github PR with the Webshot Archive Github Action.

Github PR Screenshots

You can also view the screenshots and diffs over time in the Webshot Archive UI.

Webshot Archive UI

It works by capturing screenshots of your website and uploading them to the Webshot Archive API. It uses pixelmatch to compare screenshots and generate a diff. It then comments on the PR with the screenshots and a diff of the screenshots. You can also use the Webshot Archive UI to view the screenshots and diffs over time the same way you might view the history of a file in Github.

Get started by Signing Up and Creating a Project on webshotarchive.com.

What you'll need​

  • some experience with software development
  • a Github account
  • a project repository to capture screenshots of

What you'll learn​

  • how to capture screenshots of your website
  • how to upload screenshots to the Webshot Archive API
  • how to compare screenshots to previous screenshots
  • how to comment on a Github PR with the screenshots and diffs
  • how to view the screenshots and diffs over time in the Webshot Archive UI