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 thisrow selector
as an examplebody > 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 thetag
you want inside of each row. If we use thiscolumn selector
as an examplebody > table > tbody > tr:nth-child({row}) > td
we will find all the column values inside of each row that has the tagtd
. If we use thiscolumn selector
as an examplebody > 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 tagtd
andth
.
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.
Practice using w3Schools Table
- Launch a web browser using
chrome
oredge
, use this url:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro
- Choose the
Headers as columns
option - Get the
Row selector
. Here is how to find a selector - Add the
Row selector
as a manual value inside the commands settings - Leave the
start row index
a link - Get the
Column selector
. Here is how to find a selector - 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 columnstd
, checkout theexmaple inputs
accordion forColumn Selector with different tags
- Note: You are required to select multiple tags in the column selector because the first row are the headings
- Replace the number in the
nth-child(1)
tag with{row}
- Get the
iFrame selector
. Here is how - Add the
iFrame selector
as a manual value inside the commands settings - Make sure you have a robot linked to the macro and run your macro
Practice using w3Schools List
- Launch a web browser using
chrome
oredge
, use this url:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_intro
- Leave the headers option as
Include headers
- Get the
Row selector
. Here is how to find a selector - Add the
Row selector
as a manual value inside the commands settings - Leave the
start row index
a link - Get the
Column selector
. Here is how to find a selector - Add the
Column selector
as a manual value inside the commands settings - Replace the number in the
nth-child(1)
tag with{row}
- Get the
iFrame selector
. Here is how - Add the
iFrame selector
as a manual value inside the commands settings - Add a
column field
as a manual value inside the commands settings - 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 yourcolumn 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 yourcolumn 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
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 therow 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
Search Tags
select nested elements
select table data