📸 Automation – Take Snapshot of Live Webpage Periodically Using PhantomJS

June 29, 2014 • Originally published on old blog

Note: This post was originally published in 2014. While the core concepts remain valid, PhantomJS has been largely superseded by Puppeteer and Playwright for modern web automation. The principles and approach discussed here are still relevant.

Requirement

I have developed a monitoring dashboard application which displays backlog trends of various application components, something like below. I want to take a snapshot of this live monitoring dashboard webpage every 30 minutes and send it as an inline attachment to a specific set of email addresses.

Observare Dashboard

Please visit the following link for the live demo:

http://anjuwedssrini.com/Demos/HighCharts-Demo/

Steps Involved

Step 1: Download PhantomJS

First, download the PhantomJS plugin from the following link and extract it inside the desired folder.

https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2

Step 2: Create the PhantomJS Script

Put the following code inside a JavaScript file:

[thiru@localhost bin]$ cat observare.js
var page = require('webpage').create();
page.open('http://anjuwedssrini.com/Demos/HighCharts-Demo/', function() {
    page.viewportSize = { width: 1200, height: 768 };
    window.setTimeout(function () {
        page.render('/optionalphantom/bin/observare.jpg');
        phantom.exit();
    }, 1000);
});

Step 3: Execute the Script

Execute the JavaScript code using the PhantomJS executable available inside the extracted binary:

[thiru@localhost bin]$ /optional/phantom/bin/phantomjs observare.js

Now we're done with the image generation, but how do we attach the generated image as an inline attachment? Is it easy?

How to Send Image as an Inline Attachment Using Sendmail

Linux sendmail command has some exceptional features to do all these things.

/usr/sbin/sendmail -t <<EOT
TO: industryvertical@gmail.com
FROM: Thirunavukkarasu.Muthusamy@gmail.com
SUBJECT: Observer – Dashboard Report
MIME-Version: 1.0
Content-Type: multipart/related;boundary="XYZ"

--XYZ
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.0609040" alt="">
</body>
</html>

--XYZ
Content-Type: image/jpeg;name="observare.jpg"
Content-Transfer-Encoding: base64
Content-ID: <part1.0609040>
Content-Disposition: inline; filename="observare.jpg"

$(base64 /optional/images/observare.jpg)

--XYZ--
EOT

Complete Script

Now we're done with the image generation using PhantomJS and image encoding, inline attachment using sendmail utility. By putting it all together, we get the following script:

#!/bin/bash
#Program Name: Report_generation.sh
#Purpose: Report Generation

export hour=`date -u +%H`

function takesnap()
{
    echo "Inside Take Snap function!!"
    /optional/phantom/bin/phantomjs observare.js
}

function sendmail()
{
    /usr/sbin/sendmail -t <<EOT
TO: industryvertical@gmail.com
FROM: Thirunavukkarasu.Muthusamy@gmail.com
SUBJECT: Observer – Dashboard Report
MIME-Version: 1.0
Content-Type: multipart/related;boundary="XYZ"

--XYZ
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.0609040" alt="">
</body>
</html>

--XYZ
Content-Type: image/jpeg;name="observare.jpg"
Content-Transfer-Encoding: base64
Content-ID: <part1.0609040>
Content-Disposition: inline; filename="observare.jpg"

$(base64 /optional/images/observare.jpg)

--XYZ--
EOT
}

# Main execution
takesnap
sendmail

echo "Report generation completed at $(date)"

Automation Setup

To run this script every 30 minutes, add it to your crontab:

# Edit crontab
crontab -e

# Add this line to run every 30 minutes
*/30 * * * * /path/to/Report_generation.sh

How It Works

PhantomJS Script: Opens the webpage and waits for it to load completely
Viewport Setting: Sets the browser viewport to 1200x768 for consistent screenshots
Timeout: Waits 1 second for any dynamic content to load
Rendering: Captures the webpage as a JPEG image
Email Composition: Creates a multipart email with HTML and inline image
Base64 Encoding: Converts the image to base64 for email attachment
Sendmail: Sends the email with the inline image

Key Features

Automated Screenshots: Captures live webpages without manual intervention
Inline Images: Images appear directly in the email body, not as attachments
Customizable Timing: Can be scheduled to run at any interval
Multiple Recipients: Can send to multiple email addresses
Error Handling: Includes basic error checking and logging

Potential Enhancements

Error Handling: Add checks for PhantomJS execution and email sending
Logging: Implement proper logging for debugging and monitoring
Image Optimization: Compress images before sending to reduce email size
Multiple URLs: Extend to capture multiple dashboards in one email
Conditional Sending: Only send emails when certain conditions are met

Modern Alternatives

While PhantomJS is still functional, modern alternatives include:

Puppeteer: Google's headless Chrome automation tool
Playwright: Microsoft's cross-browser automation framework
Selenium: WebDriver-based automation for multiple browsers
Cloud Services: Services like BrowserStack for cloud-based screenshots

Key Takeaways

PhantomJS provides a powerful way to automate webpage screenshots
Linux sendmail can handle complex email formatting with inline images
Combining tools creates powerful automation solutions
Cron jobs enable scheduled execution of automation scripts
Base64 encoding is essential for inline email attachments