Add Screenshots provides businesses with the ability to monitor and track website changes over time, allowing them to stay ahead of competitors and ensure that their website is functioning properly. By automating the process of taking screenshots and storing them in a cloud repository, businesses can easily track changes, perform audits, and conduct automated testing, leading to improved decision-making and increased customer satisfaction.
A full audit history of website changes can be tracked and archived over time using a schedule to monitor the website at configurable intervals such as daily. The old, new and changes (diff) images can be saved to your cloud repository such as an AWS S3 Bucket or Azure Blob Storageaccount when a change is detected.
There are many use cases for tracking website changes using screenshots, such as:
There are two ways to evaluate a webpage for changes:
Scheduled screenshots are great when you’d like to capture and store a screenshot at a regular interval. For example, taking a daily screenshot of your competitor’s pricing page may produce the following files:
Scheduled screenshots with track changes are great when you’d like to capture and store changed screenshot at a regular interval and receive an email notification when a change was detected. For example, taking a daily screenshot of your competitor's pricing page may produce the following files:
Using the approach above to track slow changing web pages, it is possible to achieve the following:
A comparison between scheduled and track changes screenshots:
| Description | Scheduled | Track Changes |
|---|---|---|
| Run at scheduled intervals | ||
| Only store changed screenshots | ||
| Track when a page was changed | ||
| Track what changed between screenshots | ||
| Send an email notification when a change was detected |
Some websites contain dynamic content that change every time a page is refreshed such as adverts, greeting messages, banners, image carousels and more.
As a result of dynamic nature of the page (e.g. different ads loaded every time), the track changes monitor can result in false positives, producing change notification emails when the change wasn't of interest.
There are many ways to address this issue such as using one or more of options below:
Change detection provides conditional rules to determine if a web page changes is significant enough to be considered a change.
A tolerance percentage can be specified as a threshold limit when performing a pixel level comparison between the old and new image before it is considered that the page has changed.
A tolerance of 1% denotes that the comparison is highly sensitive towards minor changes whereas a larger tolerance percentage such as 50% denotes that at least half of the screenshot should change before the page is considered to be updated.
The web page can be evaluated against one or more "OR" conditions, such as:
In the example above, monitor the sport or business section of a news website and receive an email notification when your team or company name is mentioned.
The web page can be evaluated against all of the required "AND" conditions, such as:
In the example above, a change will be ignored when the page contains an error message or when the page is an erroneous state.
"Tolerance %", "Any of these conditions" and "All of these conditions" can be used together to create a powerful change detection strategy.
Change tracking can be enabled in a storage template. The storage template can then be used in screenshot schedules and on-demand requests.
View the storage template documentation for more information on how to configure change tracking.
Tracking changes using scheduling requires two templates:
Note: Make sure that the storage template has change tracking enabled.
View the scheduling documentation for more information on how to create, run and monitor the history of a schedule.
Change tracking can be triggered on demand using by using a storage template with tracking changes enabled or using a HTTP POST request.
The following request properties are available:
| Parameter | Required | Description |
|---|---|---|
| diff_percent | Required |
The tolerance percentage when performing a pixel level comparison.
Range is 1 (smallest change) to 100 (completely different) |
| old_file | Required |
The name or pattern (without the extension) to rename the old screenshots to.
Daily Example: use {filepath}_{date} to save the date when the change was detected.
Time Example: use {filepath}_{datetime} to save the date and time when the change was detected.
|
| old_folder | Optional |
The folder name or pattern to store old screenshots to
Same Folder Example: use {domain} to save the old screenshots in the "example.com" folder.
Archive Folder Example: use {domain}_{date} to save the old screenshots in the "example.com_2020-08-25" folder based on when the change was detected.
|
| diff_file | Optional |
The name or pattern (without the extension) to store diff comparison screenshots to. Leave this value blank to ignore diff files.
Daily Example: use {filepath}_{date}_diff to save the date when the change was detected.
Time Example: use {filepath}_{datetime}_diff to save the date and time when the change was detected.
|
| diff_folder | Optional |
The folder name or pattern to store diff comparison screenshots to.
Same Folder Example: use {domain}_diff to save the diff screenshots in the "example.com_diff" folder.
Archive Folder Example: use {domain}_{date}_diff to save the diff screenshots in the
"example.com_2020-08-25_diff" folder based on when the change was detected.
|
| diff_email | Optional |
The email address to send change notification and diff screenshots to.
Use a semicolon ; separated list for multiple recipients such as: [email protected]; [email protected]; [email protected]
|
| diff_condition | Optional |
A collection of AND and OR conditions to evaluate against the page to determine if a change occurred.
For example:
diff_condition: {
"any_of": [
{ "text": "New York Yankees" },
{ "text": "Boston Red Sox" }
]
"all_of": [
{ "text_not": "An error has occurred" },
{ "text": "Baseball" },
{ "status": 200 },
{ "element_not: "#error" }
]
}
|
The example below is using a comprehensive POST request with:
See more example using the Screenshot API swagger UI.
POST https://api.addscreenshots.com/screenshots/?apikey=YOUR_API_KEY
{
"url": "https://finance.yahoo.com/chart/VOO",
"section": "#fin-chartiq",
"viewport": "1366x768",
"quality": "80",
"azure": "https://screenshots.blob.core.windows.net/screenshotdemo?st=2020-08-10T07%...fEWvNz6fbdeUenY%3D",
"file": "{filepath}",
"folder": "{domain}",
"old_folder": "{domain}",
"old_file": "{filepath}_{date}",
"diff_folder": "{domain}",
"diff_file": "{filepath}_{date}_diff",
"diff_percent": 10,
"diff_condition": {
"all_of": [
{ "status": 200 },
{ "element": "#fin-chartiq" }
]
},
"diff_email": "[email protected];[email protected]"
}
Your API key can be found on the API Keys page.
Need an API Key? Sign up to get started.
For internal applications, replace YOUR_API_KEY with your own unique API Key.
For public facing websites or hotlinks, generate a signed URL.
The following GET request is similar to the POST example above by using a reusable storage (storageid) and request template (templateid) instead.
// Line breaks added for readability
https://api.addscreenshots.com/screenshots
?apikey=YOUR_API_KEY
&storageid=storage_OdXnpH7S1
&templateid=template_kx2qOAhRf
&url=https://finance.yahoo.com/chart/VOO