Preview
Video Player
00:00
00:00
Interacting with Elements
13:39We’ve learned how to find elements, now we will cover how to interact with the elements that we have found. We will cover, reading text of an element, reading the attributes of an element, send text to an element (with a note on clearing text of an element), selecting values from drop-downs and radio buttons, and submitting forms.
All right, the moment that you've
all been waiting for, interaction.
0:00
Let's interact with the RSVP form to
see if we can't add some invitees.
0:03
Okay, I'm gonna make sure that my server
is running, and then I'm gonna go over and
0:08
use the up arrow, and get my
environment variable set to my URL, and
0:12
I'm gonna open up that ripple.
0:17
Then from the teacher's notes, attach this
one too, I have a little script that will
0:19
get our page open for us, so
we can start working right away.
0:23
So I'm gonna copy that.
0:26
Paste it, and when we press Enter,
we'll open up our new window.
0:29
So here's our window.
0:34
All right, so for this, what we wanna
do is we want to fill in a first
0:36
name here and then we wanna click this
Submit button, we wanna submit the form.
0:41
So first,
I need to get a handle on the form.
0:45
So remember,
I'm gonna make a new variable,
0:47
const form, and how did we do that before?
0:51
The form had an ID, but you know what?
0:55
I'll tell you what.
0:58
Why don't you try?
1:00
How about you pause me, and you practice
getting a handle on the form, and
1:00
then un-pause me and
I'll show you how I did it.
1:04
Go ahead, pause me now.
1:06
Ready?
1:09
Now, this is how I did it.
1:10
So I did it using the by ID locator.
1:11
So we say driver.findElement and
it has an ID of registrar.
1:14
Okay, and now the form variable is set.
1:24
Okay, and so
1:26
now what we wanna do is we want to
find the field with the name of name.
1:26
[LAUGH] Say that ten times fast.
1:31
The field with the name of name.
1:33
So good thing we have a handle,
that specific form that we want,
1:35
because I'm sure that name
is a common field name.
1:37
We can actually search from
within our form, remember?
1:41
So let's do that.
1:45
So we'll do form.findElement,
1:47
and we'll do By.name.
1:52
Cool, and then I can chain right?
1:56
Cuz I don't need to store that.
1:58
And I'll say sendKeys, and
we'll send them my name.
1:59
Make sure we got that right, boom.
2:05
Okay, so let's get a hold of that button.
2:09
Let's take a look and let's look at
what's going on with this button here.
2:13
Okay, let's pump this up a little bit.
2:17
Inside of the form,
it is the first button, right?
2:22
It is the only button that's in this form.
2:25
So we can do a findElement on that, right?
2:27
So let's do that.
2:31
Let's go here.
2:32
I'm gonna close this so
we get a better view.
2:33
Let's go here and
2:37
we'll say form.findElement cuz
it's inside that form still.
2:38
We wanna find it by tag name, but
remember, that was deprecated.
2:44
So we'll do By.cssbutton,
you just do the name of the tag there.
2:47
All right, so we also don't
need to store that one, right?
2:51
We're just gonna chain off of that.
2:54
We got a hold of it and
we were gonna click it.
2:55
Boom, look at that.
3:00
See how this element is down here now?
3:02
And look, this element has a button.
3:04
So good thing we were inside of
the form that we were searching,
3:06
otherwise there would have
been multiple buttons.
3:09
It would have been confusing.
3:11
But because like what we did, we did that,
it was inside the form find.Element.
3:13
It was only searching inside of there.
3:18
So making up fake data to use is fun and
3:20
you get a bunch of names like
Test McTesterson sort of thing.
3:23
But I thought I'd do the lazy thing and
just send out a tweet
3:26
to my followers on Twitter and
ask if anybody wanted to be in here.
3:30
So let me show you what that
tweet looked like really quick.
3:34
Just sent one of these out,
and I got a bunch of names in.
3:37
And actually, it worked out pretty good
because some people's names are very long,
3:40
and it actually broke the formatting,
I think, we'll see.
3:44
So all right, so let's do this.
3:49
So using those names, I'd like to show
off a shortcut for form submission.
3:50
So let's add another name.
3:54
So I'm gonna use the up arrow, and
3:55
instead of my name here,
let's put in Zee Alexander.
3:57
Awesome, so there's Zee, and now remember
we still have access to the form.
4:03
Well the form has a handy
feature called submit, okay?
4:07
So if I click Submit, it's gonna go ahead
and find that button for me and click it.
4:14
We didn't need to do all that
work that we did before.
4:18
And actually, you don't even need
to have access to the form, right?
4:20
So let's do this one more time.
4:24
So let's go, let's add another name here.
4:25
Let's add Jonathan.
4:27
So we'll add Jonathan Grieve,
he's looking forward to being famous.
4:29
So we'll go ahead and
we'll send the keys there.
4:35
And then, actually, I don't even
need to have access to the form.
4:37
I can just do, from the element,
this is the element here.
4:41
I could say submit and
it automatically added him.
4:44
So now we've got three
people coming to this party.
4:47
What a nice tree house party.
4:50
Now sometimes what will happen is you'll
run into situations where you wanna
4:51
get values from the page.
4:56
Now a common example of this is you
wanna check what the display header is.
4:57
So maybe you're in a test and
5:00
you wanna make sure the header
changed to the right thing.
5:01
So what we can do,
let's go ahead, let's look here.
5:03
So this is underneath an h1,
if we look at the code.
5:06
Let's look at the code really quick.
5:10
The h1 here, so it says h1 RSVP.
5:11
So we wanna get the text here.
5:13
Let's just assume that we were in an
application, we really wanted to get that.
5:15
I just wanna show this off real quick.
5:18
So let's see if we can't grab
what is in the h1 of this page.
5:19
So let's go ahead, let's take
a look at that help really quick.
5:23
So here is a WebElementPromise, so
5:27
we can get a hold of one of
those web elements, okay?
5:29
And then, let's see what we have in here.
5:32
We have getText, so
that will get the inside text.
5:35
So let's take a look what it says.
5:38
Says gets the visible,
not hidden by CSS, that's important.
5:40
The inner text of this element including
sub-elements without any leading or
5:44
trailing whitespaces.
5:47
That's really nice, so
it shortens everything in there.
5:48
So let's go ahead,
let's see if we can't find that.
5:50
So let's say we wanna
do driver.findElement,
5:53
and we know that it's an h1, right?
5:57
And there's only one of those so
5:59
we're gonna say By.css, and
the tag name is h1, right?
6:01
And we're gonna get the text from that and
that returned a thenable.
6:06
That returned a thenable so
we need to call then on it and
6:12
it returns,
it expects a function that takes a string.
6:14
So let's do that.
6:19
So getText, we need to call then on it and
after it's found it,
6:21
it's gonna call this function and it's
gonna pass the text in to the function,
6:25
to this callback function, right?
6:29
So I'm gonna say txt and then we'll
just print it out here on the line.
6:31
So we'll say console.log txt.
6:36
Okay, so
this is again that arrow function.
6:41
So we're defining a function
that takes one parameter, and
6:43
when then is called,
it's gonna pass that in, all right?
6:48
So bam there it is, RSVP awesome.
6:51
You might also want to check and
6:54
see if code is working the way
that you intend it to.
6:55
So when I click this confirmed checkbox
here, do you see how nice the styling is?
6:58
It gets blue around there, right?
7:03
See the blue?
7:05
The confirm turns blue and it turns blue.
7:06
Let's see what's doing that.
7:08
Let's go ahead and
let's inspect this element, and
7:10
here I see that there's this li class of
responded which I'm assuming is confirmed.
7:14
Yeah, so when I click that,
see it's going in and out.
7:19
So that's what's setting that.
7:21
Let's see if we can't get access
to this list item here, all right?
7:24
So what we'll do is, let's see,
let's see what that is again.
7:28
So we've got a list item and
it's inside of ul with invitedList.
7:34
So we've got a ID that we can grab and
then we can just get this li.
7:39
Let's just get this first one here and see
if we can't get some information about it.
7:43
So we'll get access to this list item.
7:46
Okay, let's do it.
7:48
All right, so
first we need to find the invited list.
7:49
So let's just say invitedList
= driver.findElement,
7:54
and that one has an id.
8:00
So that's super easy to get at, right?
8:02
So we'll say invitedList.
8:03
Now I wanna grab the first list item.
8:08
Now even though there may be
multiple matches for a locator,
8:11
I'm gonna use the singular findElement,
so it finds just the first element.
8:14
So there would be multiple LIs as
there are now, that there's three LIs.
8:20
But I’m only gonna get the first one and
the way that I’m going to do that
8:23
is by using findElement and
that will find the first element.
8:28
And we wanna get the li, so
we wanna it by tag name,
8:34
so again, we're gonna use By.css li.
8:38
Cool, all right, so
now we have the first item.
8:41
And now we want to check that box,
so let's do that.
8:46
So we'll say, firstItem.findElement and
that first thing there is an input.
8:49
It's a checkbox, right?
8:57
So by CSS and we'll say input, click.
8:59
So click is going to click that item.
9:04
Boom, we did it.
9:07
See how this changed down here?
9:08
It got clicked.
9:11
So I think I can toggle it.
9:13
If I come back I can just click it and
it turns off and on and off and on.
9:14
So now what we can do is we
can check that the specific
9:18
attribute that is making our
design show up is there.
9:22
So remember, on our item here,
9:25
what's happening is that there is
a class attribute, an attribute for
9:26
the element that says responded
when it shows up, right?
9:32
So what we can do is we can get
attributes off of the specific elements.
9:35
And the way that you do
that is with a method
9:41
quite intuitively called getAttribute.
9:44
And you name it what you want,
so we wanna get class there.
9:47
So we're gonna pull class and
this is gonna give us that back.
9:50
So we'll say, then, and we'll just
have it, then expects a function
9:54
that gives you back the attribute and
let's print out what's there.
10:00
This should be the value for that.
10:04
So responded is there and
if I turn it off, We'll check and
10:07
you'll see that it's not there.
10:13
One more time, we'll click it and we'll
look and see if the attribute is there and
10:15
it is, and then we'll click it and we'll
look and see if it isn't, and it isn't.
10:21
Cool, there's also
a pretty handy check for
10:25
something that is common
in most web applications.
10:27
Just like here how we have this button,
this click hide button,
10:30
I'm gonna go ahead and I wanna check this.
10:33
I'm gonna click this Hide button,
and you'll see that it hid Zee and
10:35
Jonathan because they have not yet
confirmed, right?
10:39
So one thing that you wanna make sure is
that you wanna see if this is show or not.
10:42
So I'm gonna make Zee confirmed here and
10:46
we'll say hide all those
who haven't responded.
10:48
And remember first item is me, is Craig.
10:50
So what you can do on an element is
use a method called is displayed and
10:56
that returns a Boolean, a true or false.
11:00
So let's check that out really quick, so
11:02
let's get a handle on this hide
those who haven't responded and
11:04
we'll make sure that it's working
the way that it is supposed to.
11:07
Okay, so
let's get a handle on this hide checkbox,
11:10
let's take a look at it Okay, so
11:14
it is inside the class main, and it is
the first input inside of the class main.
11:19
So if we do input, if we just find input,
11:26
we're gonna find our first
input which is this name here.
11:29
So let's do this,
let's say we'll find the main and
11:32
then we'll look further inside of it,
we'll get the checkbox.
11:35
Wanna give it a go?
11:37
Go ahead, pause me, and
see if you can do that.
11:39
Okay, here's how I did it.
11:44
So we'll make it a hideCheckbox.
11:46
We'll say driver.findElement and
11:49
we'll say By.className main.
11:54
So at first,
I'm gonna get the main div there.
11:58
I'm just gonna chain off
of that findElement.
12:02
And this is getting to be a long line and
that's okay.
12:04
By.css and we'll say input cuz the first
input inside of that main div.
12:08
So that's gonna get the hide checkbox for
us.
12:14
Okay, so now before we click it,
let's check and
12:17
see if the firstItem is displayed.
12:22
FirstItem, and again, it is displayed and
it is thenable as well and
12:27
that thenable returns whether or
not it's displayed.
12:32
So let's just call isDisplay again,
we can call it whatever we want.
12:37
And that makes a new function that
takes that true or false, and
12:41
we'll just use that value to
say if it's displayed or not.
12:44
And it should be true, right?
12:47
Cuz you can see me there.
12:48
I'm the first one there.
12:49
So that's true.
12:51
Let's click our hideCheckbox.
12:51
Click, okay.
12:57
And now let's check if I'm displayed and
boom, I'm not.
13:00
Nice, right?
13:04
This way you don't need to
check specific class names or
13:04
CSS properties because this is
usually all you care about.
13:07
Checking if things are being hidden and
shown as you expect.
13:10
Now that we can find, check the state, and
13:14
interact with elements on a webpage,
we can do all sorts of automation.
13:16
What we've been doing at the command
line is great for exploring, but
13:20
I'm guessing you're getting ready to see
what this looks like in actual code files.
13:23
There are some design considerations and
13:27
best practices that have evolved
in this automation space.
13:29
So let's take a walk through some of those
and dive deeper into CSS Electras and
13:32
Xpath Queries in the next stage.
13:36