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 the 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 Visit 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 Locate 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 Enter 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 Wait 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 Wait 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.

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: