Dynatrace Synthetics can record browser clickpath transactions by leveraging browser automation tools to simulate user interactions and capture performance metrics.

Here’s a simplified example of how you might set up and run a synthetic browser clickpath test using Selenium, a popular browser automation framework, and then how Dynatrace would ingest and display this data.

Simulating a Clickpath with Selenium

Let’s imagine we want to test a simple e-commerce checkout flow:

  1. Navigate to the homepage.
  2. Search for a product.
  3. Add the product to the cart.
  4. Proceed to checkout.

Here’s a Python snippet using Selenium WebDriver to achieve this:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

# Initialize WebDriver (assuming ChromeDriver is in your PATH)
driver = webdriver.Chrome()
driver.maximize_window()

try:
    # 1. Navigate to homepage
    start_time = time.time()
    driver.get("https://www.example-ecommerce.com")
    wait = WebDriverWait(driver, 10)
    wait.until(EC.presence_of_element_located((By.ID, "homepage-banner")))
    homepage_load_time = time.time() - start_time
    print(f"Homepage loaded in {homepage_load_time:.2f}s")

    # 2. Search for a product
    search_start_time = time.time()
    search_box = wait.until(EC.presence_of_element_located((By.NAME, "q")))
    search_box.send_keys("Awesome Gadget")
    search_box.send_keys(Keys.RETURN)
    wait.until(EC.url_contains("/search?q=Awesome+Gadget"))
    search_time = time.time() - search_start_time
    print(f"Search completed in {search_time:.2f}s")

    # 3. Add the product to the cart
    add_to_cart_start_time = time.time()
    # Assuming the first search result has a specific class or ID
    add_button = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, ".product-list .product-item:first-child .add-to-cart")))
    add_button.click()
    wait.until(EC.visibility_of_element_located((By.ID, "mini-cart-count"))) # Wait for cart indicator to update
    add_to_cart_time = time.time() - add_to_cart_start_time
    print(f"Added to cart in {add_to_cart_time:.2f}s")

    # 4. Proceed to checkout
    checkout_start_time = time.time()
    checkout_button = wait.until(EC.element_to_be_clickable((By.LINK_TEXT, "Checkout")))
    checkout_button.click()
    wait.until(EC.url_contains("/checkout"))
    checkout_time = time.time() - checkout_start_time
    print(f"Navigated to checkout in {checkout_time:.2f}s")

    # Total time for the clickpath
    total_clickpath_time = time.time() - start_time
    print(f"Total clickpath completed in {total_clickpath_time:.2f}s")

except Exception as e:
    print(f"An error occurred: {e}")
finally:
    driver.quit()

This script captures the time taken for each step, as well as the overall transaction. The WebDriverWait is crucial for ensuring elements are loaded and interactable before proceeding, simulating real user behavior more accurately than simple time.sleep() calls.

How Dynatrace Integrates

Dynatrace doesn’t directly "run" your Selenium scripts in the same way you’d execute them locally. Instead, it has its own powerful browser automation engine that can interpret and execute similar steps. You configure these "clickpaths" within the Dynatrace UI.

When you set up a Synthetic browser monitor in Dynatrace, you define a sequence of actions:

  • Navigate: Similar to driver.get().
  • Click: Similar to element.click().
  • Type: Similar to element.send_keys().
  • Wait: Similar to WebDriverWait or time.sleep().
  • Assert: To verify expected conditions (e.g., text on a page, element presence).

Dynatrace executes these defined steps from its global cluster of OneAgent-enabled execution locations (or your private locations). During execution, Dynatrace captures:

  • Transaction Timings: The duration of each step and the total clickpath.
  • Page Load Metrics: Waterfall charts for each page loaded during the clickpath, detailing resource loading times (HTML, CSS, JS, images, etc.).
  • Screenshots: A visual record of what the page looked like at each step.
  • Browser Logs: JavaScript errors or other console messages.
  • Network Requests: All HTTP requests made by the browser.

This data is then aggregated and presented in the Dynatrace UI, allowing you to see performance trends, identify bottlenecks within the user flow, and correlate synthetic failures with real user performance or backend issues.

The core advantage is that Dynatrace orchestrates these executions, collects the rich telemetry, and makes it immediately available for analysis alongside your APM and RUM data, providing a unified view of user experience.

The most surprising thing about Dynatrace’s synthetic browser monitors is their ability to simulate complex user interactions without requiring you to manage a Selenium grid or write extensive automation code yourself. You define the flow visually or through a structured sequence of commands within the Dynatrace platform, and Dynatrace handles the execution, data collection, and analysis. This abstracts away much of the operational overhead associated with traditional synthetic monitoring.

You’ll next want to explore how to configure assertions within your Dynatrace synthetic monitors to automatically validate that critical elements or text appear on the page after each step.

Want structured learning?

Take the full Dynatrace course →