Search Panel

media_1484839698307.png

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

media_1484839750708.png

Select the type of search you would like to perform.

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

media_1484839783599.png

Type in the search string that will be used.

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

media_1484839792429.png

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.

media_1484839811453.png

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

media_1484839825058.png

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

Add Actions

media_1484839837152.png

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

media_1484839865143.png

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.

Adding Paging

media_1484843382000.png

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.

media_1484843642308.png

Scraper Panel

The Scrape Panel allows you to create a Scrape Collection of elements that can be looped through.

media_1484840615435.png

Click the Start button to begin the scraping process.

Clearing Selections

media_1484841644523.png

Clear – clears the current element selection and allows.

Pausing the Scraping Process

media_1484841683658.png

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.

Stopping the Scraping Process

media_1484841697454.png

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

Creating Your Selection

media_1484841165303.png

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.

media_1484841232812.png

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

Adding Columns

media_1484841275603.png

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.

media_1484841512175.png

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.

Removing Columns

media_1484841548470.png

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

Adding Actions

media_1484843227576.png

media_1484843197217.png

Adding Paging

media_1484843317635.png

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.

media_1484843338848.png

HTML Panel

The HTML Panel descibes the element being clicked or hovered over.

media_1484835112867.png

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

media_1484835184931.png

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

media_1484835265193.png

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

Adding Actions

media_1484839425149.png

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

media_1484839454806.png

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.

Browser

media_1484838117410.png

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

Navigation

media_1484838124633.png

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

media_1484838138856.png

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

media_1484838190932.png

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

All the details of the webpage will be available.

Drag and Drop Elements

media_1484838270126.png

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

media_1484838346011.png

Designer

media_1484787112519.png

The Browser Designer is built into four sections.

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

media_1484834190311.png

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

Main Browser

media_1484833920137.png

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.

HTML Panel

media_1484787130858.png

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.

media_1484834144330.png

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

Scraper Panel

media_1484787139207.png

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

Search Panel

media_1484787148093.png

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

Overview

media_1484827374075.png

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.

 

media_1484833355264.png

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.