We found our element to interact with but our locator was way too specific.

Any change to the page can potentially break our ability to access that element.

Now detailed knowledge about the structure of the layout of the page

is definitely an automation anti-pattern.

You want to be as specific as you can be, but not as rigid

as to require the entire structure of the document to remain unchanged.

If you fall into that trap,

any change to the layout of your page breaks the locator strategy.

This how do I be specific about an element without

relying on the page structure problem is actually quite common.

We see this a lot in both CSS and

JavaScript in the DOM, or document object model.

We want to be able to specify the exact element that we're talking about.

Now a typical solution to this is to add an identifier to your element.

In HTML, we do this with the id attribute.

Then in CSS, we can reference it with the id selector or

we could use get element= by id in JavaScript.

So the good news is, most of the time, the page you are trying to automate is

already setup to have easily locatable elements.

Because others have needed to access things either for style or interactivity.

Selenium allows you to leverage that work.

Why don't we take a look at accessing these elements by their identifier?

Okay, so let's start by looking at the layout of our page.

Well first, is your server running?

[LAUGH] It's sounds like that old prank call, doesn't it?

You better go catch it.

So mine isn't, so I'm gonna click Continue Working.

And I'm gonna choose Reload.

And this should be enough to start our preview up and running again.

All right, so I'm going to flip back and let's go back to our ripple.

And we'll say, node get that up and running.

And I'm gonna again press the up arrow.

Let's bring in Selenium and let's also bring in By over here.

And then we will go ahead and might as well set our url.

And let's get the driver built, so

we're gonna build the driver using the builder pattern there.

And then we are going to,

and you saw it pop up behind there, let's go ahead and open up our page.

Okay, now let's try to see what sort of id we have.

So we're looking again, we're looking at this text input.

So right click and Inspect, okay, I'm gonna look at the Elements tab here.

I'm gonna close this, let's go ahead and bring this down here.

And I'm gonna pop this up for visibility purposes.

Okay so we've got an id, not on the input tag, but

we do have one on the form tag here, so it has an id.

So, let's see what that looks like, so let's flip back over to our code here.

So what we'll do is we'll make a new variable called form.

And we will use the find element method of the driver.

And our locator strategy this time is going to be using By.

And there's another method here, named id, and it takes the id.

And again, that id, let's flip back real quick and make sure that id was registrar.

So we should be able to get a hold of that by ID registrar.

Cool, so now we have a form element.

Well, eventually, remember this is a premise.

But it is in our field, so we can't just send keys to the form, but

what could we do with this element, we have a hold of it.

So this is a great time to look at the documentation.

Let's do a search for Selenium WebDriver API.

And I'm just gonna throw on a JS there just to make sure

we get the one that we're talking about.

Cuz remember, there's a bunch of different languages for it.

So I"m gonna click this selenium-webdriver one right here, awesome.

Let's open up these modules here, and if you click the selenium-webdriver,

this will show all of the documentation here and they're pretty great.

You can see here that if you scroll down, we have this WebElementPromise.

And that's what we have, let's click into that.

If we scroll down, you'll see that it has some methods, right?

So, you can cancel or click or find, get an attribute.

So, let's see, which one we can do here?

Here's getTagName, let's go ahead and if we click it will open up and

will tell you what it does.

So it says it schedules a command to query for the tag/node name of this element.

Awesome, so that's the tag name.

So the tag name should be form, right?

But let's look, in this case, this is saying that it returns a Thenable, so

that's a promise, okay?

And it's probably like you're usually accustomed to.

So, what happens is you call the function this getTagName, and it returns a promise.

And see how it's a Thenable of type string.

So that string is gonna be the name.

So, to get access to that value, you need to call and

then provide it a function, so let's do that.

So we're gonna get the tag name for the form that we got.

So let's come back to where we're at, here we are.

So we're gonna say form.getTagName, okay?

And again, that returns a promise.

So a promise has a then on it, okay?

