All right, the moment that you've all been waiting for, interaction.

Let's interact with the RSVP form to see if we can't add some invitees.

Okay, I'm gonna make sure that my server is running, and then I'm gonna go over and

use the up arrow, and get my environment variable set to my URL, and

I'm gonna open up that ripple.

Then from the teacher's notes, attach this one too, I have a little script that will

get our page open for us, so we can start working right away.

So I'm gonna copy that.

Paste it, and when we press Enter, we'll open up our new window.

So here's our window.

All right, so for this, what we wanna do is we want to fill in a first

name here and then we wanna click this Submit button, we wanna submit the form.

So first, I need to get a handle on the form.

So remember, I'm gonna make a new variable,

const form, and how did we do that before?

The form had an ID, but you know what?

I'll tell you what.

Why don't you try?

How about you pause me, and you practice getting a handle on the form, and

then un-pause me and I'll show you how I did it.

Go ahead, pause me now.

Ready?

Now, this is how I did it.

So I did it using the by ID locator.

So we say driver.findElement and it has an ID of registrar.

Okay, and now the form variable is set.

Okay, and so

now what we wanna do is we want to find the field with the name of name.

[LAUGH] Say that ten times fast.

The field with the name of name.

So good thing we have a handle, that specific form that we want,

because I'm sure that name is a common field name.

We can actually search from within our form, remember?

So let's do that.

So we'll do form.findElement,

and we'll do By.name.

Cool, and then I can chain right?

Cuz I don't need to store that.

And I'll say sendKeys, and we'll send them my name.

Make sure we got that right, boom.

Okay, so let's get a hold of that button.

Let's take a look and let's look at what's going on with this button here.

Okay, let's pump this up a little bit.

Inside of the form, it is the first button, right?

It is the only button that's in this form.

So we can do a findElement on that, right?

So let's do that.

Let's go here.

I'm gonna close this so we get a better view.

Let's go here and

we'll say form.findElement cuz it's inside that form still.

We wanna find it by tag name, but remember, that was deprecated.

So we'll do By.cssbutton, you just do the name of the tag there.

All right, so we also don't need to store that one, right?

We're just gonna chain off of that.

We got a hold of it and we were gonna click it.

Boom, look at that.

See how this element is down here now?

And look, this element has a button.

So good thing we were inside of the form that we were searching,

otherwise there would have been multiple buttons.

It would have been confusing.

But because like what we did, we did that, it was inside the form find.Element.

It was only searching inside of there.

So making up fake data to use is fun and

you get a bunch of names like Test McTesterson sort of thing.

But I thought I'd do the lazy thing and just send out a tweet

to my followers on Twitter and ask if anybody wanted to be in here.

So let me show you what that tweet looked like really quick.

Just sent one of these out, and I got a bunch of names in.

And actually, it worked out pretty good because some people's names are very long,

and it actually broke the formatting, I think, we'll see.

So all right, so let's do this.

So using those names, I'd like to show off a shortcut for form submission.

So let's add another name.

So I'm gonna use the up arrow, and

instead of my name here, let's put in Zee Alexander.

Awesome, so there's Zee, and now remember we still have access to the form.

Well the form has a handy feature called submit, okay?

So if I click Submit, it's gonna go ahead and find that button for me and click it.

We didn't need to do all that work that we did before.

And actually, you don't even need to have access to the form, right?

So let's do this one more time.

So let's go, let's add another name here.

Let's add Jonathan.

So we'll add Jonathan Grieve, he's looking forward to being famous.

So we'll go ahead and we'll send the keys there.

And then, actually, I don't even need to have access to the form.

I can just do, from the element, this is the element here.

I could say submit and it automatically added him.

So now we've got three people coming to this party.

What a nice tree house party.

Now sometimes what will happen is you'll run into situations where you wanna

get values from the page.

Now a common example of this is you wanna check what the display header is.

So maybe you're in a test and

you wanna make sure the header changed to the right thing.

So what we can do, let's go ahead, let's look here.

So this is underneath an h1, if we look at the code.

Let's look at the code really quick.

The h1 here, so it says h1 RSVP.

So we wanna get the text here.

Let's just assume that we were in an application, we really wanted to get that.

I just wanna show this off real quick.

So let's see if we can't grab what is in the h1 of this page.

So let's go ahead, let's take a look at that help really quick.

So here is a WebElementPromise, so

we can get a hold of one of those web elements, okay?

And then, let's see what we have in here.

We have getText, so that will get the inside text.

So let's take a look what it says.

Says gets the visible, not hidden by CSS, that's important.

The inner text of this element including sub-elements without any leading or

trailing whitespaces.

That's really nice, so it shortens everything in there.

So let's go ahead, let's see if we can't find that.

So let's say we wanna do driver.findElement,

and we know that it's an h1, right?

And there's only one of those so

we're gonna say By.css, and the tag name is h1, right?

And we're gonna get the text from that and that returned a thenable.

That returned a thenable so we need to call then on it and

it returns, it expects a function that takes a string.

So let's do that.

So getText, we need to call then on it and after it's found it,

it's gonna call this function and it's gonna pass the text in to the function,

