When interacting with web pages in your workflows, you need to identify some types of elements you may face. A good example is an iframe: an HTML element that is able to load another HTML element within a page. Want an example? You can see some iframes on ElectroNeek's home page:
An iframe highlighted in red on ElectroNeek's Help Center home page
Your Studio Pro workflows can interact with these elements. You just need to make sure you are dealing with an iframe, then tell your workflow how to work with it. You can do that in two different ways using the "Find iframe" activity.
1. Using the "Pick New Element" functionality
To make it easier, follow these steps in your Studio Pro, so your bot identifies an iframe within a web page (make sure the URL is open in your Google Chrome):
- Click "Web Automation" → "Web Browser"
- Double-click or drag & drop "Find Iframe" to add the activity to your workflow
- Click on the activity block
- Click on "Browser element" → "Pick New Element" on the Properties tab
- When Studio Pro minimizes and the browser appears, select the iframe you want your bot to identify
- With the cursor over it, press Ctrl + x to pick the element
- When the pop-up appears, click on "Save".
The process looks like this:
As an alternative, you can also inform the Iframe attribute manually, as we show next.
2. Getting the XPath
The alternative you have is to manually get the iframe XPath (or the CSS). To do that, open the web page on Google Chrome, then press Ctrl + Shift + C to open the DevTool tab on the right side of the screen. If you hover your mouse over the page, elements are highlighted along their respective line codes. Here is an example:
So, click on the desired iframe to have its line codes highlighted. Right-click the selected lines → "Copy" → "Copy XPath".
You are able to select a specific element inside an iframe. In the following example, you can see the Pick New Element function being used to select a field from a web page. In this case, each of the available fields is a unique element within an iframe — and Studio Pro tracks them:
As soon as you pick an element, this Browser Picker window opens. This indicates that the element was found and recognized. You can set the element name here as well.
Expand the "Advanced options" menu or the selector of the indicated element. It contains the iframe tab with its own attributes and values which represent the hierarchy of how the interface element is developed. You can check or uncheck the attributes to achieve better accuracy or stability of interaction with the element.
- Is — allows you to define the attribute with the declared String or Number as its value.
- Calculate — allows you to pass the value through a previously declared variable.
- Contains — allows you to define the attribute that contains the string as part of the value.
In this parameter you can specify the name of the tab that you want the bot to interact with. The name of the tab is assigned in the "Open URL" activity.
Set a value allows you to manually specify the name of the tab.
Calculate a value allows you to use a special formula or a special method to determine the name of the tab.
Save the previous step result takes the result of the previous workflow action as the name of the tab.
Use tab name in order
Use this checkbox to specify a sequential number of a tab in the browser. It is worth using if a new tab opens not manually, but automatically after clicking on some element.
In this parameter, you specify the number for the found iframe element.
Contains an annotation to the activity. The input text is displayed above the activity name.