Skip to content

Getting started with ThousandEyes Synthetics

Jump to bottom
rpatlte edited this page Dec 12, 2019 · 4 revisions

Overview

ThousandEyes takes a Javascript native approach to web application synthetic monitoring. ThousandEyes synthetic browser transaction scripts are written directly in Javascript. But no need to be intimidated. Our Recorder IDE will do most of the heavy lifting for you. In the end you'll have a working transaction script, written in native Javascript. So your developers will be happy.

The Recorder is not meant to be used as a black box. While many recorded flows will result in fully functional scripts that work on the first playback, at times it will be necessary to manually alter the recorded output.

To be successful, it’s important to understand how it works at a high level.

Recorder concepts

HTML

CSS Selectors

  • CSS selectors are used to select HTML elements in the page. The recorder outputs the selectors that represent the elements you interacted with during recording. Most troubleshooting will be centered around tweaking these.
  • CSS Selector Cheatsheet

JavaScript

  • Scripts are written in JavaScript. Anything you can do in native JS, you can do in the recorder.

General Troubleshooting Strategies

Troubleshooting approach (recommended)

  • Use some combination of the “Useful Functions” below to determine which step is failing
  • Go into the browser and inspect the element where the click/type text etc is failing. Try to produce a selector that works.
  • Edit this new selector into the script and try again.
  • If that doesn’t work, refer to the FAQ on common problems to better understand why

Re-record approach

  • Use some combination of the “Useful Functions” below to determine which step is failing
  • Attempt to re-record and click in a slightly different area to try to produce a different selector for the failed step
  • Compare previous and current script output to see if a new selector was chosen. Use the one that works.
  • Repeat until script is working

Useful Functions

console.log

  • You can use console.log statements to help debug, such as by printing the current line number
  • e.g. console.log(“Line 7”)

driver.sleep

  • driver.sleep can be useful to slow down script execution when debugging, or if you want to sit at one step for a long time (to inspect elements etc).
  • e.g. await driver.sleep(5 * 1000); // wait for 5 seconds

driver.takeScreenshot

  • Taking a screenshot to track progress can be useful to ensure the page visually matches what you were intending to see

Selectors

CSS Selectors

  • CSS Selector Cheatsheet
  • Can test via chrome devtools with document.querySelectorAll(‘.my-selector’)
  • How to generate a unique CSS selector?
    • Approach 1: Use a chrome extension that does this
    • Approach 2: Look in chrome devtools for some unique identifier, and manually test with document.querySelectorAll
    • Approach 3: Open chrome devtools, right click -> copy selector (this will often produce less readable/more brittle selectors)
  • What makes a good selector? In order of priority:
    • #id
    • [attr=”value”] (for known, human readable attributes)
    • .someUniqueClass
    • div .someClass (nested selector)
    • div > span > div > p (structural selector)
  • Things to optimize for:
    • Readability (is it easy for a human to understand the selector?)
    • Correctness (does the selector correctly, uniquely identify the element?)
    • Robustness
      • Is the selector resilient to application code changes?
      • Is the selector resilient to application state changes?
      • Will selector work on different localizations of the website?
      • Example: div#pageHeader is more specific than #pageHeader because it relies on the type of element. If the element is changed from div to span this will break the more specific selector, but not the less specific one.

XPath Selectors

Best practices for choosing selectors

For further reading: https://selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html

Clone this wiki locally