Instructor: In the last lesson,
we looked at how we can find elements
using Selenium on a webpage.
In this lesson, I wanna focus more on how to interact
with those elements that you found.
For example, typing into a input field
or clicking on a button.
The first thing I wanna show you
is how to click on something.
In this case, we've already gotten hold of an anchor tag,
which is inside a diff called Article count.
It's basically this anchor tag.
And if I want to click on it, not using my mouse,
but using Selenium, all I have to do
is to get hold of the element, which is this article_count,
and then call the .click method on it.
It's as simple as that.
And once I hit Run, you'll see that my cursor
is nowhere near the link,
but it actually clicked through
and it got to the statistics page from that link.
So it's basically equivalent of me doing this,
but it was done automatically.
This was one way that we could have gotten hold of a link
and then clicked on it.
Now because this is such a common requirement
to click on a link on a webpage,
Selenium actually has a specific find method
that makes this really easy.
For example, if we wanted to click on this link
that says Content portals,
where it lists all the different Wikipedia portals,
basically subsections of Wikipedia,
well, one of the things that we could do
is simply get hold of this link text,
which says Content portals,
And then we can create an object using our driver
by tapping into find.element By.LINK_TEXT.
And all we have to put in there is the link text.
So now I can say all_portals.click.
And if we go ahead and comment out this part,
then you can see it's gonna open up our webpage
and it's gonna click on that all portals
taking us to this page.
So this is a find method that's pretty specific to links
where we just find it by the text
that is in between the anchor tag.
So for example, when I inspect on that portal,
you can see that this is the anchor tag
and the link text is the part between the opening
and closing tags.
So it's now searching by that text, which is a common need
that you might have when you're going onto a website.
Now that we've seen how we can click on links
once we've identified them, what about typing?
Let's say we wanted to search for Python
in this search bar.
How might we do that?
Well, first let's go ahead and get hold of the search bar.
So I'm gonna inspect on that,
and it takes me to this input element.
And the thing that we can identify it by is its name,
which is equal to search.
So I can use our method, which is find.element By.NAME
and then pass in search as the name
of the element I wanna get hold of.
Now, once I've gotten hold of that element,
then I can use a method called send_keys.
And this is gonna be the keys from the keyboard
that you wanna send to this particular element.
So let's say I wanted to type Python in there.
Well, all I have to do is type send_keys Python,
and now when I hit Run, you can see
that it's going to automatically go over there
and type in the word Python.
My hands are completely off the keyboard
and my cursor is nowhere near the search bar,
so that was all done automatically.
Now, once we've typed in Python,
the next thing we wanna do is hit the Return key, right,
or the Enter key.
Now, when we wanna send a key that's not a letter
or one of the numbers or symbols,
then we actually have to do a separate input.
From the Selenium package,
inside the Web Driver folder,
there's a folder called Common,
and inside there there's something called keys.
This keys contains a class called keys,
and that contains a bunch of constants.
What we can do is we can say search.send_keys,
and the key that we're gonna send
comes from this keys class,
and it's one of the constants in there,
which is called ENTER.
This is basically the Return key,
but you can see there's also other ones like Shift or Tab.
Basically any key that you have on the keyboard
can be replicated by the keys class.
Effectively, what we're doing here is we're finding
that search bar, typing in Python,
and then hitting the Enter key.
So let's run this and see it in action.
And that takes us to the search results.
So now we've seen how we can click on buttons,
once we've located something that is clickable,
like a button or an anchor tag.
We've seen how we can type something into a field
using Send Keys.
And finally, we've seen how we can import
this class of keys,
which contains a whole bunch of constants
that represents the key code for a lot
of the common keys like Enter, Shift, Control, et cetera.
Now, I have a challenge for you.
I want you to try and see if you can figure out yourself
how to use Selenium to automatically insert your name,
your last name, and email address,
and then hit the Sign Up button
in order to fill out this form.
Now, if you're successful, it should take you
to this Success page.
Now don't worry if you actually type in
your real email address or not.
This is a webpage that we created as a part
of the Complete Web Development Course.
It's another course that I do,
which goes into detail on web technologies like JavaScript,
Node, React, and this is a site that we built
in that course.
Now, the reason why I'm taking you to this page
is because I don't want you to go onto a random webpage,
like a real website
where they're actually collecting valid data.
If we're doing our practices and our exercises
on a real website,
we'll end up giving them a lot of bot traffic,
and it's not great for the website.
This is why I'm getting you guys to use my own website,
which is set up for testing anyways.
The link to the page is in the course resources
or you could type it in as you can see here.
Now, as I mentioned, this is not a sign up
to our actual newsletter, which lives on this page,
where every month I personally write a letter
to you updating you on what we've been up to,
what I've been up to,
and some articles that I've come across on the internet
that I've found to be really interesting
in terms of programming, design or startup culture.
If you actually wanna sign up to the newsletter,
then head over to this link and put your email address here.
But in order to test your skills on Selenium,
we want you to head over to this link
and see if you can fill out this form automatically
using what you've learned,
and then get your Selenium to click Sign Up.
Pause the video now
and see if you can complete this challenge.
So the first thing we need to do is to copy the URL
and then back over here,
and I'm gonna change my driver to go to this new URL.
Now, once I've gotten to the new URL, I wanna go ahead
and try to find and identify each of these fields.
So let's click on Inspect.
And you can see that this first field has a name of fName.
The second one has a name of lName,
and the final one has a name of email.
So let's identify those using our driver.find,
and we're gonna use the find.element By.NAME,
passing in fName, and then it was lName for last name,
and then it was email.
So this is going to be our first name, last name, and email.
The next step is to actually fill it in.
So we're gonna say first_name.send_keys,
and then I'll pass in my first name,
and then it's gonna be last_name.send_keys,
and then I'll pass in my last name.
And finally we've got our email,
and I'll just pass in a dummy email.
So now I'm gonna try and find this button
by inspecting on it
and seeing how I can identify it using my code.
So it's a button with all of these classes and a type,
but no ID or name.
Given that this is the only button element inside this form,
then I'm gonna go ahead
and identify it by using CSS_SELECTOR.
So it's inside the form and it's a button element.
And finally, once I've found it,
I'm simply gonna click on it.
So our script is gonna go in order.
So it's first gonna load up the page,
type in all of these things, and then finally click on it.
So let's hit run and see if that worked.
That was lightning fast,
because obviously it's not me typing,
and it clicked on the button
and it took us to the Success page.
How did you get on with that?
So now we've seen how to use Selenium to find elements
to interact with them by clicking and typing.
And also we saw how we can import the keys constant
to interact with the website with any key on our keyboard.
There's quite a few methods we've gone through.
It might be worth taking some notes
and having a quick review of how we've managed
to do all of these things using Selenium,
because in the next lesson
we've got the final project coming up
and it's gonna be all up to you to try and solve it.
So for all of that and more,
I'll see you on the next lesson.