Articles → UIPATH → Get The Image URL From The Table Using Data Scraping In Uipath

Get The Image URL From The Table Using Data Scraping In Uipath

Scenario

Rendered Code

<table id="tab_16rwheOrvj" class="tabtable-rs_replaceimages" data-ruleset="rs_replaceimages.xml:rs_replaceimages_2">
	<tr class="tabrow tr_ht1">
		<td class="tabcol">Description</td>
		<td class="tabcol">Image</td>
	</tr>
	<tr class="tabrow ">
		<td class="tabcol">A nice car</td>
		<td class="tabcol">
			<a class="car.jpg" data-lightbox="car.jpg" href="/images/tabulizer/demo/car.jpg">
				<img class="example-image" alt="car.jpg" src="/images/tabulizer/demo/car.jpg">
			</a>
		</td>
	</tr>
	<tr class="tabrow ">
		<td class="tabcol">A pretty house</td>
		<td class="tabcol">
		    <a class="house.gif" data-lightbox="house.gif" href="/images/tabulizer/demo/house.gif">
			    <img class="example-image" alt="house.gif" src="/images/tabulizer/demo/house.gif">
			</a>
		</td>
	</tr>
	<tr class="tabrow ">
	    <td class="tabcol">An awesome guitar</td>
		<td class="tabcol">
		    <a class="guitar.png" data-lightbox="guitar.png" href="/images/tabulizer/demo/guitar.png">
			    <img class="example-image" alt="guitar.png" src="/images/tabulizer/demo/guitar.png">
            </a>
        </td>
    </tr>
</table>

Implementation

1. In UiPath studio, click on the "Data Scraping" button.
2. A "Extract Wizard" window will appear.


Click to Enlarge


3. Click on the "Next" button.
4. An option will come to select the data. Select the first record of the table.


Click to Enlarge


5. Another popup will appear to confirm if you want to extract the whole table. Click on "No".


Click to Enlarge


6. Another window will appear to select the second element. Click on the "Next" button.


Click to Enlarge


7. Another option will come to select the data. Select the second record of the table.


Click to Enlarge


8. Once you click on the second record, a window will appear to configure the column.


Click to Enlarge


9. Without doing any changes, click on the "Next" button.
10. A preview data window will appear. Click on the "Edit Data Definition" button.


Click to Enlarge


11. An XML editor will come. Change the XML text to

<extract>
	<row extract="1">
		<webctrl tag="tr"/>
	</row>
	<column exact='1' name='Column1' attr='text'>
		<webctrl tag='tr' />
		<webctrl tag='td' idx='1' />
	</column>
	<column exact='1' name='Column2' attr='src'>
		<webctrl tag='tr' />
		<webctrl tag='td' idx='2' />
		<webctrl tag='a' idx='1' />
		<webctrl tag='img' idx='1' />
	</column>
</extract>






Click to Enlarge


12. Click on the "Ok" button.
13. In the preview window, a list of URLs will appear.


Click to Enlarge