All right.
It's time to do something useful with our selenium driver.
We want to try and grab this input, put some text in it, then click on show message just like we would
on a website, maybe where we're trying to sign in automatically to test the sign in functionality or
to test some sort of a form functionality in our app.
How can we do this?
Well, let me clear this first.
Just so we have a clean palette and start with a few things.
The first thing I like to do when working with Selenium is to make sure that as we progress through
the code, we're doing things correctly by using these assert commands.
So I can say assert and we want to assert that this button text, which we're going to use, which is
show message, we want to assert that this show message actually.
Exists on our page.
Now, an easy way to check this is to say Chrome browser and instead of title, we want to just check
the page.
Source.
And pitch source is simply if I right click here and look at the view page source.
Is simply the HTML version of the entire website that we see.
Which should have the show.
So by doing this, hopefully if everything works up until line 12, we should just get true without
any errors.
So let's run that.
All right.
We don't get any errors.
Everything is good.
Now let's move on.
The first thing I want to do is grab this input.
So I'm going to inspect.
Or Let's close this so we have a better view of this.
And use.
Inspect on the input.
We see that the input over here has it has an ID of user message so we can grab this with ID if you
remember.
And we scroll up to our cheat sheet here.
We see that we can grab elements by ID using the find element by ID method.
So let's do that.
I'm going to say.
Chrome browser.
Dot find element by ID and the ID name that I wanted to grab was the user message.
So let's do that.
I'm going to say user message.
And the first thing I want to do now that we've grabbed this ID is I want to make sure that there's
no text in here, maybe from a previous user.
So usually when grabbing inputs, I'll do something like user message.
Let's create a new variable here called user message.
And I'm going to say user message dot clear to clear wherever is in the input and then from there.
Oh, and let's make sure this is underscore like this.
And then from here we can use the send keys and send keys says, hey, in the user message, send these
keystrokes as if a user is typing and give it the string.
Let's do I am extra cool.
That's kind of silly, but that should be fine.
So we're going to mimic typing.
I'm extra cool into that input after we've cleared it.
So let's see if this works.
I'm going to run.
Whoa.
How cool is that?
Do you see that?
We just automated typing into a box and it says, I am extra cool.
Awesome.
Now the next step is we want to grab this button and then simulate a click on it so that your message
gets displayed on here.
If I click show message, you see that I get this printed.
Let's close some of our browsers because I feel like we have a ton of Selenium browsers open right now.
That's better.
So now that we have this once again, we can select the button.
So remember, we can select the button just like this.
But well, let's not call it button text.
And I like being specific here, so let's call this show message button.
Now this show message button, which we've grabbed before.
The first thing we want to do.
Is to, well, simulate a click.
Just like that.
So we send keys and then we click.
So let's see if that works.
I'm going to save this and run.
Hmm.
Looks like that didn't work.
Let me check what happened.
We get a name.
Error button text is not defined.
Oh, and that's because we did not fix the naming in here in the print function.
So let's just change the name here.
We can actually just comment this out because we don't need to print it anymore.
And let's run it again.
Whoa.
Do you see that also?
Did you notice how fast that happened?
I am extra cool.
It got click show message and now my message appears.
Very, very cool.
Let's say that we wanted to grab this information.
What can we do?
Well, once again, we can right click, so let's use our default.
Let's right click inspect.
And you can guess by now that this is starting to get easy.
We see that we have the ID of display, so we're going to grab that.
And say this is going to be the output message.
And the output message will be the.
Chrome browser.
Dot find element by ID and give it the display.
And maybe now to verify that this is working, I'm going to do an assert method and say, hey, I want
to assert that the I am.
Extra cool.
How many O's is that?
Four O's that looks right is in the output message.
And what we want to do is to actually see the text so we can actually say the inner HTML like we've
done here with get attribute or we can just say text.
So if I run this.
No airs.
Everything is working now.
This is a simple example, but did you notice how fast everything happened?
I mean, if a human was to do this, you'd have to select here and type this in.
Then you have to click show message, and then your message finally gets to displayed.
The reason testing automation is such an important part of software development is that you can do things
really, really fast.
You let the machine control the browser extremely fast, so you can test as many times as you want millions
of times.
You can simulate clicks, you can enter information, just anything that a human can do.
Selenium lets you use as well.
Now I want to show you one other way to select that is very, very common.
We've seen that we can do find element by ID, find element by class name.
But another very useful one is something called Chrome browser dot find element instead of class name.
We use something called CSS.
And CSE selector.
We're not going to learn CSIS here, but CSIS in a browser.
Is the styling that you get.
So for example, if I was to look at the button and I do inspect, you see that the class has button
button default.
And in a class this is what we call CSIS.
This tells it, hey, these are the styles that we want.
You can see over here in the Styles tab that we have button, default and button, and this controls
our styles on a web page, for example, if I uncheck this.
My button.
Well, now has no styling.
If I uncheck some of this as well.
Again, the button styling goes away.
So we're actually able to use CSS selectors again, something that you can Google on your own or I teach
my other courses to actually grab this.
So the way we would do something like this and grab button by default is to use the, let's say, CSS
class dot.
But and this is a CSS selector, for example, if I wanted to grab all buttons that are under the form,
get input, which is I'd get input, then I would do LB which stands for ID.
Get input.
And then say all forms that have the ID get input and anything that is a child button I want you to
grab.
So that if I do user.
Message or user.
Button.
I'll say to here, if I print this out now and say a user button to this should have been selector not
select.
Let's fix that.
You see that?
I'm able to grab this element that way as well.
All right.
Let's take a break, because check out all the windows that I just opened up.
This is getting a little insane.
So in the next video, I'm going to show you how to close all of these.
I'll see in the next one.
Bye bye.