#100DaysOfCode in Python Transcripts
Chapter: Days 73-75: Automate tasks with Selenium
Lecture: Demo 2: automating PyBites banner creation

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