WEBVTT 0 00:00.330 --> 00:01.470 In the last lesson, 1 00:01.470 --> 00:04.200 we looked at how we can find elements 2 00:04.200 --> 00:07.140 using Selenium on a webpage. 3 00:07.140 --> 00:11.490 In this lesson, I want to focus more on how to interact 4 00:11.490 --> 00:13.470 with those elements that you found. 5 00:13.470 --> 00:17.610 For example, typing into an input field 6 00:17.610 --> 00:19.653 or clicking on a button. 7 00:20.880 --> 00:22.410 The first thing I want to show you 8 00:22.410 --> 00:25.620 is how to click on something. 9 00:25.620 --> 00:29.460 In this case, we've already gotten hold of an anchor tag, 10 00:29.460 --> 00:32.640 which is inside a div called articlecount. 11 00:32.640 --> 00:35.190 It's basically this anchor tag. 12 00:35.190 --> 00:38.400 And if I want to click on it, not using my mouse, 13 00:38.400 --> 00:41.550 but using Selenium, all I have to do 14 00:41.550 --> 00:45.720 is to get hold of the element, which is this article_count, 15 00:45.720 --> 00:48.720 and then call the .click method on it. 16 00:48.720 --> 00:50.640 It's as simple as that. 17 00:50.640 --> 00:53.310 And once I hit Run, you'll see that my cursor 18 00:53.310 --> 00:55.050 is nowhere near the link, 19 00:55.050 --> 00:57.030 but it actually clicked through 20 00:57.030 --> 01:01.200 and it got to the statistics page from that link. 21 01:01.200 --> 01:03.810 So it's basically equivalent of me doing this, 22 01:03.810 --> 01:06.243 but it was done automatically. 23 01:07.170 --> 01:10.410 This was one way that we could have gotten hold of a link 24 01:10.410 --> 01:12.360 and then clicked on it. 25 01:12.360 --> 01:14.670 Now because this is such a common requirement 26 01:14.670 --> 01:17.010 to click on a link on a webpage, 27 01:17.010 --> 01:20.370 Selenium actually has a specific find method 28 01:20.370 --> 01:22.680 that makes this really easy. 29 01:22.680 --> 01:25.290 For example, if we wanted to click on this link 30 01:25.290 --> 01:27.660 that says Content portals, 31 01:27.660 --> 01:31.020 where it lists all the different Wikipedia portals, 32 01:31.020 --> 01:33.900 basically subsections of Wikipedia, 33 01:33.900 --> 01:35.610 well, one of the things that we could do 34 01:35.610 --> 01:38.640 is simply get hold of this link text, 35 01:38.640 --> 01:41.040 which says Content portals, 36 01:41.040 --> 01:44.220 and then we can create an object using our driver 37 01:44.220 --> 01:47.517 by tapping into find.element(By.LINK_TEXT...) 38 01:48.553 --> 01:51.003 And all we have to put in there is the link text. 39 01:53.640 --> 01:57.060 So now I can say all_portals.click(). 40 01:57.060 --> 02:00.690 And if we go ahead and comment out this part, 41 02:00.690 --> 02:03.360 then you can see it's going to open up our webpage 42 02:03.360 --> 02:05.490 and it's going to click on that all_portals 43 02:05.490 --> 02:07.320 taking us to this page. 44 02:07.320 --> 02:11.130 So this is a find method that's pretty specific to links 45 02:11.130 --> 02:14.820 where we just find it by the text 46 02:14.820 --> 02:17.910 that is in between the anchor tag. 47 02:17.910 --> 02:20.700 So for example, when I inspect on that portals, 48 02:20.700 --> 02:23.010 you can see that this is the anchor tag 49 02:23.010 --> 02:25.980 and the link text is the part between the opening 50 02:25.980 --> 02:27.570 and closing tags. 51 02:27.570 --> 02:31.170 So it's now searching by that text, which is a common need 52 02:31.170 --> 02:34.650 that you might have when you're going onto a website. 53 02:34.650 --> 02:36.750 Now that we've seen how we can click on links 54 02:36.750 --> 02:39.900 once we've identified them, what about typing? 55 02:39.900 --> 02:43.180 Let's say we wanted to search for Python 56 02:44.250 --> 02:46.680 in this search bar. 57 02:46.680 --> 02:48.150 How might we do that? 58 02:48.150 --> 02:52.440 Well, first let's go ahead and get hold of the search bar. 59 02:52.440 --> 02:54.243 So I'm going to inspect on that, 60 02:55.290 --> 02:57.990 and it takes me to this input element. 61 02:57.990 --> 03:01.440 And the thing that we can identify it by is its name, 62 03:01.440 --> 03:03.093 which is equal to search. 63 03:06.330 --> 03:10.170 So I can use our method, which is find.element By.NAME 64 03:10.170 --> 03:13.110 and then pass in "search" as the name 65 03:13.110 --> 03:15.540 of the element I want to get hold of. 66 03:15.540 --> 03:18.300 Now, once I've gotten hold of that element, 67 03:18.300 --> 03:22.110 then I can use a method called, send_keys(). 68 03:22.110 --> 03:24.930 And this is going to be the keys from the keyboard 69 03:24.930 --> 03:28.410 that you want to send to this particular element. 70 03:28.410 --> 03:30.840 So let's say I wanted to type Python in there. 71 03:30.840 --> 03:35.130 Well, all I have to do is type send_keys("Python"), 72 03:35.130 --> 03:37.800 and now when I hit Run, you can see 73 03:37.800 --> 03:40.500 that it's going to automatically go over there 74 03:40.500 --> 03:42.630 and type in the word Python. 75 03:42.630 --> 03:45.210 My hands are completely off the keyboard 76 03:45.210 --> 03:48.060 and my cursor is nowhere near the search bar, 77 03:48.060 --> 03:51.000 so that was all done automatically. 78 03:51.000 --> 03:52.980 Now, once we've typed in Python, 79 03:52.980 --> 03:56.250 the next thing we want to do is hit the Return key, right, 80 03:56.250 --> 03:58.110 or the Enter key. 81 03:58.110 --> 04:01.290 Now, when we want to send a key that's not a letter 82 04:01.290 --> 04:04.320 or one of the numbers or symbols, 83 04:04.320 --> 04:07.383 then we actually have to do a separate import. 84 04:08.790 --> 04:10.410 From the Selenium package, 85 04:10.410 --> 04:12.540 inside the webdriver folder, 86 04:12.540 --> 04:14.730 there's a folder called, common, 87 04:14.730 --> 04:17.820 and inside there there's something called keys. 88 04:17.820 --> 04:22.050 This keys contains a class called Keys, 89 04:22.050 --> 04:25.140 and that contains a bunch of constants. 90 04:25.140 --> 04:28.620 What we can do is we can say search.send_keys, 91 04:28.620 --> 04:30.330 and the key that we're going to send 92 04:30.330 --> 04:32.580 comes from this Keys class, 93 04:32.580 --> 04:34.470 and it's one of the constants in there, 94 04:34.470 --> 04:36.930 which is called ENTER. 95 04:36.930 --> 04:38.910 This is basically the Return key, 96 04:38.910 --> 04:43.117 but you can see there's also other ones like SHIFT or TAB. 97 04:44.190 --> 04:46.410 Basically any key that you have on the keyboard 98 04:46.410 --> 04:49.560 can be replicated by the Keys class. 99 04:49.560 --> 04:52.170 Effectively, what we're doing here is we're finding 100 04:52.170 --> 04:54.990 that search bar, typing in Python, 101 04:54.990 --> 04:56.940 and then hitting the Enter key. 102 04:56.940 --> 04:59.433 So let's run this and see it in action. 103 05:02.130 --> 05:05.760 And that takes us to the search results. 104 05:05.760 --> 05:09.930 So now that we've seen how we can click on buttons, 105 05:09.930 --> 05:13.560 once we've located something that is clickable, 106 05:13.560 --> 05:15.780 like a button or an anchor tag. 107 05:15.780 --> 05:20.520 We've seen how we can type something into a field 108 05:20.520 --> 05:22.500 using, send_keys. 109 05:22.500 --> 05:25.050 And finally, we've seen how we can import 110 05:25.050 --> 05:26.790 this class of Keys, 111 05:26.790 --> 05:29.520 which contains a whole bunch of constants 112 05:29.520 --> 05:31.830 that represents the key codes for a lot 113 05:31.830 --> 05:36.063 of the common keys like ENTER, SHIFT, CONTROL, et cetera. 114 05:37.050 --> 05:39.870 Now, I have a challenge for you. 115 05:39.870 --> 05:43.680 I want you to try and see if you can figure out yourself 116 05:43.680 --> 05:48.210 how to use Selenium to automatically insert your name, 117 05:48.210 --> 05:50.550 your Last Name, and Email address, 118 05:50.550 --> 05:52.440 and then hit the Sign Up button 119 05:52.440 --> 05:54.600 in order to fill out this form. 120 05:54.600 --> 05:57.520 Now, if you're successful, it should take you 121 06:00.780 --> 06:03.090 to this Success page. 122 06:03.090 --> 06:05.070 Now don't worry if you actually type in 123 06:05.070 --> 06:06.630 your real email address or not. 124 06:06.630 --> 06:09.180 This is a webpage that we created as a part 125 06:09.180 --> 06:11.490 of the Complete Web Development Course. 126 06:11.490 --> 06:13.290 It's another course that I do, 127 06:13.290 --> 06:16.800 which goes into detail on web technologies like JavaScript, 128 06:16.800 --> 06:19.650 Node, React, and this is a site that we built 129 06:19.650 --> 06:20.970 in that course. 130 06:20.970 --> 06:23.370 Now, the reason why I'm taking you to this page 131 06:23.370 --> 06:27.210 is because I don't want you to go onto a random webpage, 132 06:27.210 --> 06:28.650 like a real website 133 06:28.650 --> 06:31.740 where they're actually collecting valid data. 134 06:31.740 --> 06:34.530 If we're doing our practices and our exercises 135 06:34.530 --> 06:35.490 on a real website, 136 06:35.490 --> 06:37.920 we'll end up giving them a lot of bot traffic, 137 06:37.920 --> 06:39.930 and it's not great for the website. 138 06:39.930 --> 06:43.260 This is why I'm getting you guys to use my own website, 139 06:43.260 --> 06:45.660 which is set up for testing anyways. 140 06:45.660 --> 06:48.810 So the link to the page is in the Course Resources 141 06:48.810 --> 06:51.570 or you could type it in as you can see here. 142 06:51.570 --> 06:54.000 Now, as I mentioned, this is not a sign up 143 06:54.000 --> 06:57.840 to our actual newsletter, which lives on this page, 144 06:57.840 --> 07:01.440 where every month I personally write a letter 145 07:01.440 --> 07:04.770 to you updating you on what we've been up to, 146 07:04.770 --> 07:06.944 what I've been up to, 147 07:06.944 --> 07:09.300 and some articles that I've come across on the internet 148 07:09.300 --> 07:11.340 that I've found to be really interesting 149 07:11.340 --> 07:14.880 in terms of programming, design or startup culture. 150 07:14.880 --> 07:16.830 If you actually want to sign up to the newsletter, 151 07:16.830 --> 07:20.220 then head over to this link and put your email address here. 152 07:20.220 --> 07:23.550 But in order to test your skills on Selenium, 153 07:23.550 --> 07:26.010 we want you to head over to this link 154 07:26.010 --> 07:28.740 and see if you can fill out this form automatically 155 07:28.740 --> 07:30.210 using what you've learned, 156 07:30.210 --> 07:33.480 and then get your Selenium to click Sign Up. 157 07:33.480 --> 07:34.530 Pause the video now 158 07:34.530 --> 07:36.723 and see if you can complete this challenge. 159 07:39.960 --> 07:43.390 So the first thing we need to do is to copy the URL 160 07:44.460 --> 07:46.470 and then back over here, 161 07:46.470 --> 07:51.470 and I'm going to change my driver to go to this new URL. 162 07:51.870 --> 07:54.870 Now, once I've gotten to the new URL, I want to go ahead 163 07:54.870 --> 07:58.800 and try to find and identify each of these fields. 164 07:58.800 --> 08:01.020 So let's click on Inspect. 165 08:01.020 --> 08:04.923 And you can see that this first field has a name of fName. 166 08:05.910 --> 08:08.610 The second one has a name of lName, 167 08:08.610 --> 08:11.730 and the final one has a name of email. 168 08:11.730 --> 08:15.690 So let's identify those using our driver.find, 169 08:17.910 --> 08:20.760 and we're going to use the find.element By.NAME, 170 08:20.760 --> 08:25.760 passing in fName, and then it was lName for last name, 171 08:27.210 --> 08:28.653 and then it was email. 172 08:30.720 --> 08:35.133 So this is going to be our first_name, last_name, and email. 173 08:39.480 --> 08:41.670 The next step is to actually fill it in. 174 08:41.670 --> 08:44.100 So we're going to say first_name.send_keys, 175 08:44.100 --> 08:47.340 and then I'll pass in my first name, 176 08:47.340 --> 08:50.040 and then it's going to be last_name.send_keys, 177 08:50.040 --> 08:52.203 and then I'll pass in my last name. 178 08:53.430 --> 08:55.950 And finally we've got our email, 179 08:55.950 --> 08:58.863 and I'll just pass in a dummy email. 180 09:01.260 --> 09:04.230 So now I'm going to try and find this button 181 09:04.230 --> 09:05.880 by inspecting on it 182 09:05.880 --> 09:09.900 and seeing how I can identify it using my code. 183 09:09.900 --> 09:14.640 So it's a button with all of these classes and a type, 184 09:14.640 --> 09:16.620 but no ID or name. 185 09:16.620 --> 09:21.150 Given that this is the only button element inside this form, 186 09:21.150 --> 09:22.350 then I'm going to go ahead 187 09:22.350 --> 09:25.143 and identify it by using CSS_SELECTOR. 188 09:29.670 --> 09:33.513 So it's inside the form and it's a button element. 189 09:34.800 --> 09:36.600 And finally, once I've found it, 190 09:36.600 --> 09:38.493 I'm simply going to click on it. 191 09:39.750 --> 09:41.850 So our script is going to go in order. 192 09:41.850 --> 09:43.770 So it's first going to load up the page, 193 09:43.770 --> 09:47.250 type in all of these things, and then finally click on it. 194 09:47.250 --> 09:49.593 So let's hit Run and see if that worked. 195 09:51.990 --> 09:54.000 That was lightning fast, 196 09:54.000 --> 09:56.370 because obviously it's not me typing, 197 09:56.370 --> 09:58.080 and it clicked on the button 198 09:58.080 --> 10:01.110 and it took us to the Success page. 199 10:01.110 --> 10:03.120 How did you get on with that? 200 10:03.120 --> 10:06.990 So now we've seen how to use Selenium to find elements 201 10:06.990 --> 10:11.130 to interact with them by clicking and typing. 202 10:11.130 --> 10:15.390 And also we saw how we can import the keys constant 203 10:15.390 --> 10:19.053 to interact with the website with any key on our keyboard. 204 10:19.950 --> 10:22.080 There's quite a few methods we've gone through. 205 10:22.080 --> 10:24.060 It might be worth taking some notes 206 10:24.060 --> 10:27.300 and having a quick review of how we've managed 207 10:27.300 --> 10:29.940 to do all of these things using Selenium, 208 10:29.940 --> 10:31.260 because in the next lesson 209 10:31.260 --> 10:33.300 we've got the final project coming up 210 10:33.300 --> 10:37.020 and it's going to be all up to you to try and solve it. 211 10:37.020 --> 10:38.880 So for all of that and more, 212 10:38.880 --> 10:40.480 I'll see you on the next lesson.