Handling of Blank iFrame in SAP Build Process Automation(SBPA)

[AjithkumarShanmugasundaram]

Hello Everyone,

In this Blog, we will explore how to handle empty iframes in SAP Build Process Automation.

What is an Iframe?

An iframe (inline frame) is an HTML element that loads another HTML page within the current document. Iframes are mainly used to embed external content such as Google Maps and YouTube videos.

For a detailed explanation on capturing an iframe to use it in your automation, refer to the SAP help documentation.

What is an Empty Iframe?

An empty iframe is an iframe element with no src attribute or one that points to a blank URL:

<iframe src='about:blank'></iframe>

Common Use Case for Empty Iframes

Empty iframes are often used to embed rich text editors, which allow users to format text, insert images, links, tables, and perform other rich text editing functions.

Challenges

When a screen contains iframes that have no src tag, or about:blank url, that frame cannot be captured or recorded in SBPA. Elements inside the iframes also become inaccessible.

More information about Limitations of SBPA can be found in the SAP help documentation.

Alternative Solution in SBPA

While such challenges are unavoidable, this blog provides an alternative solution to handle empty iframes in SBPA effectively.

We've taken a sample webpage that features Rich Text Editors in the Description Box.

Add some sample text into the editor. Next, right-click on the Decription window and click Inspect.

On clicking inspect, The HTML page gets open, you can view the iframe element.

On the right side column, filter the value "test" to identify which attribute name contains the specified value.

If the attribute is found, make a note of it. Otherwise, proceed with the manual search.

In most Rich Text Editors, the specified value will be located within either the documentElement or the body.

Navigate to contentDocument -> documentElement.

Under documentElement, the innerText value is "test".

Similarly, navigate to contentWindow -> document -> body.

Under the body, we found two attributes with the value "test."

Now we can access the Rich Text Editor Area inside the iframe by changing the value of:

Either,

1. contentDocument.documentElement.innerText  (OR)
2. contentWindow.document.body.innerText (or) innerHTML.

Next, capture the webpage using the Recorder and identify the IFRAME element,

Once Identifed uniquely, Set the Element class as WEB Element and declare the element.

After declaring the element, save the changes in the application.

Note: Select the Web element class from the Web SDK.

Next, Create an automation, add the target screen and Define Screen Activities.

Then click on the declared element in the screen and search for an activity called Set Attribute(WEB). 

Note: This activity will be only available, if the element is declared with the element class WEB Element under Web SDK.

In the right-side tab, provide the attribute parameter value, check the expression and save it.

Finally provide the value to be entered in the value parameter.

Now Run the Bot and observe the result.

Conclusion

This method allows us to directly change the attribute value of an HTML element attribute instead of using the Set Element activity. Similarly, we can select checkboxes or radio buttons by changing the value of an respective attribute to True or False.

Let me know in comments if you have any queries.

Stay tuned for More Updates!!!😀