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