Skip to content

Select web table as data-list

Description

Target a web table or nested web element and set its values to data-list.

Input Ports

Name dataType sourceType required description
Headers text manual-only manual We have three options that will allow you to include the first row, exclude the first row, or make the first row the data-fields of the data-item.
Row selector text link-manual true The first rows selector without the nth-child(1) attribute in order to select all the rows from the page that has that exact selector.
Start Row Index number link-manual false The row index is at default 1, but sometimes the table row index might start at 2 depending on how the people built their table on the site.
Column selector text link-manual true The column selector is an exact copy of the row selector, except it should contain the nth:child(index) attribute, the index must be replaced with your Row Number placeholder and the next tag in the selector should be > theColumn to select all the columns of each row.
iFrame selector text link-manual false If the element is inside of an Iframe, it is mandatory to specify the iframe selector, otherwise the element won’t be found.
iFrame type text manual-only false Option to add more iframes if the targeted element exists in a nested iframe
Column fields dataField link-manual false The column fields will be generated as (col1, col2, col3) if you do not specify the column field, if you decide to specify the column fields, then you should specify the amount of columns exactly equal to the amount of columns that exist inside of the table, if your table contains 4 columns, you should specify 4 column fields, it does not matter what you name them.

Scenarios

  • The user wants to select a table web element as a data-list.
  • The user wants to select any nested web element as a data-list.

What does the row and column selector do

  • The row selector finds a list of elements that has the exact same selector, which means now we have a list of elements that we can iterate through. If we use this row selector as an example body > table > tbody > tr, we will find all the rows that exist inside of the table.
  • The column selector finds all the nested elements inside of the rows by specifying the tag you want inside of each row. If we use this column selector as an example body > table > tbody > tr:nth-child({row}) > td we will find all the column values inside of each row that has the tag td. If we use this column selector as an example body > table > tbody > tr:nth-child({row}) > td, body > table > tbody > tr:nth-child({row}) > th we will find all the column values that has the tag td and th.

What does the header options do

Type Description
Include Headers This will keep the first row inside the data-list
Skip Headers This will remove the first row inside the data-list
Headers to columns This will remove the first row inside the data-list and make it your column fields

Use case

It is required to make use of the Launch web browser command.

Command

Practice using w3Schools Table
  1. Launch a web browser using chrome or edge, use this url: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro
  2. Choose the Headers as columns option
  3. Get the Row selector. Here is how to find a selector
  4. Add the Row selector as a manual value inside the commands settings
  5. Leave the start row index a link
  6. Get the Column selector. Here is how to find a selector
  7. Add the Column selector as a manual value inside the commands settings
    • Note: You are required to select multiple tags in the column selector because the first row are the headings th and the other rows contains the columns td, checkout the exmaple inputs accordion for Column Selector with different tags
  8. Replace the number in the nth-child(1) tag with {row}
  9. Get the iFrame selector. Here is how
  10. Add the iFrame selector as a manual value inside the commands settings
  11. Make sure you have a robot linked to the macro and run your macro
Practice using w3Schools List
  1. Launch a web browser using chrome or edge, use this url: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_intro
  2. Leave the headers option as Include headers
  3. Get the Row selector. Here is how to find a selector
  4. Add the Row selector as a manual value inside the commands settings
  5. Leave the start row index a link
  6. Get the Column selector. Here is how to find a selector
  7. Add the Column selector as a manual value inside the commands settings
  8. Replace the number in the nth-child(1) tag with {row}
  9. Get the iFrame selector. Here is how
  10. Add the iFrame selector as a manual value inside the commands settings
  11. Add a column field as a manual value inside the commands settings
  12. Make sure you have a robot linked to the macro and run your macro
Inputs

Table

  • Headers: Headers as columns
  • Row selector: body > table > tbody > tr
  • Row number placeholder: {row} You are required to specify the placeholder inside of your column selecter to replace the static row number with the row number that are currently being iterated.
  • Start Row Index: 1
  • Column selector: body > table > tbody > tr:nth-child({row}) > td
  • Column Selector with different tags: body > table > tbody > tr:nth-child({row}) > td, body > table > tbody > tr:nth-child({row}) > th
  • iFrame selector: #iframeResult
  • iFrame type: single

List

  • Headers: Include headers
  • Row selector: body > ul > li
  • Row number placeholder: {row} You are required to specify the placeholder inside of your column selecter to replace the static row number with the row number that are currently being iterated.
  • Start Row Index: 1
  • Column selector: body > ul > li:nth-child({row})
  • iFrame selector: #iframeResult
  • iFrame type: single
  • Column fields: Beverages, text
    columnFields
Experienced tips
  • If you do not get any output data, make sure your row selector targets atleast 1 or more parent elements.
  • If you do not get any output data, make sure your column selector targets atleast 1 or more child elements of the row selector
  • If you do not get any output data, make sure your column selector nth-child(1) attributes index contains the placeholder {row}, eg. > tr:nth-child({row}) > td,
  • When no Row selector is provided, it will stop the process and throw the following error. Select web table requires a row selector
  • When no Column selector is provided, it will stop the process and throw the following error. Select web table requires a column selector
Output

Table

Output

List

Output

Search Tags

select nested elements select table data