CSS selectors are super powerful for making concise, specific, and

understandable DOM queries.

The more you get familiar with them, the easier your automation will become.

You'll find you can query just about anything.

We have quite a few courses here just on CSS alone, so

make sure to check those in the teacher's notes.

Ready?

Let's get practicing.

Okay, so I still have my browser open and

I thought that we navigate around a bit using the Finder in Chrome dev tools.

So again, that's here in few, it's a Cmd+F or

Ctrl+F in the element tab and we'll show this row.

Things here. All right, so

what do you say that we get a whole of this check box like we just did but

we do it with CSS as opposed to the chained finds that we have done before?

So let's take a look on how we could get in there.

So first, it's inside of this div, right?

It's inside of this div class main and then, it's inside of this div, and

then it's this checkbox.

Let's start working from the top.

So, the way that you specify a class in CSS is with a dot.

So, let's do .main.

There we go. So, we got that div.

Okay? And then we can just do input.

Awesome, so that works, but look at this, it's matching three, right?

If I press this down arrow it will show that I'm catching those that

are in the other checkboxes.

So, we don't want those.

And just specifying that it's kind of dangerous, right?

Cuz we want just specifically that checkbox.

If we did find element, it would just get that, but let's be more specific.

So, it's inside of a div, so it's div main class, it's inside of a div.

So, let's go ahead and try to do that let's say div.

And that says one of one.

So, let's read that.

So what it says is for all elements with the class of main find all descendant

that are of div, and then of that find all descendants that are of input.

Now you might have noticed that I said descendants.

In CSS selectors they like to think of HTML tree structure as a family.

So the parent of the input box, this input box here, is this div, right?

It's parent.

And this div has two children, label and input, right?

So it's like a family tree.

So, I guess this would be the grandparent but these are all descendants, right?

Even if this was the grandparent, these are the descendants.

All of these fields here are the descendants.

So maybe we want to get a little bit more specific about our tree.

So we really only want this div here.

If any other div was added anywhere in the descendants of this main class,

we'd end up selecting it.

And we really only want a direct child at will,

like a direct child of this class main.

Well, as you might have guess by now, we can specify that.

So, if between the main and the div here, between this,

if we add a greater than sign, what that points out,

let's get rid of this input so we can show that it's selecting.

What that points out is that this is a direct child,

this says from the class main giving a direct child of div.

And then within that div let's search for input.

And we can see over here that it's only returning one.

So, I'm gonna grab our selector here and I'll put it in the code.

We'll put it as a locator and we'll call that

toggleNoneRespondersVisiblity: By.css,

I'll paste in our finder there.

And now that we've got that locator, let's use it.

So, let's write a function so

that we can abstract away the knowledge of the page, just like we did for addInvitee.

So we'll say function toggleNonResponderVisibility,

we used the same word there, so that's a function, right?

And we will go ahead and find the element.

FindElement and we'll do locators.toggleNonResponderVisibility and

we will click that.

Perfect.

All right, so then let's go ahead and recall that.

We'll say toggleNonResponderVisibility, and we'll call that function.

Let's open this up.

I'm gonna go ahead and close out.

Looks like I have two of these running, I'm gonna quit both of these.

Those are kept separate from my other Google Chrome that I have opened

elsewhere.

Okay, so, let's go ahead and I'll use the up arrow, and I will kick that off.

Let's move over to that, and here we go.

And so, you'll notice that it's checked just like we wanted.

And there it is they're there, they're just checking in there.

Nice.

So let's challenge ourselves a bit here.

Let's see if we can get a handle on this remove button, right?

So first, let's just see what the button CSS does, okay?

So let's take a look, we'll inspect this.

And I'll close this.

Let's bring this down a little bit here.

I'm going to search in here.

I'm going to make this a little bit bigger for everybody.

All right, so we're looking for this button and

specifically this remove button.

Okay, so first things that we need to do is let's just try from the top, so

we'll say it's a button.

Okay, there's five buttons.

Okay, it's also grabbing the form registrar at the top.

We don't want that, so we definitely want it inside of this invited list, so

let's build that.

So we'll say invitedList as the ID, and now we say button.

Now there's only four,

and it's the edit and the remove of each of these, so that's good.

So this says all descendants of the invited list that are buttons,

but there's four now, so it has edit and remove.

So there's a couple of ways that we can find this, so let's explore a few.

So, what we want is the element that follows the edit button.

Now this is called a sibling.

That makes sense, right?

This list item here is the parent, and these are the children and

these are siblings.

They look like they get along better than my kids.

Okay, so

if you want to get the next sibling after the one that you have selected.

So let's go ahead and remember this is starting at here.

So we'll say get the next sibling.

There we go and this is awesome, right?

Cuz there's two, there's only two.

So both of those it's the next sibling after the first button.

So we have the remove button which is awesome.

So, another trick that we could do instead of using the sibling there,

is we can use what is known as a pseudo class.

Pseudo classes are keywords that you can add a selector to specify a state.

Now in our case, we want the last button in each of these LIs.

So what we can do is we can say, invitedList button.

So that's finding the first button, each of these and we're gonna say last-child.

And that does the same thing as the following sibling was doing.

So we get a hold of our remove buttons.

So, CSS provides a wonderful concise way to explain what you were trying to select.

Now, I've put lots of great information in the teacher's notes of this video.

I want to make sure that you know that selenium is using your

browser's CSS engine.

So, if you are driving an older browser,

be cautious about what selectors you are using.

See the teacher's notes for more on that concern.

And one more thing that I wanted to add.

If you want to test your selector's programatically like in the console,

you can do this.

So let's go to the console and I can use $$ and that will let me do a CSS selector.

So #invitedList, button: last-child using that pseudo selector there.

If I do that it will return those two buttons, right?

And nice thing about Chrome is if I highlight over it shows me what I got.

Just a different way of doing it if you don't want to use that search thing.

So now let's say that I wanted to find a specific list item by the specific

content, right?

Like let's say that I wanted to grab Steve Hunter here and

I wanted to click remove, right?

Do you think we could do that?

Well we can, and it's time to revisit Xpath, right after this quick break.