New Relic Synthetics is a monitoring tool that allows you to create scripted browser tests and monitor your website's availability, uptime, and performance. Synthetics allows you to monitor how your website or web application performs from different locations around the world, ensuring that your users can access your site from different regions and receive consistent performance.
With New Relic Synthetics, you can create scripted tests that simulate user interactions with your website or web application, such as clicking buttons, filling out forms, and navigating through pages. These tests can be run on a schedule or triggered manually, and the results are displayed in the New Relic dashboard.
In this blog, you'll learn how to write synthetic tests with Selenium 4 for some interesting use cases involving asynchronous code, stale elements, animated components, and more. Our aim is to address some of the most common hurdles that you may face. By providing practical solutions and workarounds, we hope to help you overcome these challenges and make the most of the new features and capabilities that Selenium 4 has to offer.
New Relic Scripted Browser testing with Selenium 4
Selenium has long been a popular open-source testing framework for web applications, and with the release of Selenium 4, it has solidified its place as the industry standard. This latest version introduces a host of new features and improvements, making it easier than ever for developers and testers to automate their web testing processes. You can find the transition guide from the old Synthetics runtime to the new one featuring Selenium 4 in the New Relic documentation.
Now, if you're unfamiliar with the term 'scripted browser', it's essentially a feature provided by New Relic Synthetics. It allows users to script and simulate custom user workflows and interactions on their websites or applications. This means you can test how real users would interact with your site, such as logging in, navigating to different pages, and completing forms, all automated through a script using Selenium JavaScript Webdriver bindings.
To set up a scripted browser monitor, follow these steps:
- Navigate to
one.newrelic.com>.Synthetic Monitoring - Click
Create monitorin the top right corner - Choose the
Scripted browseras your monitor type. - Provide your monitor's name and details (e.g., sitename.com scripted browser).
- Pick the locations for your monitor to run (e.g., Mumbai, Seoul, Columbus, and Montreal).
- Select a frequency for your monitor to run (e.g., every five minutes).
After completing these steps, you can create your script to test website performance and ensure certain elements load successfully.
Implement Async/Await in scripting
When using New Relic with Selenium 4, you need to manage your own async functions and promises. This means you can write your scripts in a much more understandable and readable manner.
Consider the `async/await` syntax:
// specify variables
const By = $selenium.By
const until = $selenium.until
// navigate to page
await $webDriver.get('https://automationintesting.com/selenium/testpage/')
// wait for dropdown to be located
const dropdown = await $webDriver.wait(until.elementLocated(By.id('gender')))
// click dropdown
await dropdown.click()
// select dropdown option
const option = await dropdown.findElement(By.xpath("//option[. = 'Female']"))
// check if option is selected
const optionSelected = await option.isSelected()
// if option is not selected, select it
if (!optionSelected) {
await option.click()
}The beauty of the async/await syntax? It is sequential and we can simply read it from top to bottom.
Address the "Stale Element Reference" exception
The Stale Element Reference Exception occurs when a web element that was previously located and interacted with in a Selenium script is no longer present or attached to the DOM due to changes in the web page structure. This can cause the script to fail when trying to interact with the element.
In the new Selenium Webdriver version, some users have faced challenges when adapting to the updated runtime. One such challenge is the Stale Element Reference Exception. This exception, described in the Selenium documentation, arises when a previously located web element becomes detached from the DOM or is no longer present, causing difficulties in interacting with the element.
The solution is to wait for the staleness of the element, and find the element again so that the web driver can pick it up, this time without any issues, like so:
const stalledSearchInput = await
$webDriver.wait(until.elementLocated(By.name("search-input")));
// the following line will wait for the stalled element to be removed from the DOM
await $webDriver.wait(until.stalenessOf(stalledSearchInput), DefaultTimeout);
// the following line locates the element again
const newSearchInput = await $webDriver.wait(until.elementLocated(By.name("search-input")));
await newSearchInput.click();Interact with animated elements
Some pages use animations or enable/disable elements on the page depending on user actions or other events happening on the page.
To tackle this issue we can use the `elementIsEnabled` method, let’s see it in action:
const button = await $webDriver.wait(until.elementLocated(By.xpath("//button[div[text()='Button']]")));
await $webDriver.wait(until.elementIsEnabled(button));
await button.click();In this instance, the script is waiting for an animated button to be enabled after the animation finishes. Had the script not waited for it, it would have failed as the script would have tried to interact with an element that was not yet enabled (visible to the WebDriver).
Troubleshoot the "Element not clickable at point" error
Another common error that can occur when using Selenium WebDriver is the `Element not clickable at point` error, which usually occurs when Selenium WebDriver attempts to interact with an element that is "hidden behind" another element. For example, if an `input` element that Selenium attempts to interact with is overlaid with a `p` element or any other HTML element, this may be due to poor or complex website design. This error can also occur when a script is auto-generated with a recorder that selects the wrong element.
To resolve this issue, we need to inspect the HTML document of the page and properly target the element with which we want Selenium to interact. This typically involves being more specific about either the element itself or its selector.
There are also other reasons why this error might occur:
- when Selenium finds multiple elements with the same selector
- an element is not in the (WebDriver’s) view. - A simple solution to that is to use a callback function to click an element, which tells WebDriver to scroll to an element automatically so it's always in the view.
.then(function (el) {
el.click();
});Hope those few examples will save you a considerable amount of time when moving to the new runtime.
Next steps
Having familiarized yourself with web monitoring using New Relic's Scripted Browser and Selenium 4, there are several further steps you might consider:
- Sign up for a free New Relic account. Your account includes 100 GB/month of free data ingest, one free full-platform user, and unlimited basic users.
- Set up alerts for your scripted monitors to stay informed whenever there are anomalies or any monitor detects failures.
- Improve your website by collecting real-user data to complement your new synthetic data.
- Curious about how it all works? Get a general overview of synthetic monitors
The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.
