00:00 All right, I got another cool project
00:02 to show you Selenium in action.
00:04 A while ago we made a banner generator
00:07 with Pillow and Flask.
00:09 And you can read about that in this blog post.
00:11 And, the thing was, as we were making banners repeatedly,
00:15 we just made a little Flask app,
00:17 we enter some data, and it generates a banner.
00:20 What if you can automate that using Selenium?
00:24 So, again, it's pretty similar as last time.
00:27 We need to look into the site.
00:30 Well this one is actually cooler
00:31 because we are going to provide data in a form.
00:34 So we're actually going to submit this form
00:36 doing a post request with some data,
00:39 and then it will return our banner.
00:41 Let's get that working.
00:42 Similar as last time,
00:44 you need your login to be loaded from the environment.
00:47 You don't want to hardcode that in your script.
00:49 So, in this case, already done that.
00:51 So, I got my user and my password.
00:54 I'm keeping secret here see the last video
00:56 how you load those into your environment,
00:58 putting them into your virtual environment's
01:00 activation script.
01:02 At this notebook I'm not going to do much validation,
01:04 but you could add something like this.
01:07 Class, no login.
01:12 Extends exception.
01:14 Pass exception.
01:18 And then, if user is None,
01:22 or password is None,
01:25 raise a no login...
01:27 exception,
01:29 and tell the user to set...
01:37 in your end.
01:38 Right, so that's a little extra
01:39 if it would be like a script you're going to run.
01:42 But let's focus on Selenium again.
01:44 Here's the site. It's an app we host on the Heroku app
01:47 and the route to the login page.
01:51 Again we need to initialize web driver, Chrome.
01:58 We get to the login page
02:02 and, again, this is pretty similar as last time.
02:05 We need to look at the HTML.
02:07 Let's actually do that.
02:11 Right, so we want to right-click here
02:14 and go to inspect.
02:19 There you see that this is an input field.
02:22 And, the name is username.
02:25 And the name of the second field is password.
02:28 And those are the fields you want to specify
02:31 for Selenium to go find.
02:34 So, try, find, element...
02:38 by id...
02:41 username...
02:43 and we want to send it my user...
02:48 string.
02:51 And the same for password
02:55 with the difference that we need to send our password
03:01 and hit enter.
03:05 Return.
03:07 Running this opens the browser.
03:10 It logs in and that's it.
03:12 Next up, needing a little helper to create a title.
03:15 And if it's not core Selenium,
03:17 I'm going to just paste it in.
03:19 In this exercise I want to make a PyBites news banner
03:22 and they're typically of the format news, year, week.
03:27 And to get a week, I use isocalendar.
03:30 So, basically what this does is, it gets me news
03:33 and then the current year and the current week.
03:36 The same for the variables.
03:38 I'm going to copy them in.
03:39 The news option corresponds to the dropdown.
03:43 So here we have a dropdown of different types of logos
03:46 or banner types.
03:47 So we have special, news, article and challenge.
03:49 And we want the news one, so we have to specify that
03:51 in the script.
03:52 So the news option is pybites-news.
03:55 That's the literal option of that select box.
03:57 I defined the background image
03:59 that will show up on the banner
04:01 and we're going to call the banner from PyBites import news
04:05 to enter digest and we pass in the year and the week.
04:08 Which is nice.
04:10 We have strings that you can just embed your variables.
04:12 And now the actual Selenium coding.
04:15 Driver.
04:16 find_element_by_id.
04:19 Going to find a name, oh that's this guy.
04:23 We're going to send the get title
04:26 which is the function that this is actually stored at.
04:33 Just pass it around.
04:34 That's better.
04:38 Then I'm going to find...
04:40 element...
04:44 by xpath.
04:51 I'm going to copy this over.
04:53 It's a bit tricky.
04:56 That's something I needed to work with select options.
05:01 So go find the select box called image URL one.
05:05 And again, you can use the web tools
05:09 to see what the actual HTML looks like.
05:12 So the select box is image on the score URL one.
05:16 Go grab that one and take the option
05:18 with the text news option and click it.
05:21 So an input field is easier,
05:24 but a select box is actually two actions, right.
05:27 You have to find it and click on the right option
05:29 to get that value, to get it selected.
05:33 Compare that to, again, another input element
05:37 where I can just say...
05:41 send keys.
05:42 It's just way easier, right?
05:46 And I send the banner text.
05:48 So I'm sending that here.
05:49 And finally,
05:52 I want to set the background image
05:54 to that beautiful snake we saw
05:56 and that field is called image_url2.
06:00 I'm going to send that to keys background image.
06:05 As it's the final one, I'm going to hit enter.
06:14 Alright, seems I didn't have year and week
06:17 in the global scope, so let's define those quickly here.
06:25 And look at that, the banner got created.
06:28 Let's show that once more.
06:31 It logged in.
06:33 Put all the data in the form and submitted it.
06:35 And it created this banner all automatically.
06:39 And let's not forget to close the driver when we're done.
06:46 And that closed my window.
06:47 Okay, how cool is that, right?
06:49 A banner completely automated with Selenium.
06:52 And I hope this gave you a taste
06:54 of what you can do with Selenium
06:56 and let's review next what we've learned.
