Since Flood Element uses real CSS or XPath properties - it can be tricky to identify the object properties that will not only detect the correct object but also detect it reliably each time you run your test. The best course of action is to find properties of an object that fulfil the following criteria:

• Ensure the properties are unique to the object you'd like to interact with

• Ensure the properties are fairly easily readable for the object you'd like to interact with

• Ensure the properties are reliable so that they can be accessed reliably every iteration

Overview of using CSS or XPath Selectors

When looking to use CSS or XPath as your identification method for objects - the step-by-step method in doing this can be described below:

Step 1 - Choose the object you'd like to interact with

Using Google Chrome with the Developer Tools (F12) window shown, right click on the object and click on the Inspect menu item.

This will display the exact line of code that represents the object's properties

Step 2 - Retrieve the CSS or XPath selector string

Within the code view - click on the ellipse icon on the left of the line in question as follows:

Click on the Copy menu item and then proceed to click on Copy selector (for CSS) or Copy XPath (for the XPath code) that you will be able to use in your Flood Element object properties.

Using CSS or XPath in your Element script

CSS Example

		let linkCart = By.css('[title="Cart"]')
		let element = await browser.findElement(linkCart)
		await element.click()

XPath Example

		let linkCart = By.xpath("//a[contains(text(),'Cart')]")
		let element = await browser.findElement(linkCart)
		await element.click()

SAP Fiori - Common XPath Examples

Flood Element is a great fit for SAP Fiori web-based applications and we've found the following examples are helpful when interacting with common SAP Fiori components.

Identifying an object using the 'contains' method

Using the contains method for object identification adds some robustness and readability to your code. SAP Fiori objects can contain large amount of dynamic and unfriendly properties that tend to change dynamically at every page load. Using these dynamic values will tend to break the execution of your script upon playback. Using something similar to the following provides a way for your scripts to be more reliable.

		let input_username = By.xpath("//input[contains(@id, 'USERNAME_FIELD-inner')]")
		let element = await browser.findElement(input_username)
		await element.type('Floody20')

Identifying an object using it's text label

Using an object's text value can also simplify, stabilise, and enhance the readability of your script. Text labels also have the advantage that there is usually not more than one object with the same text value on the page at the one time.

		let btn_LogOn = By.xpath("//span[contains(text(),'Log On')]")
		let element = await browser.findElement(btn_LogOn)
		await element.click()

​