A Beginner’s Guide to Writing Scripted Browsers for New Relic Synthetics

Occasionally I hear from New Relic Synthetics users who say they don’t have the “technical background,” or are just too intimidated, to write scripted browsers to test their websites. While I understand their concerns, I am here to assure everyone that writing these scripts can be a lot easier—and more enjoyable!—than you’d expect. With that in mind, let’s walk through the process of writing a simple yet effective script that monitors the process for creating a new user account on Amazon.com.

Some quick details about scripted browsers

With Synthetics, you can write a custom script to test various aspects of your website. The script runs in a browser and navigates your website, taking specific actions like logging into the site or creating a user account. Scripted browsers use a Node-based scripting language to drive a Selenium-powered Google Chrome browser.

The scripts in this example use HTML id’s. You can refer to the docs for tips on how to locate these or other types of page elements.

Before you can actually run your scripted browser, you’ll need to add and edit a New Relic Synthetics monitor.

In this example, our scripted browser will:

1. Access Amazon’s account-creation page
2. Find the triggers to open the creation setup
3. Identify the page items to interact with
4. Submit the account creation request

Step 1: Access the page

The first step is to get our script to navigate to the main page of the Amazon website. In this case, we’ll use $browser.get(https://www.amazon.com/):

//Extra variables needed to run script

var  DefaultTimeout = 60000;

var UserAgent = "newrelic";

 

//step 1

.then(function() {

  console.log; //gets the page we want to monitor

  return $browser.get(“https://www.amazon.com/”); })

Step 2: Find the triggers

Next, the script “clicks” a few buttons so it can access the page for creating a new account. To find the proper buttons, the script searches for the names of the specific id’s for those elements (in this case, nav-link-account-list and createAccountSubmit).

The script uses clickElement “Sign in” and clickElement “Create Account Click” to perform these actions:

//step 2a

.then(function() {

  console.log; //Action 1: Finding Page

  return ‘$browser.waitForAndFindElement (By.id(“nav-link-accountList”), DefaultTimeout); })

.then(function (el) {el.click(); })

 

//step 2b

.then(function() {

  Console.log; //Action 2: Press ‘Create Account’

  return ‘$browser.waitForAndFindElement(By.id(“createAccountSubmit”), DefaultTimeout); })

.then(function (el) {el.click(); }) 

Step 3: Identify the interaction items

Now that the script has located the correct page, we just need to fill in the required information to create our account. We’ll need to find the element id that represents the input bar for each item on the page. So, in this case, we need the following id’s: ap_customer_name, ap_email, ap_password, and ap_password_check.

The script uses the sendKeys function to provide inputs for the fields it needs to fill out. The following two examples fill out the customer name and password fields; you can fill out the other fields by replacing the id accordingly.

//step 3a

.then(function() {

  Console.log; //Action 3: Add in Name

  return ‘$browser.waitForAndFindElement(By.id(“ap_customer_name”), DefaultTimeout); })

.then(function (el) {

  el.clear();

  el.sendKeys(“myscriptedaccount”); })

 

//step 3b

.then(function() {

  Console.log; //Action 4: Add in Password

  return ‘$browser.waitForAndFindElement(By.id(“ap_password”), DefaultTimeout); })

.then(function (el) {

  el.clear();

  el.sendKeys(“myscriptedpassword”); })

Step 4: Submit the account-creation request

Finally, the script is ready to submit the request by clicking the Create your Amazon account button.

//step 4

.then(function() {

  Console.log; //Action 5: Press “Create your Amazon account”

  return ‘$browser.waitForAndFindElement(By.id(“continue”), DefaultTimeout); })

.then(function (el) { el.click();})

And that’s the end of this script! Pretty simple stuff.

Now that we have this monitor, we can run it and get notifications when this important transaction fails to work, and we’ll build up baseline performance data we can use to optimize the flow of our site.

Remember, this was just one example of the kind of scripted browser you could write with New Relic Synthetics. Check out these other examples or have a look at the New Relic documentation or our reference guide for more information.