Okay, so now that we know that we really shouldn't be sprinkling IDs all over our

document, we need to come up with some better ways to approach this problem.

Let's take a look at what else we have available in the documentation.

So what I'm gonna do is I'm gonna navigate over to our By class here.

So let's go in here, in this By class, and

let's take a look at what else we have in these static functions here.

By.className, that's kinda nice.

So that's like a CSS class.

Let's see if our code has that.

So it does have a class on the wrapper, but our input file doesn't have that.

It does have this name attribute, which the form uses when it's submitted.

So let's look and see if that exists in here.

By.name, perfect.

The name attribute has the given value, awesome.

So let's use that, all form inputs have a name.

So let's go ahead and make sure that the workspace is loaded.

I'm gonna click this, cuz I've got a little surprise for you here.

So let's click this, we'll launch our preview here.

I'm gonna grab that URL one more time.

And to save us some time,

what I've done is I have written the code that you can just paste.

But it's gonna require you to, when you start this up,

we're gonna have to paste in an environment variable.

So that's gonna be URL=, and I'm gonna paste in what I just had.

So if you haven't seen this before, this pushes stuff into the environment and

you can then use it in your program.

It's a little bit different in Windows, so check the teacher's notes for that.

So I'm passing in my URL and now I'm gonna type node.

Then, in the teacher's notes below,

there is a string of text that you can copy for the command.

So I'm just gonna grab that, then copy it, and then I'm gonna paste it.

We have our app running, I'm gonna close this other one.

See, they keep on piling up.

So this is our new one here.

And see, what happened, in the code that was pasted out,

this process.env.URL that's what we set up here.

So as long as we set that,

now the reason why I had to do that was because mine is different than yours.

My workspace ID is different than what yours looks like.

So yours will look a little bit differently here, but it's now saved and

you can pass that through each time.

So we don't need to type all that beginning stuff again.

Okay, so let's get it by name.

So we'll say driver.findElement.

And remember, it's By.name.

Now, the name of the attribute is actually name, right?

So the value was name, because it's gathering the first name there.

Cool, so that found it.

And now, since we have it, instead of storing that in a variable,

what we can do is a thing called method chaining, all right?

So we know that that returns the element.

So now we can say sendKeys, and we'll say found by name.

See, what's happening here is it found the element and

then it's calling sendKeys on it.

So let's do this, let's bring that up so we can see it, shrink our window here.

Boom, found by name, awesome.

So that's by name, but what if I wanted to grab it by the tag name, right,

the tag name input.

Well, let's hit that documentation again, I think I saw that in there.

So By.name, partialLink, By.tagName.

But look at this, it's deprecated.

So it says locates an element with a given tag, this is what we want.

It says, instead use By.css(tagName).

So it's deprecated and that means it'll work now.

But in the future releases, it very well won't.

So let's go ahead and let's use that new version.

So let's see, so it says just use By.css(tag.Name), so we can do that.

Uh-oh, my spidey sense is going off.

Isn't there more than one input on the page?

Yeah, I think there must be, right?

There must be something more than just that input.

So let's go ahead and bring this up with Inspect.

So we've got the input here.

And this check box here, I think that this, yeah, look, it's also an input.

So there's a couple of options when you have this problem.

You could call a method named findElements.

Now note, the S there is making it plural.

It returns an array of WebElement, and you could loop through it and try and

suss out the right one, or let's do this.

So you might have noticed that on the WebElement object there's

also a findElement method.

What's cool about this is it searches only within the children of that element.

So what we could do first is we could find the form, could find this form, right?

And then find the input.

And because the form children only has one input and

it's not catching this other input down here, that would do it.

So let's find the form like we did before.

So we'll say driver.findElement and

we wanna get that by its ID and its ID was registrar.

And then let's just method chain our findElement to get the input tag.

So, again, we'll just do that, so we've got an element and

it has a findElement, right?

So we're gonna say, inside of the form let's find

the first tag that is input.

And we know there's only one right now, right?

And again, it said to use By.css instead of By.tagName.

So let's do that, let's go ahead, let's close this up.

And first, let's clear it.

Okay, so what that will do is that will erase everything that is in there, boom.

And then we will update one more time, and we'll do sendKeys.

And we'll say, let's see, Found form and

then found input by css.

So we did a chain find there.

Awesome, so again, first we found the form using the ID and

then we chained off of that form element and found the first input.

And then we chained off of that and called sendKeys on that input.

This kind of nested searching from one element to its children is quite common

and is a great way to avoid adding attributes to your markup.

You are now armed with how to find elements on your web page.

This is huge, this is the fundamental task that you need to know to start

automating with Selenium WebDriver.

As you'll soon see, after you've found the element,

interacting with it is extremely straightforward.

You've done the challenging part already.

Great job!

There are even more ways to locate elements.

And I suggest that you browse that By locator class API documentation.

I've linked to it in the teacher's notes.

Later in this course, we'll dive deeper into how to use the more advanced features

of the By.css class and the super powerful By.xpath features.

So let's recap some of the best practices that we just covered.

Keep your locator strategies concise.

The shorter, the better.

The less you have to specify, the better.

But you wanna make sure that you keep them unambiguous.

Like we saw, the locator can match multiple elements so

you need to make sure you're specifying the one that you intend.

But be careful to make sure that they remain reliable.

You don't wanna be so specific that things are fragile.

Your page is going to change.

You want to make sure that your locator survives the updates.

Selecting the proper element is a delicate art that you will get better at over time.

And we'll drop several more examples throughout this course.

Remember, you can add IDs to help make things concise.

Use them sparingly, as they pollute the global namespace and

can lose their reliabilities if your teammates don't understand their purpose.

And finally, remember that you don't need to locate your element in one fell swoop.

You can in fact chain finds, further narrowing the possible elements as you go.

So now that we have gained our element finding muscles,

let's start interacting with them.