How to perform Location dropdown(auto complete Address) with help of JavaScript Event on browser click path synthetic monitor.

[Mareeswaran]

Summary

If your web application uses autocomplete, for example, a location autocomplete field, like an address search box backed by Google Maps or similar), the standard synthetic recording may not reliably capture the interaction.

In these cases, you can use JavaScript events inside a browser clickpath monitor to:

1. Type a value into the location search field.
2. Trigger the autocomplete dropdown.
3. Select a location from the dropdown using simulated key events.

Below is a step‑by‑step guide.

• Summary
• Steps to handle an autocomplete dropdown
• Locate the autocomplete input element in Chrome
• Copy the JS path (or a suitable selector) for the input
• JavaScript event 1 – Enter text and trigger the autocomplete dropdown
• JavaScript event 2 – Select the first location result from the dropdown
• What's Next
• Practical tips and troubleshooting
• Create a Support ticket/ chat
• Related reading

Steps to handle an autocomplete dropdown

Locate the autocomplete input element in Chrome

1. Open Chrome and navigate to the page that contains the location/address autocomplete field.
2. Right‑click on the input field you want the synthetic monitor to interact with.
3. Select Inspect to open Chrome DevTools on that element.
   

   

Copy the JS path (or a suitable selector) for the input

1. In Chrome DevTools, ensure the correct element is selected in the Elements panel.
2. Right‑click that element in the DOM tree.
3. Choose Copy → Copy JS path (or copy a stable CSS selector, if preferred).
   
   
   You’ll use this selector in the JavaScript events within your Dynatrace browser clickpath monitor.

JavaScript event 1 – Enter text and trigger the autocomplete dropdown

1. Create a JavaScript Event step in your browser clickpath synthetic monitor and paste the selector you copied into the querySelector call.

   var element = document.querySelector("#searchboxinput"); //Replace with the element which you want to perform the Location Dropdown
   element.value = 'Waltham';
   var event1 = new Event('input', { bubbles: true });
   event1.simulated = true;
   element.dispatchEvent(event1);
   

   What this does:

   • element.value sets the text in the input (e.g., Waltham).
   • The input event is dispatched so the application’s JavaScript thinks a real user typed the value, causing the autocomplete dropdown to appear.

   You can adjust the value (e.g., city, address, or postcode) as needed for your test case.

   

   

JavaScript event 2 – Select the first location result from the dropdown

1. Add another JavaScript Event step in the same browser clickpath monitor. Use the same selector to target the input element and then simulate key presses to select an option from the dropdown.
   

   var element = document.querySelector("#searchboxinput"); //Replace with the element which you want to perform the Location Dropdown
   var evObj = document.createEvent('UIEvents');
   evObj.initUIEvent('keydown', true, true, window, 1);
   evObj.keyCode = 40;
   setTimeout(function() { element.dispatchEvent(evObj); },1000);
   evObj.initUIEvent('keydown', true, true, window, 1);
   evObj.keyCode = 13;
   setTimeout(function() { element.dispatchEvent(evObj); },2000);​

   What this does:
   • Simulates a Down Arrow key press (keyCode = 40) to highlight the first autocomplete suggestion.
   • Simulates an Enter key press (keyCode = 13) to select that suggestion.
   • Uses setTimeout to give the page time to:
     • Load the autocomplete suggestions.
     • Apply the selection.
   If your page is slower or faster, you can tweak the delays (1000 ms / 2000 ms) to make the interaction more reliable.

What's Next

 

Practical tips and troubleshooting

• Selector stability: If the JS path is too fragile (e.g., dynamic IDs), consider using a more stable selector (like a CSS selector based on class/attributes) when calling document.querySelector.
• Multiple locations: For different test locations, duplicate the same JavaScript event and just change element.value.
• Timing issues: If the dropdown doesn’t open or the wrong item is selected:
  • Increase the setTimeout durations.
  • Confirm that the location field responds to input events (some frameworks might require change or other custom events too).
• Validation: Use screenshots and step‑level validation in the browser monitor to confirm the correct location is selected.

 

Create a Support ticket/ chat

If the browser clickpath monitor isn't able to select the location using the steps in this guide, along with the troubleshooting tips, please open a chat, or create a support ticket and provide a link to the monitor you're updating and the configuration steps you have already completed.

Related reading

📖  Synthetic Troubleshooting Map  

📖  Configure Browser Monitors

📖  Browser monitor JavaScript events

[ChadTurner]

Thank you for sharing this 

[ToWo]

Hello,

many thanks for sharing this. For me it was necessary to change step 2 to the following:

In addition I need a wait for 2 seconds for next step between step 1 (enter Location) and step 2 (select from maps response).

// Keydown Arrow Down nach 1 Sekunde

var element = document.querySelector("#input_YOUR_Selector");

setTimeout(() => {
    const ev1 = new KeyboardEvent('keydown', {
        bubbles: true,
        cancelable: true,
        key: 'ArrowDown',
        code: 'ArrowDown',
        keyCode: 40, // einige Browser nutzen das noch
        which: 40
    });
    element.dispatchEvent(ev1);
}, 1000);

// Keydown Enter nach 2 Sekunden
setTimeout(() => {
    const ev2 = new KeyboardEvent('keydown', {
        bubbles: true,
        cancelable: true,
        key: 'Enter',
        code: 'Enter',
        keyCode: 13,
        which: 13
    });
    element.dispatchEvent(ev2);
}, 2000);

Cheers,

Tom

[HannahM]

Thanks Tom, that's really helpful.