Category: Automation Browser Designer

The Search Panel allows you to control the search criteria that will be used to select elements on a webpage.

Select the type of search you would like to perform.

Available types are Id, Name, Css, XPath, Class and Text.

Type in the search string that will be used.

Example: the image shows we are searching for all elements that are images.

Search – clicking the search button will use the Search Type and Search String to find all elements to fit that criteria.

Clear – clears the current search.

Once the Search button is clicked, the number of elements found will be displayed in the Num of Selections field.

All visible elements will also be highlighted that fit the search criteria

Once you have the correct search criteria that you want to use, click the “Click to Add” button.

Depending on the the number of elements the search finds, a menu of options will be shown.

Click the appropriate option.

In some cases, a Action Builder Wizard will be shown and other case a set of actions will be added to the script.

Note: when one element is found the menu of options will be chosen for that particular element.

When selecting Get Elements with Paging, you will be shown a form to configure the paging.

Select the Next button element that will be used within the Paging.

Page Count – the number of pages that will be processed before canceling. Note: a default of 0 will process all pages.

Once the Next button is selected, click the Add Paging button.

Click the Start button to begin the scraping process.

Clear – clears the current element selection and allows.

Pause – pauses the scraping selection process.

While within the scraping process, mouse actions are disabled to allow for the scraping selection process. Pausing this process will allow you to interact with the webpage normally.

Stop – stops the scraping process and clears any columns within the Selection grid.

Clicking the Start button will begin the Scraping Selection Process.

Clicking on an element will select other elements that are similar.

Typically, the highlighted elements will be more than needed.

Click on any highlighted elements that shouldn’t be included.

Once you have the correct items highlighted, click the Add Column button.

Name – type in a name for the column to be added.

Type – select the type of data that will be scraped for this column.

Available Column types

• Text
• Decimal
• Number
• Currency
• Image
• Bool
• Link
• Email
• Date
• Html

Add Column – click the Add Column to add this column to the Scrape Collection.

Depending on the column type selected, a column will be added including the scraped content.

Note: the Image Type will show the link to the Image file.

Right click the column to be removed and click the Remove Selected Column option.

When selecting Get Elements with Paging, you will be shown a form to configure the paging.

Select the Next button element that will be used within the Paging.

Page Count – the number of pages that will be processed before canceling. Note: a default of 0 will process all pages.

Once the Next button is selected, click the Add Paging button.

The Html section shows the actual html code of the element including any children within the element.

The Attributes shows all attributes, of the element, including the location, css selector and xpath.

Hovering or clicking on an element will cause it’s details to be displayed in the Html and Attribute sections.

Once you have the correct element that you want to interact with, click the “Click to Add” button.

Depending on the type of element, a menu of options will be shown.

Click the appropriate option.

In some cases, a Action Builder Wizard will be shown and other case a set of actions will be added to the script.

The main browser is where you will be interacting with webpages, selecting elements for actions and scraping content.

Navigation works similar to other browser.

Back Button – returns to the previous web page.
Forward Button – navigates to the page visted prior.
Refresh Button – reloads the current page.
Address Bar – the current url being displayed. To navigate to a website, type in the url and press the enter key.

Dev Tools can be accessed by clicking the Dev Tools button.

Hovering over the different html code will highlight the elements on the webpage.

All the details of the webpage will be available.

Selecting a element on the webpage and dragging it onto the script will add a Get Element action for that particular element.

The Browser Designer is built into four sections.

The Main Browser
The Html Panel
The Scraper Panel
The Search Panel

To open the HTML, Scraper and Search panels, click on the appropriate button on the top left.

The Main Browser allows you to interact with the websites like any browser.

The elements on the website will be given an outline with a tag at the top left designating what type of element you are hovering over.

When hovering over input elements, the tag will designate the input and the type of input element.

To retrieve an element, from the browser, click on the element and drag it to the main script.

The HTML Panel will show the details of a element when the mouse if hovered or when the element is clicked.

The Attributes section show all attributes the element has as well as the xpath, css selector and location.

The Html section will show the entire html, including all child elements, of the element.

The Scraper Panel allows you to build a table of data from any webpage.

The Search Panel allows you to use different search criteria to select a element or groups of elements.

When dealing with the elements on a webpage, the Browser Designer will help circumnavigate the process of selecting elements and building interactions with those elements.

The core feature, of the Browser Designer, is generating the criteria that will be used to grab the html element that you wish to interact with.

The Get Element actions is what the browser automation will use to select the desired html element on a specific web page.

You can easily swap out elements by changing the Get Element action within your script without needing to redo the majority of actions.