We're leveling up FutureStack registration with swag, only until 4/30. Terms & conditions apply. Register Now

Nerdlog Roundup: Test Website Experiences with New Relic Synthetics Step Builder

6 min read

Get weekly updates about the latest features and releases from the people who built them. Join the Nerdlog discussion every Thursday at 12 p.m. PT on Twitch or follow along in What's New.

If you're not a New Relic customer, sign up for your free account today.

How many times have you found yourself wondering, “is our site down for everyone or just me?” In my own dev life, I can think of a dozen times I’ve had to switch off my phone’s Wi-Fi to check whether the problem was just something local (or vice versa, if our site looked up but was only working internally).

synthetics monitoring screenshot

New Relic One synthetics monitoring capabilities help you detect and resolve poor performance and outages before your customers notice. 

Even better, New Relic One stores detailed traces of these automated page loads to help you analyze your site’s performance.

New Relic One traces

And guess what? Every New Relic free account includes 10,000 synthetics checks per month. This means you can fully set up a three-step checkout process in a region with checks every 15 minutes, and still be within your free tier. 

Once you’re enjoying synthetics for monitoring page loads, the next challenge is testing user actions that require complex interaction, e.g., a user logging in or checking out on an e-commerce site. Previously, this was only possible by writing a script with code or with tools, like the Selenium IDE, that script user actions. 

Synthetics step builder: End-to-end testing with no code

Now with our new step builder, you can set up tests for complex user flows on your website without code. Just add steps and type the actions you want the monitor to perform.

step builder screenshot

With the step monitor, you can easily test complex user flows like:

  • Logging into a website
  • Entering credentials (our secure credential store means you don’t have to script them in plaintext)
  • Adding items to a shopping cart
  • Checking out and purchasing items
  • Verifying an element appears on a website 

Build your first step monitor

To get started, go to the “Create monitor” page. There you will see the new “User step execution” option. (IMPORTANT: If you don’t see this view, click the “Show new view” toggle button on the top bar.)

step monitor screenshot

Click the “User step execution” monitor type to use the step builder.

After going through the steps to configure the monitor and select locations to monitor from, you will be shown the step builder.

step builder screenshot

Use the step builder to easily create a monitor that verifies users can log in.

When setting up steps, several types are available:

  • Assert Text: Test whether specific text appears on the screen
  • Assert Element: Test that a specific element (e.g., buttons, divs, images, etc.) are on the page or are visible
  • Click Element: Interact with elements on the page, like buttons
  • Type Text: Enter text on the page.
  • Secure Credential: Enter text without exposing it to everyone using New Relic One (e.g., passwords)

To locate elements in the monitor, you have several options. You can locate by:

  • CSS Class
    •  #stylized-button
      • The monitor looks for elements with the CSS class “#stylized-button”
  • HTML ID
    •  <div id = “button”></div>
      • The monitor looks for elements with the id “button”
  • Link Text
    •  <a href="http://example.com>Link text</a>
      • The monitor looks for links with the “Link text”
  • XPath
    •  <input placeholder=“search-query-field”>
      • The monitor looks for “//input[@placeholder = 'search-query-field']” 

Once the monitor is saved, the New Relic One UI generates a Selenium IDE script so that you can do direct script editing for more advanced tests. For example, you could edit the script directly to use a regex instead of simple matching for string tests. To view a summary of the performance of your user flow, simply click on the monitor name. You’ll then be able to see request/response times, error response codes, duration, and metadata and tags.

summary performance screenshot

Monitor from anywhere in the world

Lastly, while it’s not a new feature, an incredibly useful aspect of synthetics monitoring is the ability to ping from multiple geographic locations. When you view results, you’ll see successes and failures sorted by geographic region.

geo-tracking screenshot

When trying to replicate an error experienced by only a subset of users, geo-tracking can save tons of time by localizing a problem.

To learn more and see a detailed walkthrough, watch the Nerdlog episode below.