to this callback function, right?

So I'm gonna say txt and then we'll just print it out here on the line.

So we'll say console.log txt.

Okay, so this is again that arrow function.

So we're defining a function that takes one parameter, and

when then is called, it's gonna pass that in, all right?

So bam there it is, RSVP awesome.

You might also want to check and

see if code is working the way that you intend it to.

So when I click this confirmed checkbox here, do you see how nice the styling is?

It gets blue around there, right?

See the blue?

The confirm turns blue and it turns blue.

Let's see what's doing that.

Let's go ahead and let's inspect this element, and

here I see that there's this li class of responded which I'm assuming is confirmed.

Yeah, so when I click that, see it's going in and out.

So that's what's setting that.

Let's see if we can't get access to this list item here, all right?

So what we'll do is, let's see, let's see what that is again.

So we've got a list item and it's inside of ul with invitedList.

So we've got a ID that we can grab and then we can just get this li.

Let's just get this first one here and see if we can't get some information about it.

So we'll get access to this list item.

Okay, let's do it.

All right, so first we need to find the invited list.

So let's just say invitedList = driver.findElement,

and that one has an id.

So that's super easy to get at, right?

So we'll say invitedList.

Now I wanna grab the first list item.

Now even though there may be multiple matches for a locator,

I'm gonna use the singular findElement, so it finds just the first element.

So there would be multiple LIs as there are now, that there's three LIs.

But I’m only gonna get the first one and the way that I’m going to do that

is by using findElement and that will find the first element.

And we wanna get the li, so we wanna it by tag name,

so again, we're gonna use By.css li.

Cool, all right, so now we have the first item.

And now we want to check that box, so let's do that.

So we'll say, firstItem.findElement and that first thing there is an input.

It's a checkbox, right?

So by CSS and we'll say input, click.

So click is going to click that item.

Boom, we did it.

See how this changed down here?

It got clicked.

So I think I can toggle it.

If I come back I can just click it and it turns off and on and off and on.

So now what we can do is we can check that the specific

attribute that is making our design show up is there.

So remember, on our item here,

what's happening is that there is a class attribute, an attribute for

the element that says responded when it shows up, right?

So what we can do is we can get attributes off of the specific elements.

And the way that you do that is with a method

quite intuitively called getAttribute.

And you name it what you want, so we wanna get class there.

So we're gonna pull class and this is gonna give us that back.

So we'll say, then, and we'll just have it, then expects a function

that gives you back the attribute and let's print out what's there.

This should be the value for that.

So responded is there and if I turn it off, We'll check and

you'll see that it's not there.

One more time, we'll click it and we'll look and see if the attribute is there and

it is, and then we'll click it and we'll look and see if it isn't, and it isn't.

Cool, there's also a pretty handy check for

something that is common in most web applications.

Just like here how we have this button, this click hide button,

I'm gonna go ahead and I wanna check this.

I'm gonna click this Hide button, and you'll see that it hid Zee and

Jonathan because they have not yet confirmed, right?

So one thing that you wanna make sure is that you wanna see if this is show or not.

So I'm gonna make Zee confirmed here and

we'll say hide all those who haven't responded.

And remember first item is me, is Craig.

So what you can do on an element is use a method called is displayed and

that returns a Boolean, a true or false.

So let's check that out really quick, so

let's get a handle on this hide those who haven't responded and

we'll make sure that it's working the way that it is supposed to.

Okay, so let's get a handle on this hide checkbox,

let's take a look at it Okay, so

it is inside the class main, and it is the first input inside of the class main.

So if we do input, if we just find input,

we're gonna find our first input which is this name here.

So let's do this, let's say we'll find the main and

then we'll look further inside of it, we'll get the checkbox.

Wanna give it a go?

Go ahead, pause me, and see if you can do that.

Okay, here's how I did it.

So we'll make it a hideCheckbox.

We'll say driver.findElement and

we'll say By.className main.

So at first, I'm gonna get the main div there.

I'm just gonna chain off of that findElement.

And this is getting to be a long line and that's okay.

By.css and we'll say input cuz the first input inside of that main div.

So that's gonna get the hide checkbox for us.

Okay, so now before we click it, let's check and

see if the firstItem is displayed.

FirstItem, and again, it is displayed and it is thenable as well and

that thenable returns whether or not it's displayed.

So let's just call isDisplay again, we can call it whatever we want.

And that makes a new function that takes that true or false, and

we'll just use that value to say if it's displayed or not.

And it should be true, right?

Cuz you can see me there.

I'm the first one there.

So that's true.

Let's click our hideCheckbox.

Click, okay.

And now let's check if I'm displayed and boom, I'm not.

Nice, right?

This way you don't need to check specific class names or

CSS properties because this is usually all you care about.

Checking if things are being hidden and shown as you expect.

Now that we can find, check the state, and

interact with elements on a webpage, we can do all sorts of automation.

What we've been doing at the command line is great for exploring, but

I'm guessing you're getting ready to see what this looks like in actual code files.

There are some design considerations and

best practices that have evolved in this automation space.

So let's take a walk through some of those and dive deeper into CSS Electras and

Xpath Queries in the next stage.