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

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:

• Firefox Browser https://www.mozilla.org/en-US/firefox/new/ (The selenium IDE is only supported on Firefox)
• Selenium IDE http://docs.seleniumhq.org/download/
• An account with New Relic (free to create) http://newrelic.com

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 https://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.xpath("//div[@id='asId-menu1']/ul/li/a")).click();
                      driver.findElement(By.xpath("(//input[@name='taHolder'])[14]")).click();
                      driver.findElement(By.id("searchFormSimple-form-searchTerms")).clear();
                      driver.findElement(By.id("searchFormSimple-form-searchTerms")).sendKeys("amazon");
                      driver.findElement(By.cssSelector("#searchFormSimple-form > p.buttons > button[name=\"searchSubmit\"]")).click();

Select all 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.get("http://www.experts-exchange.com");
                      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.xpath("//div[@id='asId-menu1']/ul/li/a")).click();
                      driver.findElement(By.linkText("Cloud Computing")).click();
                      driver.findElement(By.css("a[title=\"AWS\"] > input[name=\"taHolder\"]")).click();
                      driver.findElement(By.id("searchFormSimple-form-searchTerms")).clear();
                      driver.findElement(By.id("searchFormSimple-form-searchTerms")).sendKeys("amazon");
                      driver.findElement(By.css("#searchFormSimple-form > p.buttons > button[name=\"searchSubmit\"]")).click();

Select all 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