How to easily create monitoring scripts with Selenium IDE and New Relic

Published on
7,613 Points
3 Endorsements
Last Modified:
New Relic recently released its Synthetics product that allows for the creation of performance monitors that periodically test a site's performance. If you wish to test an interactive workflow New Relic employs Selenium WebDriverJS to run those tests. You can manually write these test scripts by reading the documentation or you can easily record them with Selenium IDE and translate it into WebDriverJS code. 

What you'll need:
How to record your script actions: For this example I opened the Experts Exchange Home page in a new browser that had no cookies set and performed the following actions.
  1. Open Firefox and then press CTRL+ALT+S simultaneously to open the Selenium IDE plugin.
  2. In Selenium IDE select Options->Clipboard Format-> Java / Junit 4 / WebDriver
  3. Now perform the actions you wish to add to your monitor script, the IDE will record them for you
    1. Open www.experts-exchange.com
    2. Click See Our Solutions
    3. Click Find a Solution
    4. Select Cloud -> Cloud Computing
    5. Enter a search term of "amazon"
    6. Submit the search
  4. Press stop in the upper right of the Selenium IDE plugin.
  5. Select the tests in the window and press CTRL+C.
  6. Paste this into a text document for now
The result of is:
driver.get(baseUrl + "/");
driver.findElement(By.cssSelector("div.row-content.first > a.button.confirm > span")).click();
driver.findElement(By.cssSelector("a.button.confirm > span")).click();
driver.findElement(By.cssSelector("#searchFormSimple-form > p.buttons > button[name=\"searchSubmit\"]")).click();

Open in new window

Currently, there isn't a formatter option to copy formatted code directly to WebDriverJS. But the Java code version is pretty close. But we need to make a couple adjustments.

  1. Replace By.cssSelector with By.css
  2. Replace baseUrl with the actual Url.
  3. Prepend var By = $driver.By; and var driver = $browser;
So now the code looks like:
var By = $driver.By;
var driver = $browser;

driver.findElement(By.css("div.row-content.first > a.button.confirm > span")).click();
driver.findElement(By.css("a.button.confirm > span")).click();
driver.findElement(By.linkText("Cloud Computing")).click();
driver.findElement(By.css("a[title=\"AWS\"] > input[name=\"taHolder\"]")).click();
driver.findElement(By.css("#searchFormSimple-form > p.buttons > button[name=\"searchSubmit\"]")).click();

Open in new window

With that we have a viable script that New Relic Synthetics will run in a test monitor. To enable it in New Relic simply:
  1. Login to New Relic and select New Relic Synthetics at the top of the page.
  2. Select Create new monitor.
  3. Select Scripted Browser.
  4. Name your monitor, select your locations and time intervals as prompted by New Relic.
  5. In the text box that indicates "Script your steps" you can paste the code from above, completely overwriting the sample code provided. Don't worry: it will be back if you create a new monitor.
  6. Select Validate.
After a short wait you should see the validate operation complete and a preview of the resulting page displayed in New Relic. All that is left to do is to decide whether or not to get alerts and select Create my monitor.

Now you have a sample performance monitoring script to start from. Ideally you will want to add more validation to this monitor, but it demonstrates how easy it is to find the selectors with a little bit of help from the Selenium IDE. To make more advanced scripts see their documentation https://docs.newrelic.com/docs/synthetics/new-relic-synthetics/scripting-monitors

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Join & Write a Comment

The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
This is Part-2 of Learning to use the Power of Mailwasher Pro so if you haven't watched Part-1 yet, I urge you to do so before watching this video. Click this link to watch Part-1 (https://www.experts-exchange.com/videos/56638/Learn-to-use-the-POWER…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month