New Relic’s scripted browser monitoring is a fantastic tool that allows you to emulate and monitor user interactions with your website or application. It uses Selenium WebDriver JS to execute scripts in a real browser. Here are a couple of examples of how you might use it:
Example 1: Basic Login Test
A common use of a scripted browser monitor is to simulate a user logging into an application. Here’s a simple script that does just that:
//javascript Code
var assert = require('assert');
$browser.get('https://www.yourwebsite.com/login').then(function() {
return $browser.findElement($driver.By.name('username')).sendKeys('testuser');
}).then(function() {
return $browser.findElement($driver.By.name('password')).sendKeys('password');
}).then(function() {
return $browser.findElement($driver.By.name('submit')).click();
}).then(function() {
return $browser.wait($driver.until.elementLocated($driver.By.id('welcome-message')), 10000);
}).then(function(welcome) {
return welcome.getText().then(function(text) {
assert.equal(text, 'Welcome, testuser!');
});
});
In this script, the bot opens the login page, enters the username and password, and clicks on the submit button. It then waits for the welcome message to appear and asserts that the welcome message is as expected.
Example 2: Test a Search Function
You can also use scripted browser monitoring to test more complex functions on your website, like a search feature. Here’s a sample script:
//javascript Code
var assert = require('assert');
$browser.get('https://www.yourwebsite.com').then(function() {
return $browser.findElement($driver.By.name('search')).sendKeys('test query');
}).then(function() {
return $browser.findElement($driver.By.name('submit')).click();
}).then(function() {
return $browser.wait($driver.until.elementLocated($driver.By.className('search-results')), 10000);
}).then(function(results) {
return results.getText().then(function(text) {
assert(text.includes('test query'));
});
});
In this example, the bot goes to the homepage, enters a query into the search bar, and clicks on the search button. It then waits for the search results to appear and checks that the results include the search query.
Example 3: Form Submission Test
In this example, let’s simulate a form submission and verify the success message:
//javascript Code
var assert = require('assert');
$browser.get('https://www.yourwebsite.com/contact').then(function() {
return $browser.findElement($driver.By.name('name')).sendKeys('John Doe');
}).then(function() {
return $browser.findElement($driver.By.name('email')).sendKeys('johndoe@example.com');
}).then(function() {
return $browser.findElement($driver.By.name('message')).sendKeys('This is a test message.');
}).then(function() {
return $browser.findElement($driver.By.name('submit')).click();
}).then(function() {
return $browser.wait($driver.until.elementLocated($driver.By.className('success-message')), 10000);
}).then(function(successMsg) {
return successMsg.getText().then(function(text) {
assert.equal(text, 'Your message has been successfully submitted!');
});
});
In this script, the bot navigates to a contact form page, fills in the name, email, and message fields, and submits the form. It then waits for the success message element to appear and verifies that the displayed message matches the expected success message.
Example 4: E-commerce Checkout Flow
For an e-commerce website, you might want to monitor and test the checkout flow. Here’s an example script that goes through the entire checkout process:
//javascript codevar assert = require('assert'); $browser.get('https://www.yourwebsite.com/cart').then(function() { // Add items to the cart // ... }).then(function() { return $browser.findElement($driver.By.className('checkout-button')).click(); }).then(function() { // Fill in shipping address and payment details // ... }).then(function() { return $browser.findElement($driver.By.name('place-order')).click(); }).then(function() { return $browser.wait($driver.until.elementLocated($driver.By.className('order-confirmation')), 10000); }).then(function(confirmation) { return confirmation.getText().then(function(text) { assert(text.includes('Thank you for your order!')); }); });
This script starts from the cart page, adds items to the cart, proceeds to checkout, fills in shipping and payment details, and finally places the order. It waits for the order confirmation element to appear and verifies that the confirmation message is as expected.
Example 5: Form Validation Testing
In this example, we’ll simulate user input and validate form behavior on your website:
//javascript Code
var assert = require('assert');
$browser.get('https://www.yourwebsite.com/signup').then(function() {
return $browser.findElement($driver.By.name('name')).sendKeys('John Doe'); // Enter a valid name
}).then(function() {
return $browser.findElement($driver.By.name('email')).sendKeys('johndoe@example.com'); // Enter a valid email
}).then(function() {
return $browser.findElement($driver.By.name('password')).sendKeys('pass123'); // Enter a valid password
}).then(function() {
return $browser.findElement($driver.By.name('confirm-password')).sendKeys('pass123'); // Enter matching confirmation password
}).then(function() {
return $browser.findElement($driver.By.name('submit')).click(); // Submit the form
}).then(function() {
return $browser.findElement($driver.By.className('success-message')).getText().then(function(text) {
assert.equal(text, 'Registration successful!'); // Validate the success message
});
});
In this script, the bot navigates to a signup form, enters valid user data (name, email, password, and confirmation password), and submits the form. It then verifies that the success message displayed is as expected.
Example 6: Multi-Page User Journey
This example demonstrates how you can script a multi-page user journey, simulating user interactions across multiple pages:
//javascript Code
var assert = require('assert');
$browser.get('https://www.yourwebsite.com/home').then(function() {
return $browser.findElement($driver.By.linkText('Products')).click(); // Click on the Products link
}).then(function() {
return $browser.findElement($driver.By.linkText('Product A')).click(); // Click on a specific product
}).then(function() {
return $browser.findElement($driver.By.className('add-to-cart')).click(); // Add the product to the cart
}).then(function() {
return $browser.findElement($driver.By.linkText('Checkout')).click(); // Proceed to checkout
}).then(function() {
return $browser.findElement($driver.By.className('place-order')).click(); // Place the order
}).then(function() {
return $browser.findElement($driver.By.className('order-confirmation')).getText().then(function(text) {
assert(text.includes('Thank you for your order!')); // Validate the order confirmation message
});
});
In this script, the bot starts on the homepage, navigates to the Products page, clicks on a specific product, adds it to the cart, proceeds to checkout, places the order, and verifies the order confirmation message.
Example 7: Capturing Screenshots
This example demonstrates how to capture screenshots during a scripted browser monitor. Screenshots can provide visual evidence of issues and help with troubleshooting.
//javascript Code
var assert = require('assert');
$browser.get('https://www.yourwebsite.com').then(function() {
return $browser.takeScreenshot(); // Capture a screenshot of the initial page
}).then(function(screenshot) {
// Save or process the screenshot as needed
// ...
}).then(function() {
// Execute further steps in the script
// ...
});
In this script, the bot opens the website and uses the $browser.takeScreenshot() function to capture a screenshot of the page. You can save or process the screenshot as per your requirements, such as storing it or analyzing it for visual regression testing.
Example 8: Performance Measurement
This example showcases how to measure the performance of specific actions on your website using New Relic’s scripted browser monitoring.
//javascript Code
var assert = require('assert');
var startTime;
$browser.get('https://www.yourwebsite.com').then(function() {
startTime = Date.now(); // Record the start time of the action
return $browser.findElement($driver.By.className('cta-button')).click(); // Perform the action
}).then(function() {
var endTime = Date.now(); // Record the end time of the action
var executionTime = endTime - startTime; // Calculate the execution time
console.log('Execution time:', executionTime, 'ms');
// Further assertions or actions based on the performance measurement
// ...
});
In this script, the bot navigates to the website and performs a specific action, such as clicking a call-to-action button. The start time of the action is recorded, and after the action completes, the end time is recorded. The script then calculates the execution time and logs it to the console. You can add further assertions or actions based on the performance measurement.
Feel free to customize these examples or create your own scripts to suit your specific application and monitoring requirements. New Relic’s scripted browser monitoring offers immense flexibility to simulate complex user interactions and monitor critical processes on your website or application. Don’t forget to learn How to Get Synthetics Monitoring to Work in New Relic.
Remember, these are just basic examples. You can customize these scripts to match the specifics of your website or application and the interactions you want to monitor.