When Tim Berners-Lee invented HTML and HTTP in the early 1990s, he was working on a method to link scientific research papers; he probably had no idea what the World Wide Web would ultimately become.

The addition of the FORM tag to HTML a few years later helped kick-start the web’s transformation to an applications platform. Forms made it much simpler to create transactional applications that could accept structured input from the user. Today, nearly every web-based application employs forms: to accept credentials on a login page, search parameters on a travel site, or payment details on a checkout page, for example.

A faster, simpler way to interact with forms

Because HTML forms are so prevalent, interacting with them is one of the most common tasks in New Relic Synthetics scripted browser monitors. When I want to monitor an application that includes an HTML form, my first impulse is to write a script that completes the form fields and clicks the Submit button. It may be much simpler, however, to send a request directly to the form’s target.

For example, one New Relic customer recently asked for help automating monitoring of a form in which the date field did not accept text input; instead, it required the user to select a date from a drop-down calendar. Writing code to locate and select the desired date on the calendar would have been tedious and difficult. Submitting the desired values to the form’s target URL was much easier.

Here’s an example of how that might work for a search form for a travel website:

travel website

 

Say you want to write a script that searches for available flights two weeks from today. You could locate each form field, populate it with the desired value, and click the Search button:

$browser.get('https://travel.newrelic.com/')
   .then(function() {
      $browser.findElement($driver.By.id('flight-origin')).sendKeys('PDX');
   })
   .then(function() {
      $browser.findElement($driver.By.id('flight-destination')).sendKeys('NYC');
   })
   //
   // Repeat for other fields
   //
   .then(function() {
      $browser.findElement($driver.By.id('search-button')).click();
   })

But what actually happens when you click that Search button? Most HTML forms issue a GET or POST command to a URL, which parses the parameters and performs the search. Why not skip the form and submit the search request directly to the target?

Cut to the front of the line

Because New Relic Synthetics provides a fully functional Node.js environment, you can import Node modules and implement complex logic; you’re not limited to interacting with a browser.


var assert = require('assert');
var qs = require('querystring');

// Set travel date = today + 14 days
var travelDate = addDays(new Date(), 14);

// Modify search params as desired
var searchParams = {
   origin : 'PDX',
   destination : 'NYC',
   flexible : 'true',
   when : yyyymmdd(travelDate) ,
   passengers : '2'
};

// Convert search params to query string
var queryString = qs.stringify(searchParams);

// Do search
$browser.get('https://travel.newrelic.com/search?' + queryString)
   .then(function() {
      // Wait up to 30 seconds for search results
      return $browser.waitForAndFindElement($driver.By.id('result-count'), 30000);
});

// Helper functions
function addDays(startDate, numberOfDays) {
   return new Date(
      startDate.getFullYear(),
      startDate.getMonth(),
      startDate.getDate() + numberOfDays,
      startDate.getHours(),
      startDate.getMinutes(),
      startDate.getSeconds());
}

function yyyymmdd(dateIn) {
   var yyyy = dateIn.getFullYear();
   var mm = dateIn.getMonth() + 1; // getMonth() is zero-based
   var dd = dateIn.getDate();
   return String(10000 * yyyy + 100 * mm + dd); // Leading zeros for mm and dd
}

When dealing with complex forms, this method can be much easier to code and understand. So next time you’re struggling to automate a complex form in New Relic Synthetics, remember this technique. Interacting with HTML forms doesn’t have to be rocket science.

Adapted from a post to the New Relic Community Forum. Visit our forum to learn more about Synthetics scripting and post your questions to the Synthetics Scripts category.

 

Travel icons designed by Freepik from Flaticon.

Phil Weber is a Senior Technical Training Specialist with New Relic University. He worked as a software developer for over 15 years, and has been a technical trainer since 2005. As a consultant, he worked for such clients as Intel and Kaiser Permanente.

View posts by .

Interested in writing for New Relic Blog? Send us a pitch!