So after it's gone and gotten the tag name, it's gonna call a function for us.

Now we're gonna use the arrow function syntax.

If this is new to you, check the teacher's notes.

So the function expects a string called name and

then we're just gonna print it out.

We'll say console.log("Tag

name is " + name)).

Make sure we close that out properly, awesome.

So tag name is form, cool, there's our value.

So let's look at another one really quick, let's flip back to that doc.

So let's say, get Let's see, there's text, getSize, that's fun, so let's do this.

So it's Thenable that returns an object that has a height and a width.

And it computes the size of the elements bounding box in pixels.

Well, that's pretty cool right, so let's try that.

Let's go back to our form, we'll say form.getSize.

And again, it returns a promise, it's a thenable.

And the size object,

it's gonna be an object that has a height and width on there.

So we'll say console.dir(size), cuz we'll wanna spit that out so

it looks a little bit prettier.

So then, and look at that, so, the size of the form is 54 by 520.

It looks like it has some other information in here, it's not filled out.

Okay, so we still need to get to our input field though, right?

We need get here, how can we do that?

Well, you know what, I do have access to that source.

Why don't I just go in there and add my ID, right?

I mean, what could go wrong?

So I am gonna come in here.

Here's our input type I'm just gonna go ahead and I'm gonna say id="invitee".

Cool and then if I come back here and I can just go get that, right?

It looks pretty easy so we'll

say const field = driver.findElement.

And again, we want to find it by id, and

the id that we just added is called invitee.

So it should fail now, right, because the document's open, so it can't find it.

So wow, that failed really hard.

So it says, no such element: Unable to locate element.

ID invitee.

Ok, so, it can't find that, so.

Let's go ahead and, I'm gonna go ahead and, see, left this thing up and running.

And these will start piling up here.

Let's go ahead and let's close this.

And I'll start things up again.

Boy, we need to do something about this, don't we?

Selenium and we're gonna go ahead and

build the driver we need to make sure that we get by here.

There's our by, and then we need to do the builder, we've got the builder already.

We need to get the url which we haven't set yet, so we need to set the url.

Now we can do driver.get (url), okay, so now our page is open again.

And I wanna try and find that field, there we go.

Field = driver.findElement(By.id"invitee"));.

And it should be there now, because the page just refreshed, right?

Okay, so now we've got the field, and let's do our trick there.

And we can say field.sendKeys("Found by id"), boom, we did it.

Now, before we go celebrating too much,

I kinda led you down a path towards a bad practice.

Adding specific attributes for automation purposes

only is a common trap that people just getting started tend to fall into.

So I wanted to walk you through it, sorry for misleading a little bit.

But let's think this through,

we don't really wanna add an id to every element, do we?

First off, you might not have access to make the modifications to the source,

like we just did.

Maybe you're on a team that doesn't have the ability to make those kind of changes.

And second, it's a lot of work, imagine all those ids that you'd have to create.

You'll find that when working on a team that relying on ids that you created

might mean that people using them for CSS won't understand what they're for and

[SOUND] remove them.

If you need another reason to avoid using ids just for locator purposes,

this will probably seal the deal.

One thing you might not realize is that elements with the id

attribute actually pollute the global name space.

Here, let me show you real quick, so I'm wanna go ahead and

open up, let's full screen this.

I'm gonna go ahead and open up our Tools, I'm going to Inspect this element.

I'm gonna flip over to the console here and close this.

So, you probably know that already, with JavaScript,

we could say document.getElementbyId and it has an invitee right?

Check this out, if I do window.invitee, look at that.

Also, it's available on the window.

That means that a variable was created just to store that element.

And because window is in the default scope,

we also just have a plain old variable called invitee.

Just available, yeah, there is,

let's remove that id and be a good teammate and a good JavaScript citizen.

So I'm gonna get rid of that id that we added.

Save that, now in order to get at that unidentified input element,

we're going to need to explore a few more locator strategies.

Let's do just that right after this quick break.