Scripted browser examples

Using scripted browsers, you can build complex monitoring workflows using a simple JavaScript-like scripting language. This document illustrates each step in building a script, from a simple URL monitor to navigating to a link and searching a website. You can even wait for a specific page element to load or test your login procedures.

For a detailed guide to all available functions, see Synthetics scripted browser reference.

To view and share other scripted browser examples, check out the Synthetics Scripts section of the New Relic Online Technical Community.

Monitor a URL

In this example, the monitor visits https://docs.newrelic.com:

//Visit https://docs.newrelic.com
$browser.get("https://docs.newrelic.com");

This scripting action is the basis for nearly all scripted browsers. For more information, see Visiting a URL.

Customize the user agent

You can customize the scripted browser's user agent to ensure any browser-specific fixes in your app are working properly, or to bypass a security mechanism in order to filter an internal site.

In this example, the monitor changes the user agent to simulate Internet Explorer 10.6:

$browser.addHeader('User-Agent', 'Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0');
$browser.get('http://httpbin.org/user-agent');

Navigate to a link

In this example, the monitor navigates to https://docs.newrelic.com and locates the Release Notes article by searching for its exact link text. These steps are ordered by a sequencing function. The monitor then clicks the link:

$browser.get("https://docs.newrelic.com").then(function(){
//Find a link whose display text is `Release Notes` and click that link.
    return $browser.findElement($driver.By.linkText("Release Notes")).click();
});

You can also locate an element by searching for partial link text. This monitor locates the Amazon Web Services (AWS) users article by searching for link text containing Amazon Web Services:

$browser.get("https://docs.newrelic.com").then(function(){
//Find a link whose display text contains `Amazon Web Services` and click that link.
    return $browser.findElement($driver.By.partialLinkText("Amazon Web Services")).click();
});

For detailed instructions and other methods of locating elements, see Locating elements. For a list of all locators, see Locators: Find page elements.

In this example, the monitor visits https://docs.newrelic.com and searches for tshirt:

$browser.get("https://docs.newrelic.com").then(function(){
//Find the search field by specifying its id, then enter `shirt`.
    return $browser.findElement($driver.By.id("edit-search-block-form--2")).sendKeys("tshirt");
}).then(function(){
//Click the search button.
    return $browser.findElement($driver.By.id("edit-submit")).click();
});

The monitor locates the search box via its id (the target id is an <input> field with an id of edit-search-block-form--2). The monitor then locates the submit button (edit-submit) and clicks the search button to execute the search.

For more information about sending text to a field, see Entering text.

Wait for a page to load

In this example, the monitor searches https://docs.newrelic.com for tshirt, waits for the results to load, then clicks one of the results:

$browser.get("https://docs.newrelic.com").then(function(){
    return $browser.findElement($driver.By.id("edit-search-block-form--2")).sendKeys("tshirt");
}).then(function(){
    return $browser.findElement($driver.By.id("edit-submit")).click();
});
//Call the wait function.
$browser.wait(function() {
//Tell the monitor to get the page title, then run a function on that title.
  return $browser.getTitle().then(function(title) {
//Ensure that the title matches `Search | New Relic Documentation`.
    return title === "Search | New Relic Documentation";
    });
//If the condition isn't satisfied within 10000 milliseconds (10 seconds), proceed anyway.
}, 10000);
//Find the desired search result by locating its link text and click it.
$browser.findElement($driver.By.linkText("Creating your New Relic account")).click();

The monitor searches the website. Then, the monitor waits up to 10 seconds for the HTML page title to match Search | New Relic Documentation. Once the page title matches, the monitor locates the Creating your New Relic account article by searching for an element with the link text Creating your New Relic account.

For more information about setting wait conditions that will pause the script, see Waiting for page title.

Wait for a page element

You can also wait for any other page element to load, such as an id or class. Use the isElementPresent driver within a wait function, then specify a page element in the same way you would locate a page element. In this example, the monitor waits for a name element to be present:

//Navigate to the New Relic blog.
$browser.get("http://blog.newrelic.com");
//Call the wait function.
$browser.waitForAndFindElement($driver.By.name("email"), 22000).then(function(){
//Input an email address in the email subscription box.
    $return = $browser.findElement($driver.By.name("email")).sendKeys("test-synth-script@example.com");
}).then(function(){
//Locate the `Sign Me Up` button by XPath
    $return = $browser.findElement($driver.By.xpath("//*[@id='blog-leads-form']/input[4]")).click()
});

The monitor visit the New Relic blog. Then, the monitor waits up to 22 seconds for the email subscription form to be present. Once the element is present, the monitor locates the email address field (name="email") and enters a test email address. The monitor then sends a Tab key and an Enter key to switch fields and submit the form.

For more information, see Waiting for a specific element and Conditions: Pause and wait for conditions.

Log in to a website

In this example, the monitor accesses a WordPress portal and logs in with a user name and password:

$browser.get("http://www.example.com/wp-admin").then(function(){
//Find the user name field by specifying its id, then enter the user name.
    return $browser.findElement($driver.By.id("user_login")).sendKeys("EXAMPLE USER NAME");
}).then(function(){
//Find the password field by specifying its id, then enter the password
    return $browser.findElement($driver.By.id("user_pass")).sendKeys("EXAMPLE PASSWORD");
}).then(function(){
//Click the submit button.
    return $browser.findElement($driver.By.id("wp-submit")).click();
});

The monitor locates the user name and password fields via their id. The monitor enters the test user name and password, then locates the Submit button (wp-submit) and clicks to log in.

Additional examples

This document describes just a few of the ways to write browser scripts for New Relic Synthetics. To view and share other scripted browser examples and discuss WebDriverJS scripting, check out the Synthetics Scripts section of the New Relic Online Technical Community.

For more help

Additional resources include:

Discuss Synthetics in the Online Technical Community! Troubleshoot, offer feedback, and share and view example scripts. If you need additional help, get support at support.newrelic.com.