Description

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

Note: iframes can be whether visible or not to users. So, if your bot struggles to interact with an element on a web page, you may be dealing with an iframe.

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".

Parameters

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:

ezgif.com-gif-maker.gif

Note: iframes can be tricky to work with, since there may be an iframe inside another. If so, make sure you pick the specific element you need, instead of the bigger iframe.

Advanced options

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.

For each of the iframe attributes you can select one of the following options: "Is", "Calculate", or "Contains" using the Browser Picker. They work as follows:

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.

On tab

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.

Iframe

In this parameter, you specify the number for the found iframe element.

Comment

Contains an annotation to the activity. The input text is displayed above the activity name.