Adding Timestamps to Screenshots in Synthetic Monitoring

Summary:

One of the most versatile features of our multi-page synthetic monitoring is the ability to run custom javascript with the runScript command. In this article we'll show you how to leverage that functionality to add timestamps to the screenshots taken by your synthetic monitors.

• How to do it
  • The code snippet you'll need
  • Example implementation

How to do it

To add timestamps to your screenshots and filmstrips in Synthetic Monitoring, simply add the below code snippet to each step in your multi-page script. You'll want to use the runScript command with the code snippet as the target. For information about how to write and create multi-page synthetic monitors in Blue Triangle, checkout some of these great resources:

• Requirements for creating Selenium Scripts
• [VIDEO] How to Create and Upload a Selenium Script in the Blue Triangle Portal
• [VIDEO] How to Create a Multi-Step Synthetic Monitor

The Code Snippet You'll Need

function showTime() { const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const date = new Date(); let year = date.getUTCFullYear(); let month = monthNames[date.getUTCMonth()]; let day = date.getUTCDate(); let hours = date.getUTCHours(); let minutes = date.getUTCMinutes(); let seconds = date.getUTCSeconds(); let session = (hours < 12) ? "AM" : "PM"; if (hours === 0) { hours = 12 } else if (hours > 12) { hours -= 12 } hours = (hours < 10) ? '0' + hours : hours; minutes = (minutes < 10) ? '0' + minutes : minutes; seconds = (seconds < 10) ? '0' + seconds : seconds; const time = month + ' ' + day + ', ' + year + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + session + ' (GMT)'; var messageNode = document.createElement('div'); messageNode.innerHTML = '<p id=' + 'datetime-bt' + '>' + time + '</p>'; if (document.querySelector('#datetime-bt') != null) { document.querySelector('#datetime-bt').innerHTML = time } else { document.querySelector('header').firstElementChild.prepend(messageNode) } setTimeout(showTime, 1000) } showTime()

This snippet produces a clock that displays the current time at the top of the webpage. In this code we are prepending the clock to the top of the <header> element. Depending on your site, you may need to adjust where the clock is placed for it to properly display. If you have any trouble getting it to display, feel free to reach out to us and we'll be happy to help.

Example Implementation

Here's a demo script implementing the snippet: