Running Synthetics browser tests
Synthetic browser tests are used to validate that the customer's sites and services perform as expected for the end user in the browser. Browser tests are intended to reflect real user journeys based on goals - for example add to cart, sign in, or submit a form. This differs from automated functional or unit testing; synthetics is focused on how performance impacts user experience.
How to use Splunk software for this use case
You can create a browser test in Splunk Synthetic Monitoring by manually writing transactions and steps in the GUI. When creating tests, you can right-click on the web page and select Inspect to see how an element on the page is built. Google has documentation if you want to learn more about DevTools.
Best practices
- Create a human-readable label for each step.
- Use Business Transactions to group steps.
- Leverage advanced settings to replicate the user experience that you want and to provide insight into A/B testing. These settings can include cookies, custom headers, and more.
- Think about what the test is proving, beyond just the actions you want to take in the UI. For example, if you want to test how users sign in, you do not only want to prove that the sign-in button is clickable, but you also want to prove that the user can sign in to the application in a timely manner. So, add a step after submitting the sign-in form to validate that the user is signed in, whether by assertion or an additional click step.
Common challenges
Caching
When inspecting a page or recording a test, use an incognito browser window if possible, especially if dealing with checkout carts or logins.
Mobile vs desktop
When inspecting a page or recording a test, make sure your browser width reflects the viewport size you want to implement in Splunk Synthetic Monitoring. Sometimes mobile, tablet, and desktop have different elements and attributes based on the viewport size. So, if you record a test at desktop width and expect it to work for mobile, it might not. Change the viewport size by either resizing your window or using the Chrome Device Toolbar.
New tabs
Today a multi-step test must be accomplished in the same browser tab, so be sure to remove any targets that open links in a new tab before clicking. For example:
document.querySelector('the_selector').removeAttribute('target')
Unstable selectors
In CSS, selectors are patterns of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside a rule applied to them. You might need to manually change selectors within Splunk Synthetic Monitoring. Keep in mind that you can use xpath or javascript. For more information, follow these best practices for choosing selectors.
Inconsistent popups
If popups are getting in the way of executing a browser test, you can add a javascript step to handle this. For example
if(document.querySelector('button[data-click="close"]')){document.querySelector('button[data-click="close"]').click();}
Handling cookies
You can add cookies in the browser test's advanced settings for any A/B testing or other conditions that you want to set via cookie. You can also add cookies in Optimization. Remember that new users are presented with the accept cookies dialog, so you might want to monitor that interaction as well.
Next steps
If you experience problems with your browser tests, these procedures can help you investigate and resolve the issue:
These additional Splunk resources might help you understand and implement this product tip:
- Getting Started: Getting started with Synthetics