Unable to replay my script successfully

A guide to troubleshooting common reasons why your Element script won't replay successfully.

There are many reasons why your script may not be playing back as expected - here are a few common reasons and suggestions that we've assisted customers with in the past to enable them to get up and running successfully.

Usage of stepDelay and actionDelay timeouts

It's always a great idea to ensure your stepDelay and actionDelay values are not too small that the user will run as fast as possible. Using too low a value for both of these settings makes the test unrealistic as a real user would never take 1 second to think about what they were going to do next or be that quick to interact with other objects.

A value of between 8-10 seconds is usually suggested for both of these settings to ensure reliable and realistic playback of your user.

Verifying you are on the expected page

Another comm issue for replay failures is that the user is not on the correct page or something has blocked the user from progressing to the next step.

It is recommended to have at least 1 object or text verification point at each step. This ensures that your user is accessing the expected page or point where the user is able to progress successfully.

For example - after a login form submission, a message being displayed on the resulting screen such as Welcome <Username>, you have been successfully logged in to the system. can be used to ensure your user is ready to proceed to the next step.

let pageVerify = By.xpath("//span[contains(text(),'successfully logged in to the system.')]")
await browser.wait(Until.elementIsVisible(pageVerify))

Using something like the code snippet above will ensure that the user is on the correct page before proceeding.

Object property changes

Sometimes an object properties will change either because it's dynamic or because the application's development team has made some changes. You can verify that an object's properties have changed either by manually inspecting the object using the Google Chrome Developer Tools or running your Element script using the --dev-tools command line parameter and a suitable pause at the step of the object in question.

Global script timeout settings

Sometimes an application might still be under development or shared with other teams resulting in variable performance and response times. Your script may be failing simply when the Application Under Test is not responding as quickly as expected.

Your global timeout settings can be increased in this instance allowing the script more time to locate and access the object.

The script will playback as per usual however will only wait until the maximum timeout setting or once the object has been detected - whichever comes first.

The setting is called waitTimeout and the value is in seconds.

export const settings: TestSettings = {
loopCount: -1,
description: 'SAP Fiori',
actionDelay: 8.5,
stepDelay: 8.5,
chromeVersion: 'stable',
waitTimeout: 60,
}

Environment availability

The availability and stability of your Application Under Test (AUT) will obviously have an impact on the successful playback of your Element script. It always is a good idea to verify if there is active development or changes being carried out to the same environment you are testing against as any changes can negatively impact your test results.

Chrome browser version

By default Element uses the Chromium browser which is more suited for developmental purposes and although fully-functional - doesn't have all the capabilities of a recent Google Chrome release. Most public facing applications are built and functionally tested with Google Chrome as opposed to Chromium so the usage of chromeVersion:'stable' in your test settings may assist with any replay or playback issues you are facing.

Troubleshooting iFrames

For Flood Element we can use the following identification properties so it can recognise the iframe by it's URL and interact with any objects within it.

//let's declare the iframe object and identify it from a unique part of the url
const frame1 = browser.page
.frames()
.find(frame => frame.url().includes('api2/anchor?ar=1&k'))

You can also use a frame's id or name property as well.

const frame2 = browser.page
.frames()
.find((frame) => frame.name().includes('itsframe1'))

We can now access the objects within the iframe that are required to be interacted with. We can get the properties of this object from the code itself.

For example, this reCAPTCHA checkbox object is within an iframe and now we can use it's CSS selector to access it with the use of the iframe declaration code above.

//get the css locator for the checkbox object
let css_reCAPTCHA = '#recaptcha-anchor >div.recaptcha-checkbox-border'
//let's wait for the checknox object within the iframe
await frame1.waitForSelector(css_reCAPTCHA)
//click on the reCAPTCHA checkbox
await frame1.click(css_reCAPTCHA)

Now, when playing this script back, we should see the reCAPTCHA object checkbox being accessed successfully.