#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.
