Javascript Snippets for Browser Monitor Scripts

xu_guo — Mon, 20 Oct 2025 13:30:28 GMT

Summary

Most scenarios can be recorded automatically using the Dynatrace Synthetic Recorder. There are some cases where a little scripting can make a script dynamic or do things not available out of the box. This article provides several helpful examples.

For editing a browser monitor in script mode rather than as a clickpath, please see the documentation on correct script formatting: Script mode for Browser Monitors. Note: Ctrl + Spacebar will provide a list of autocomplete suggestions when working in script mode.

Find the Location and Cloud Platform where an execution is running

Rather than having multiple browser monitors running in different locations, so they can each use different values for certain fields, this script allows the values to be changed dynamically.

This example gets the location name and cloud platform that the browser monitor is running on, and uses it to set the value of a variable "searchValue" based on the location. The value can then be accessed later in a keystroke event using {searchvalue} as the Text Value.

Note: this will only work when executed when scheduled or on demand, as the location details must be present. You could add default values to allow for local playback.

// assign default value. validate on this value after page load (fail if found) var mysearchvalue = "ValueDidNotGetAssigned"; try { var loc = api.getContext().location.name; api.info("Location Name is: " + loc); var platform = api.getContext().location.cloudPlatform; api.info("Cloud Platform is: " + platform); // set parameters if ((loc.indexOf("Mumbai") >= 0) && (platform.indexOf("Alibaba") >= 0)) { mysearchvalue = 'Mumbai'; } else if ((loc.indexOf("Sydney") >= 0) && (platform.indexOf("AWS") >= 0)) { mysearchvalue = 'Sydney'; } else if ((loc.indexOf("N. California") >= 0) && (platform.indexOf("AWS") >= 0)) { mysearchvalue = 'N. California'; } else if ((loc.indexOf("Chennai") >= 0) && (platform.indexOf("Azure") >= 0)) { mysearchvalue = 'Chennai'; } // display location, platform and parameter values on error screenshot document.body.innerText = "Location Name is: " + loc + ' and Cloud Platform is:' + platform + ' and Search Value is: ' + mysearchvalue; } catch (err) { api.info("Error message: " + err.description); } api.setValue("searchvalue", mysearchvalue);

Double-click mouse event

From time-to-time an application requires a double-click mouse interaction. This can only be accomplished through a custom JavaScript event. (Please replace unique-id in the example below)

var Clickevent = new MouseEvent('dblclick', {'view': window}); document.getElementById('unique-id').dispatchEvent(Clickevent);

How to create a locator for a resource in a iFrame

This snippet can be used for a CSS in an iFrame, and, also, be used on the parent page. (Please replace both id-of-iframe & CSS-selector-for-element)

document.getElementById('id-of-iframe').contentWindow.document.querySelector('CSS-selector-for-element')

How to change the setting for --disable-web-security

By default as of 1.198, --disable-web-security is set to true. It can be set to false by adding the following line to the Synthetic Script.

"configuration": { "device": { "orientation": "landscape", "deviceName": "Desktop" }, "disableWebSecurity": false },

Handling an randomly appearing question

Here is a JavaScript synthetic event example for handling a randomly appearing security question. If the security question is asked, the answer is set as the last word in the question. If the security question does not appear, skip the next click that would submit the answer.

// Capture the security question element var question = document.getElementById("CSS ID of the Security Question Text"); // Check to see if the security question element exists if (question === null) { // No security question was asked so skip the next click api.skipNextSyntheticEvent(); } else { //Security question was asked so get the words of the question var words = question.textContent.split(" "); //Select the last word of the question and remove the question mark at the end var answer = words[words.length - 1].slice(0, -1); // set the answer to the security question document.getElementById("CSS ID for the Answer Box").value = answer; }

Validate text in a JavaScript event

text = 'Text to validate'; text1 = document.documentElement.innerText; api.info(text1); api.info(text1.indexOf(text)); if (text1.indexOf(text) == -1) { api.fail("execution failed"); }

What's Next

You can find more helpful tips for Synthetic in the Synthetic Troubleshooting Map

Re: Javascript Snippets for Browser Monitor Scripts

ChadTurner — Tue, 10 Jan 2023 20:06:48 GMT

Thanks for sharing this @xu_guo

Re: Javascript Snippets for Browser Monitor Scripts

michael_2_kumme — Fri, 24 Feb 2023 15:29:37 GMT

Can the JS also be used to simulate a TAP action for a mobile device script? We have attempted to record a new mobile device monitor that must select an item from a drop down, but the playback will not execute the selection. Would a JS command work for that tap action and/or would it possible to simply set the value with a JS? IF you have an example to share, that would be great. Thanks

Re: Javascript Snippets for Browser Monitor Scripts

HannahM — Fri, 24 Feb 2023 16:04:59 GMT

I just tested it with a mobile site and, if the out of the box tap doesn't work, you can indeed just use a click. This was the code I used.

document.querySelector('yourCSSSelector').click();

article Javascript Snippets for Browser Monitor Scripts in Troubleshooting

Javascript Snippets for Browser Monitor Scripts

Summary

Find the Location and Cloud Platform where an execution is running

Double-click mouse event

How to create a locator for a resource in a iFrame

How to change the setting for --disable-web-security

Handling an randomly appearing question

Validate text in a JavaScript event

What's Next

Re: Javascript Snippets for Browser Monitor Scripts

Re: Javascript Snippets for Browser Monitor Scripts

Re: Javascript Snippets for Browser Monitor Scripts