Scripted browser examples

Using scripted browsers, you can build complex monitoring workflows using a JavaScript-like scripting language driven by Selenium WebDriver.

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 http://telco.nrdemo-sandbox.com/:

//Visit http://telco.nrdemo-sandbox.com/
$browser.get("http://telco.nrdemo-sandbox.com/");

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

Navigate to a link

In the example below, the monitor:

  1. Navigates to http://telco.nrdemo-sandbox.com/.
  2. Finds the About page via link text and clicks the link.
  3. Finds the Acme Telco Home link by searching for the partial string Home and clicks the link.
$browser.get("http://telco.nrdemo-sandbox.com/").then(function(){
//Find a link whose display text is `About` and click that link.
    return $browser.findElement($driver.By.linkText("About")).click();
}).then(function(){
    return $browser.findElement($driver.By.partialLinkText("Home")).click();
});

These steps are ordered by a sequencing function.

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

In the example below, the monitor:

  1. Navigates to http://telco.nrdemo-sandbox.com/static/companyBlog.jsp.
  2. Locates the search box via its XPath and types relic.
  3. Locates the submit button via its XPath and clicks it to submit the search.
$browser.get("http://telco.nrdemo-sandbox.com/static/companyBlog.jsp").then(function(){
//Find the search field by specifying its id, then enter `relic`.
    return $browser.findElement($driver.By.xpath("/html/body/div/div/div[2]/div[1]/div/input")).sendKeys("relic");
}).then(function(){
//Click the search button.
    return $browser.findElement($driver.By.xpath("/html/body/div/div/div[2]/div[1]/div/span/button")).click();
});

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

Wait for a page to load

In the example below, the monitor:

  1. Navigates to http://telco.nrdemo-sandbox.com/browse/phones.
  2. Finds the Details button for the Acme Standard phone via its XPath and clicks on it.
  3. Waits up to 10 seconds for the HTML page title to match Acme Commerce Company.
  4. Finds the Add to Cart button via its XPath and clicks on it.
$browser.get("http://telco.nrdemo-sandbox.com/browse/phones").then(function(){
    return $browser.findElement($driver.By.xpath("/html/body/div/div/div[2]/div[3]/div/div[3]/a")).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 `Acme Commerce Company`.
    return title === "Acme Commerce Company";
    });
//If the condition isn't satisfied within 10000 milliseconds (10 seconds), proceed anyway.
}, 10000);
//Find the `Add to Cart` button via its XPath and click it.
$browser.findElement($driver.By.xpath("/html/body/div/div[3]/div[2]/div/div/div/input[2]")).click();

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

Wait for a page element

In the example below, the monitor:

  1. Loads http://telco.nrdemo-sandbox.com/.
  2. Finds the Support dropdown via HTML ID and clicks on it.
  3. Waits up to 20 seconds for the FAQ button to appear and clicks on it.
//Navigate to the Acme Telco Homepage and clicks on the Support dropdown.
$browser.get("http://telco.nrdemo-sandbox.com/").then(function(){
    return $browser.findElement($driver.By.id("supportDropDown")).click();
}).then(function(){
    //Call the wait function to wait until the FAQ button appears.
    return $browser.waitForAndFindElement($driver.By.id("supportFAQLink"), 2000).then(function(aboutPage){
        return aboutPage.click();
    })
});

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

Log in to a website

In the example below, the monitor:

  1. Loads http://telco.nrdemo-sandbox.com/login.jsp.
  2. Finds the username field through element name and submits a secure username via our secure credentials feature.
  3. Finds the password field through the element name and submits a secure password.
  4. Finds the login button via its XPath and clicks to submit the account information.
$browser.get("http://telco.nrdemo-sandbox.com/login.jsp").then(function(){
//Find the user name field by specifying its name, then submits a secured username.
    return $browser.findElement($driver.By.name("username")).sendKeys($secure.SECURE_USERNAME);
}).then(function(){
//Find the password field by specifying its name, then submits a secured password.
    return $browser.findElement($driver.By.name("password")).sendKeys($secure.SECURE_PASSWORD;
}).then(function(){
//Find and click the login button.
    return $browser.findElement($driver.By.xpath("/html/body/div/div/div/div/div/div[2]/form/input[3]")).click();
});

For more information about using secure credentials, see Store secure credentials.

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');

This only spoofs the user-agent HTTP header for the request to the server. It does not change the value of navigator.userAgent.

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:

Recommendations for learning more: