WEBVTT 00:00.450 --> 00:07.320 Okay, so now on to creating our selector so we can select data from our table and just get the text 00:07.320 --> 00:08.490 contents out. 00:08.520 --> 00:12.510 So first you need to open up Chrome tools inside of Chrome browser. 00:12.510 --> 00:19.880 So just press F12 to open up Chrome tools and you can see all of these tabs with different tools. 00:19.890 --> 00:26.280 In this case, we need to press the select an element to inspect it, press that now it turns blue, 00:26.280 --> 00:28.860 and then you can select elements on a website. 00:29.040 --> 00:32.040 Let's select the first table data cell here. 00:32.040 --> 00:39.930 I click on that and then I get shown the corresponding HTML in the page where this element is residing. 00:40.550 --> 00:46.580 In this case, we need to right click on it since we want this data and we can right click and select 00:46.580 --> 00:49.610 copy and then select copy selector. 00:51.370 --> 00:57.220 Then it's going to the console tab and let's paste in and see what kind of selector we got. 00:57.520 --> 01:05.080 So here we can see we have a body and then we select the child table of this body and a child element. 01:05.290 --> 01:13.270 Body and a child element, table row, child element, table data cell and so on and so on. 01:13.270 --> 01:19.750 And notice we also have the end child, which which means that we only select the second child of the 01:19.750 --> 01:20.830 table rows. 01:21.780 --> 01:26.460 And the first child here for the table, data row and table data cells. 01:26.970 --> 01:29.590 Okay, so what does it actually print out? 01:29.620 --> 01:31.020 How can we use this? 01:31.020 --> 01:32.190 Let's try and see. 01:32.340 --> 01:40.590 So to select these this element, we could also use pure JavaScript, but to make it easier for ourselves, 01:40.590 --> 01:44.160 we're going to use jQuery, which is a JavaScript library. 01:44.910 --> 01:52.110 Now some pages already have jQuery injected or enabled in them, so you can just type up dollar sign 01:52.110 --> 01:59.010 and then have a quote and then paste in your selector and then end quotes and then end with a parenthesis 01:59.010 --> 02:04.130 and then say dot text and then call it with the parenthesis. 02:04.140 --> 02:10.020 But here you can see it says dollar sign, dot, dot, dot, dot Text is not a function, which means 02:10.020 --> 02:12.930 that jQuery is not enabled on this side. 02:13.050 --> 02:20.010 But there is a fix to that, which is that we can just inject jQuery into the page as we has it, as 02:20.010 --> 02:22.540 we have it open inside of Chrome. 02:23.330 --> 02:26.990 So I have a little plugin from the Chrome web store. 02:26.990 --> 02:29.200 It's called jQuery Inject. 02:29.210 --> 02:35.900 Sometimes you can also find code snippets that you can copy in the clipboard and paste inside console. 02:36.380 --> 02:42.860 I like to use this extension because I can just click on the button up here to enable jQuery if the 02:42.860 --> 02:44.630 page doesn't have jQuery. 02:45.810 --> 02:53.340 So I click up here for the plugin that I downloaded here, this one and now it says something about. 02:54.650 --> 02:55.840 Cookies, blah, blah, blah. 02:55.850 --> 02:56.480 It doesn't matter. 02:56.480 --> 02:57.650 It's just a warning. 02:57.740 --> 03:00.950 But now we can try and type in the same command again. 03:00.950 --> 03:07.130 And now we see the actual text content of the first data cell in the table. 03:09.220 --> 03:10.390 So far, so good. 03:10.420 --> 03:16.030 But of course, we need to scrape the data from all the table cells in an automatic way. 03:16.030 --> 03:20.020 So, I mean, we can't just type in TD. 03:20.350 --> 03:26.140 Child two Then we will get the contact name here and so on and so on. 03:26.470 --> 03:28.840 That's not a very automated way to do it. 03:28.840 --> 03:33.220 But yeah, I guess if you have an intern then he can do that. 03:33.220 --> 03:37.660 But let's find a smarter way to do this and get all of the table data.