With the automation steps, we support rich interactions with a web page. Many users want to capture all the elements of a carousel. This post will show you how to do so.

We’ll use a simple carousel found on this page. It has 3 images that can be shown by clicking on the dot at the bottom.

Find the element to interact with

To interact with the dots, we need to find the CSS selector. Press F12 to open the Developer Tools. In the Developer Tools, click on the mouse cursor at the top left corner (highlighted in red below).

You can share your Blitapp account with multiple team members. Each user can different level of access: view-only, billing, create their captures and apps, etc. Manage your Team in Blitapp. Invite new team members today.

We have added the ability to track metrics, such as your Amazon product rank, Google search rank, YouTube likes and comments, and more. Blitapp can show you the metrics in your history, and the new page shows the trends over time.

You can now get your screenshots uploaded directly to your cloud storage through Apps, including your own Microsoft OneDrive account.

Customers sometimes ask us how to include a timestamp in the capture or the URL of the web page captured. You can achieve this by injecting Javascript into the target page to add the timestamp and URL directly on the page.

In your capture, under Advanced Web Page Options, click on Edit Javascript. You can add the code below:

(function() {
  var d = new Date();

  var date = d.toLocaleString("en-US", {
    timeZone: "America/New_York" 
  });

  var div = document.createElement("div");
  var style = document.createAttribute("style");
  style.value = "position: fixed; width: auto; height: 40px;  top: 0; left: 0; right: 0; bottom: 0; background-color: White; z-index: 9999999999; color: Black; font-size: 12px;";
  div.setAttributeNode(style);  

  div.innerHTML = date + "<br>" + document.location.href;

  document.body.append(div);
})();

This adds a a DIV, 40px high (height: 40px), with a white background (background-color: White) and black font (color: Black; font-size: 12px;). To ensure the DIV is at the forefront of the page, we add a high z-index (z-index: 9999999999). This DIV is placed at the top left corner of the page (top: 0; left: 0;).