1 00:00:00,330 --> 00:00:01,470 Instructor: In the last lesson, 2 00:00:01,470 --> 00:00:04,200 we looked at how we can find elements 3 00:00:04,200 --> 00:00:07,140 using Selenium on a webpage. 4 00:00:07,140 --> 00:00:11,490 In this lesson, I wanna focus more on how to interact 5 00:00:11,490 --> 00:00:13,470 with those elements that you found. 6 00:00:13,470 --> 00:00:17,610 For example, typing into a input field 7 00:00:17,610 --> 00:00:19,653 or clicking on a button. 8 00:00:20,880 --> 00:00:22,410 The first thing I wanna show you 9 00:00:22,410 --> 00:00:25,620 is how to click on something. 10 00:00:25,620 --> 00:00:29,460 In this case, we've already gotten hold of an anchor tag, 11 00:00:29,460 --> 00:00:32,640 which is inside a diff called Article count. 12 00:00:32,640 --> 00:00:35,190 It's basically this anchor tag. 13 00:00:35,190 --> 00:00:38,400 And if I want to click on it, not using my mouse, 14 00:00:38,400 --> 00:00:41,550 but using Selenium, all I have to do 15 00:00:41,550 --> 00:00:45,720 is to get hold of the element, which is this article_count, 16 00:00:45,720 --> 00:00:48,720 and then call the .click method on it. 17 00:00:48,720 --> 00:00:50,640 It's as simple as that. 18 00:00:50,640 --> 00:00:53,310 And once I hit Run, you'll see that my cursor 19 00:00:53,310 --> 00:00:55,050 is nowhere near the link, 20 00:00:55,050 --> 00:00:57,030 but it actually clicked through 21 00:00:57,030 --> 00:01:01,200 and it got to the statistics page from that link. 22 00:01:01,200 --> 00:01:03,810 So it's basically equivalent of me doing this, 23 00:01:03,810 --> 00:01:06,243 but it was done automatically. 24 00:01:07,170 --> 00:01:10,410 This was one way that we could have gotten hold of a link 25 00:01:10,410 --> 00:01:12,360 and then clicked on it. 26 00:01:12,360 --> 00:01:14,670 Now because this is such a common requirement 27 00:01:14,670 --> 00:01:17,010 to click on a link on a webpage, 28 00:01:17,010 --> 00:01:20,370 Selenium actually has a specific find method 29 00:01:20,370 --> 00:01:22,680 that makes this really easy. 30 00:01:22,680 --> 00:01:25,290 For example, if we wanted to click on this link 31 00:01:25,290 --> 00:01:27,660 that says Content portals, 32 00:01:27,660 --> 00:01:31,020 where it lists all the different Wikipedia portals, 33 00:01:31,020 --> 00:01:33,900 basically subsections of Wikipedia, 34 00:01:33,900 --> 00:01:35,610 well, one of the things that we could do 35 00:01:35,610 --> 00:01:38,640 is simply get hold of this link text, 36 00:01:38,640 --> 00:01:41,040 which says Content portals, 37 00:01:41,040 --> 00:01:44,220 And then we can create an object using our driver 38 00:01:44,220 --> 00:01:47,517 by tapping into find.element By.LINK_TEXT. 39 00:01:48,553 --> 00:01:51,003 And all we have to put in there is the link text. 40 00:01:53,640 --> 00:01:57,060 So now I can say all_portals.click. 41 00:01:57,060 --> 00:02:00,690 And if we go ahead and comment out this part, 42 00:02:00,690 --> 00:02:03,360 then you can see it's gonna open up our webpage 43 00:02:03,360 --> 00:02:05,490 and it's gonna click on that all portals 44 00:02:05,490 --> 00:02:07,320 taking us to this page. 45 00:02:07,320 --> 00:02:11,130 So this is a find method that's pretty specific to links 46 00:02:11,130 --> 00:02:14,820 where we just find it by the text 47 00:02:14,820 --> 00:02:17,910 that is in between the anchor tag. 48 00:02:17,910 --> 00:02:20,700 So for example, when I inspect on that portal, 49 00:02:20,700 --> 00:02:23,010 you can see that this is the anchor tag 50 00:02:23,010 --> 00:02:25,980 and the link text is the part between the opening 51 00:02:25,980 --> 00:02:27,570 and closing tags. 52 00:02:27,570 --> 00:02:31,170 So it's now searching by that text, which is a common need 53 00:02:31,170 --> 00:02:34,650 that you might have when you're going onto a website. 54 00:02:34,650 --> 00:02:36,750 Now that we've seen how we can click on links 55 00:02:36,750 --> 00:02:39,900 once we've identified them, what about typing? 56 00:02:39,900 --> 00:02:43,180 Let's say we wanted to search for Python 57 00:02:44,250 --> 00:02:46,680 in this search bar. 58 00:02:46,680 --> 00:02:48,150 How might we do that? 59 00:02:48,150 --> 00:02:52,440 Well, first let's go ahead and get hold of the search bar. 60 00:02:52,440 --> 00:02:54,243 So I'm gonna inspect on that, 61 00:02:55,290 --> 00:02:57,990 and it takes me to this input element. 62 00:02:57,990 --> 00:03:01,440 And the thing that we can identify it by is its name, 63 00:03:01,440 --> 00:03:03,093 which is equal to search. 64 00:03:06,330 --> 00:03:10,170 So I can use our method, which is find.element By.NAME 65 00:03:10,170 --> 00:03:13,110 and then pass in search as the name 66 00:03:13,110 --> 00:03:15,540 of the element I wanna get hold of. 67 00:03:15,540 --> 00:03:18,300 Now, once I've gotten hold of that element, 68 00:03:18,300 --> 00:03:22,110 then I can use a method called send_keys. 69 00:03:22,110 --> 00:03:24,930 And this is gonna be the keys from the keyboard 70 00:03:24,930 --> 00:03:28,410 that you wanna send to this particular element. 71 00:03:28,410 --> 00:03:30,840 So let's say I wanted to type Python in there. 72 00:03:30,840 --> 00:03:35,130 Well, all I have to do is type send_keys Python, 73 00:03:35,130 --> 00:03:37,800 and now when I hit Run, you can see 74 00:03:37,800 --> 00:03:40,500 that it's going to automatically go over there 75 00:03:40,500 --> 00:03:42,630 and type in the word Python. 76 00:03:42,630 --> 00:03:45,210 My hands are completely off the keyboard 77 00:03:45,210 --> 00:03:48,060 and my cursor is nowhere near the search bar, 78 00:03:48,060 --> 00:03:51,000 so that was all done automatically. 79 00:03:51,000 --> 00:03:52,980 Now, once we've typed in Python, 80 00:03:52,980 --> 00:03:56,250 the next thing we wanna do is hit the Return key, right, 81 00:03:56,250 --> 00:03:58,110 or the Enter key. 82 00:03:58,110 --> 00:04:01,290 Now, when we wanna send a key that's not a letter 83 00:04:01,290 --> 00:04:04,320 or one of the numbers or symbols, 84 00:04:04,320 --> 00:04:07,383 then we actually have to do a separate input. 85 00:04:08,790 --> 00:04:10,410 From the Selenium package, 86 00:04:10,410 --> 00:04:12,540 inside the Web Driver folder, 87 00:04:12,540 --> 00:04:14,730 there's a folder called Common, 88 00:04:14,730 --> 00:04:17,820 and inside there there's something called keys. 89 00:04:17,820 --> 00:04:22,050 This keys contains a class called keys, 90 00:04:22,050 --> 00:04:25,140 and that contains a bunch of constants. 91 00:04:25,140 --> 00:04:28,620 What we can do is we can say search.send_keys, 92 00:04:28,620 --> 00:04:30,330 and the key that we're gonna send 93 00:04:30,330 --> 00:04:32,580 comes from this keys class, 94 00:04:32,580 --> 00:04:34,470 and it's one of the constants in there, 95 00:04:34,470 --> 00:04:36,930 which is called ENTER. 96 00:04:36,930 --> 00:04:38,910 This is basically the Return key, 97 00:04:38,910 --> 00:04:43,117 but you can see there's also other ones like Shift or Tab. 98 00:04:44,190 --> 00:04:46,410 Basically any key that you have on the keyboard 99 00:04:46,410 --> 00:04:49,560 can be replicated by the keys class. 100 00:04:49,560 --> 00:04:52,170 Effectively, what we're doing here is we're finding 101 00:04:52,170 --> 00:04:54,990 that search bar, typing in Python, 102 00:04:54,990 --> 00:04:56,940 and then hitting the Enter key. 103 00:04:56,940 --> 00:04:59,433 So let's run this and see it in action. 104 00:05:02,130 --> 00:05:05,760 And that takes us to the search results. 105 00:05:05,760 --> 00:05:09,930 So now we've seen how we can click on buttons, 106 00:05:09,930 --> 00:05:13,560 once we've located something that is clickable, 107 00:05:13,560 --> 00:05:15,780 like a button or an anchor tag. 108 00:05:15,780 --> 00:05:20,520 We've seen how we can type something into a field 109 00:05:20,520 --> 00:05:22,500 using Send Keys. 110 00:05:22,500 --> 00:05:25,050 And finally, we've seen how we can import 111 00:05:25,050 --> 00:05:26,790 this class of keys, 112 00:05:26,790 --> 00:05:29,520 which contains a whole bunch of constants 113 00:05:29,520 --> 00:05:31,830 that represents the key code for a lot 114 00:05:31,830 --> 00:05:36,063 of the common keys like Enter, Shift, Control, et cetera. 115 00:05:37,050 --> 00:05:39,870 Now, I have a challenge for you. 116 00:05:39,870 --> 00:05:43,680 I want you to try and see if you can figure out yourself 117 00:05:43,680 --> 00:05:48,210 how to use Selenium to automatically insert your name, 118 00:05:48,210 --> 00:05:50,550 your last name, and email address, 119 00:05:50,550 --> 00:05:52,440 and then hit the Sign Up button 120 00:05:52,440 --> 00:05:54,600 in order to fill out this form. 121 00:05:54,600 --> 00:05:57,520 Now, if you're successful, it should take you 122 00:06:00,780 --> 00:06:03,090 to this Success page. 123 00:06:03,090 --> 00:06:05,070 Now don't worry if you actually type in 124 00:06:05,070 --> 00:06:06,630 your real email address or not. 125 00:06:06,630 --> 00:06:09,180 This is a webpage that we created as a part 126 00:06:09,180 --> 00:06:11,490 of the Complete Web Development Course. 127 00:06:11,490 --> 00:06:13,290 It's another course that I do, 128 00:06:13,290 --> 00:06:16,800 which goes into detail on web technologies like JavaScript, 129 00:06:16,800 --> 00:06:19,650 Node, React, and this is a site that we built 130 00:06:19,650 --> 00:06:20,970 in that course. 131 00:06:20,970 --> 00:06:23,370 Now, the reason why I'm taking you to this page 132 00:06:23,370 --> 00:06:27,210 is because I don't want you to go onto a random webpage, 133 00:06:27,210 --> 00:06:28,650 like a real website 134 00:06:28,650 --> 00:06:31,740 where they're actually collecting valid data. 135 00:06:31,740 --> 00:06:34,530 If we're doing our practices and our exercises 136 00:06:34,530 --> 00:06:35,490 on a real website, 137 00:06:35,490 --> 00:06:37,920 we'll end up giving them a lot of bot traffic, 138 00:06:37,920 --> 00:06:39,930 and it's not great for the website. 139 00:06:39,930 --> 00:06:43,260 This is why I'm getting you guys to use my own website, 140 00:06:43,260 --> 00:06:45,660 which is set up for testing anyways. 141 00:06:45,660 --> 00:06:48,810 The link to the page is in the course resources 142 00:06:48,810 --> 00:06:51,570 or you could type it in as you can see here. 143 00:06:51,570 --> 00:06:54,000 Now, as I mentioned, this is not a sign up 144 00:06:54,000 --> 00:06:57,840 to our actual newsletter, which lives on this page, 145 00:06:57,840 --> 00:07:01,440 where every month I personally write a letter 146 00:07:01,440 --> 00:07:04,770 to you updating you on what we've been up to, 147 00:07:04,770 --> 00:07:06,944 what I've been up to, 148 00:07:06,944 --> 00:07:09,300 and some articles that I've come across on the internet 149 00:07:09,300 --> 00:07:11,340 that I've found to be really interesting 150 00:07:11,340 --> 00:07:14,880 in terms of programming, design or startup culture. 151 00:07:14,880 --> 00:07:16,830 If you actually wanna sign up to the newsletter, 152 00:07:16,830 --> 00:07:20,220 then head over to this link and put your email address here. 153 00:07:20,220 --> 00:07:23,550 But in order to test your skills on Selenium, 154 00:07:23,550 --> 00:07:26,010 we want you to head over to this link 155 00:07:26,010 --> 00:07:28,740 and see if you can fill out this form automatically 156 00:07:28,740 --> 00:07:30,210 using what you've learned, 157 00:07:30,210 --> 00:07:33,480 and then get your Selenium to click Sign Up. 158 00:07:33,480 --> 00:07:34,530 Pause the video now 159 00:07:34,530 --> 00:07:36,723 and see if you can complete this challenge. 160 00:07:39,960 --> 00:07:43,390 So the first thing we need to do is to copy the URL 161 00:07:44,460 --> 00:07:46,470 and then back over here, 162 00:07:46,470 --> 00:07:51,470 and I'm gonna change my driver to go to this new URL. 163 00:07:51,870 --> 00:07:54,870 Now, once I've gotten to the new URL, I wanna go ahead 164 00:07:54,870 --> 00:07:58,800 and try to find and identify each of these fields. 165 00:07:58,800 --> 00:08:01,020 So let's click on Inspect. 166 00:08:01,020 --> 00:08:04,923 And you can see that this first field has a name of fName. 167 00:08:05,910 --> 00:08:08,610 The second one has a name of lName, 168 00:08:08,610 --> 00:08:11,730 and the final one has a name of email. 169 00:08:11,730 --> 00:08:15,690 So let's identify those using our driver.find, 170 00:08:17,910 --> 00:08:20,760 and we're gonna use the find.element By.NAME, 171 00:08:20,760 --> 00:08:25,760 passing in fName, and then it was lName for last name, 172 00:08:27,210 --> 00:08:28,653 and then it was email. 173 00:08:30,720 --> 00:08:35,133 So this is going to be our first name, last name, and email. 174 00:08:39,480 --> 00:08:41,669 The next step is to actually fill it in. 175 00:08:41,669 --> 00:08:44,100 So we're gonna say first_name.send_keys, 176 00:08:44,100 --> 00:08:47,340 and then I'll pass in my first name, 177 00:08:47,340 --> 00:08:50,040 and then it's gonna be last_name.send_keys, 178 00:08:50,040 --> 00:08:52,203 and then I'll pass in my last name. 179 00:08:53,430 --> 00:08:55,950 And finally we've got our email, 180 00:08:55,950 --> 00:08:58,863 and I'll just pass in a dummy email. 181 00:09:01,260 --> 00:09:04,230 So now I'm gonna try and find this button 182 00:09:04,230 --> 00:09:05,880 by inspecting on it 183 00:09:05,880 --> 00:09:09,900 and seeing how I can identify it using my code. 184 00:09:09,900 --> 00:09:14,640 So it's a button with all of these classes and a type, 185 00:09:14,640 --> 00:09:16,620 but no ID or name. 186 00:09:16,620 --> 00:09:21,150 Given that this is the only button element inside this form, 187 00:09:21,150 --> 00:09:22,350 then I'm gonna go ahead 188 00:09:22,350 --> 00:09:25,143 and identify it by using CSS_SELECTOR. 189 00:09:29,670 --> 00:09:33,513 So it's inside the form and it's a button element. 190 00:09:34,800 --> 00:09:36,600 And finally, once I've found it, 191 00:09:36,600 --> 00:09:38,493 I'm simply gonna click on it. 192 00:09:39,750 --> 00:09:41,850 So our script is gonna go in order. 193 00:09:41,850 --> 00:09:43,770 So it's first gonna load up the page, 194 00:09:43,770 --> 00:09:47,250 type in all of these things, and then finally click on it. 195 00:09:47,250 --> 00:09:49,593 So let's hit run and see if that worked. 196 00:09:51,990 --> 00:09:54,000 That was lightning fast, 197 00:09:54,000 --> 00:09:56,370 because obviously it's not me typing, 198 00:09:56,370 --> 00:09:58,080 and it clicked on the button 199 00:09:58,080 --> 00:10:01,110 and it took us to the Success page. 200 00:10:01,110 --> 00:10:03,120 How did you get on with that? 201 00:10:03,120 --> 00:10:06,990 So now we've seen how to use Selenium to find elements 202 00:10:06,990 --> 00:10:11,130 to interact with them by clicking and typing. 203 00:10:11,130 --> 00:10:15,390 And also we saw how we can import the keys constant 204 00:10:15,390 --> 00:10:19,053 to interact with the website with any key on our keyboard. 205 00:10:19,950 --> 00:10:22,080 There's quite a few methods we've gone through. 206 00:10:22,080 --> 00:10:24,060 It might be worth taking some notes 207 00:10:24,060 --> 00:10:27,300 and having a quick review of how we've managed 208 00:10:27,300 --> 00:10:29,940 to do all of these things using Selenium, 209 00:10:29,940 --> 00:10:31,260 because in the next lesson 210 00:10:31,260 --> 00:10:33,300 we've got the final project coming up 211 00:10:33,300 --> 00:10:37,020 and it's gonna be all up to you to try and solve it. 212 00:10:37,020 --> 00:10:38,880 So for all of that and more, 213 00:10:38,880 --> 00:10:40,480 I'll see you on the next lesson.