WEBVTT 1 00:00:00.350 --> 00:00:01.870 Hi, guys, welcome back. 2 00:00:01.870 --> 00:00:03.380 In this video, we're going to be finding 3 00:00:03.380 --> 00:00:07.080 which locators we need for our new page. 4 00:00:07.080 --> 00:00:09.750 First of all, let's load up quotes dot toscrape dot com 5 00:00:09.750 --> 00:00:13.210 slash search dot aspx and go over 6 00:00:13.210 --> 00:00:16.290 and right click on the first dropdown. 7 00:00:16.290 --> 00:00:18.620 This first dropdown is one we're gonna need 8 00:00:18.620 --> 00:00:20.850 in order to be able to interact with it. 9 00:00:20.850 --> 00:00:23.020 Notice that we don't care for the label. 10 00:00:23.020 --> 00:00:25.540 We just care about the select. 11 00:00:25.540 --> 00:00:30.520 And here we've got a select and the ID is author. 12 00:00:30.520 --> 00:00:32.850 So just keep note of that and put it in your project 13 00:00:32.850 --> 00:00:35.640 or just wait for a second and I'll do that as well. 14 00:00:35.640 --> 00:00:40.640 The tag select is another select with ID of tag. 15 00:00:40.990 --> 00:00:43.570 Once you've got IDs on your page, 16 00:00:43.570 --> 00:00:46.280 that's what you should be using to find elements 17 00:00:46.280 --> 00:00:48.590 because the ID is supposed to be unique 18 00:00:48.590 --> 00:00:50.870 so as long as the page was designed correctly, 19 00:00:50.870 --> 00:00:53.580 IDs should be unique. 20 00:00:53.580 --> 00:00:58.350 So there you have the select ID author and select ID tag. 21 00:00:58.350 --> 00:01:02.410 And finally, you have the button which is an input, 22 00:01:02.410 --> 00:01:06.780 type submit, and the name is submit underscore button. 23 00:01:06.780 --> 00:01:09.030 We can use the name in as used as selector 24 00:01:09.030 --> 00:01:12.680 so we are going to do input with name submit button 25 00:01:12.680 --> 00:01:14.674 and that's what we're going to be using to search. 26 00:01:14.674 --> 00:01:19.674 Now we also need to keep track of what the quote is 27 00:01:20.050 --> 00:01:22.030 so we that we can retrieve it after. 28 00:01:22.030 --> 00:01:26.180 And we've got a div class quote and then inside it, 29 00:01:26.180 --> 00:01:28.420 we've got a span with class of content, 30 00:01:28.420 --> 00:01:30.060 that's the content of the quote, 31 00:01:30.060 --> 00:01:33.710 a span with class of author, that's the author of the quote, 32 00:01:33.710 --> 00:01:35.890 and a span with class of tag, 33 00:01:35.890 --> 00:01:37.740 which that's the tag that we searched for. 34 00:01:37.740 --> 00:01:40.160 That's not really necessary since we already know 35 00:01:40.160 --> 00:01:41.720 what we're going to search for when we selected 36 00:01:41.720 --> 00:01:43.730 from the dropdown so really we're just going 37 00:01:43.730 --> 00:01:46.150 to grab the content and author. 38 00:01:46.150 --> 00:01:49.180 Let's go back to PyCharm and note these down. 39 00:01:49.180 --> 00:01:52.170 Back in PyCham, I'm gonna open the quote locators 40 00:01:52.170 --> 00:01:54.150 and the quotes page locators and we're going 41 00:01:54.150 --> 00:01:56.210 to add a couple of things here. 42 00:01:56.210 --> 00:01:59.290 The author dropdown is going to be a select 43 00:01:59.290 --> 00:02:02.660 with tag of author, the tag dropdown is going to be 44 00:02:02.660 --> 00:02:07.660 a select with ID of tag, and the search button 45 00:02:07.720 --> 00:02:10.720 is going to be an input which I'm actually going 46 00:02:10.720 --> 00:02:12.010 to use single quote and input 47 00:02:12.010 --> 00:02:15.730 with name equal submit underscore button. 48 00:02:15.730 --> 00:02:19.100 This is how you can search by attributes in CSS by the way, 49 00:02:19.100 --> 00:02:21.240 with these square brackets and inside you can see 50 00:02:21.240 --> 00:02:25.510 the attribute name and then equal and the attribute value 51 00:02:25.510 --> 00:02:28.210 so if you wanted to search by value for example, 52 00:02:28.210 --> 00:02:30.890 it would be value equal whatever. 53 00:02:30.890 --> 00:02:32.340 But if you were searching by name, 54 00:02:32.340 --> 00:02:34.954 so it is name equal whatever. 55 00:02:34.954 --> 00:02:38.130 Then in the quote locators, we're going to go here 56 00:02:38.130 --> 00:02:40.440 and we're just going to make a couple of small changes 57 00:02:40.440 --> 00:02:44.733 because the content locator is now span dot content, 58 00:02:44.733 --> 00:02:49.300 the author locator is span dot author, 59 00:02:49.300 --> 00:02:53.133 and the tag locator is span dot tag. 60 00:02:54.070 --> 00:02:56.250 Okay, we're not going to use this one so, yeah, 61 00:02:56.250 --> 00:02:58.280 we'll just put it there anyway just in case 62 00:02:58.280 --> 00:03:00.920 but for now, this is all we need in order 63 00:03:00.920 --> 00:03:04.519 to access our new elements in the new page. 64 00:03:04.519 --> 00:03:06.620 Another thing that you may wanna do is of course 65 00:03:06.620 --> 00:03:11.130 go to app dot py and change this to slash search dot aspx. 66 00:03:11.130 --> 00:03:12.994 If you run this now, you'll see 67 00:03:12.994 --> 00:03:16.630 that nothing very interesting happens. 68 00:03:16.630 --> 00:03:19.800 You load the page and then nothing gets printed out 69 00:03:19.800 --> 00:03:22.978 because our locators are now for this new page 70 00:03:22.978 --> 00:03:25.760 but our code here, like getting the quotes and stuff 71 00:03:25.760 --> 00:03:26.810 is for the old page. 72 00:03:26.810 --> 00:03:28.440 But you can see that there are no quotes 73 00:03:28.440 --> 00:03:31.700 in this page to be shown so nothing happens. 74 00:03:31.700 --> 00:03:34.340 We're gonna have to change it so that we actually interact 75 00:03:34.340 --> 00:03:36.700 with a new page here instead of just treating it 76 00:03:36.700 --> 00:03:38.040 like the old page. 77 00:03:38.040 --> 00:03:39.770 Let's do that in the next video. 78 00:03:39.770 --> 00:03:40.763 I'll see you there.