Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS matchers give Selenium WebDriver the ability to search the DOM using complex criteria. In this video we will cover how to construct complex queries using CSS and to discuss what we can do with CSS that could not be done with previous finders
Learn more
Concerns
If you are not sure if the browser you are testing supports your pseudo-class you can check on Can I Use. For instance, if you wanted to check the is the :valid pseudo class, you'd search for it. The Mozilla Developer Network also provides Browser Compatibility tables.
CSS selectors are super powerful for
making concise, specific, and
0:00
understandable DOM queries.
0:04
The more you get familiar with them,
the easier your automation will become.
0:06
You'll find you can query
just about anything.
0:10
We have quite a few courses
here just on CSS alone, so
0:13
make sure to check those
in the teacher's notes.
0:16
Ready?
0:18
Let's get practicing.
0:18
Okay, so I still have my browser open and
0:21
I thought that we navigate around a bit
using the Finder in Chrome dev tools.
0:23
So again, that's here in few,
it's a Cmd+F or
0:28
Ctrl+F in the element tab and
we'll show this row.
0:31
Things here.
All right, so
0:36
what do you say that we get a whole of
this check box like we just did but
0:39
we do it with CSS as opposed to the
chained finds that we have done before?
0:43
So let's take a look on
how we could get in there.
0:47
So first, it's inside of this div, right?
0:49
It's inside of this div class main and
then, it's inside of this div, and
0:52
then it's this checkbox.
0:57
Let's start working from the top.
0:59
So, the way that you specify
a class in CSS is with a dot.
1:03
So, let's do .main.
1:07
There we go.
So, we got that div.
1:09
Okay?
And then we can just do input.
1:12
Awesome, so that works, but look at this,
it's matching three, right?
1:15
If I press this down arrow it will
show that I'm catching those that
1:20
are in the other checkboxes.
1:24
So, we don't want those.
1:25
And just specifying that it's
kind of dangerous, right?
1:27
Cuz we want just
specifically that checkbox.
1:30
If we did find element, it would just
get that, but let's be more specific.
1:33
So, it's inside of a div, so
it's div main class, it's inside of a div.
1:37
So, let's go ahead and
try to do that let's say div.
1:40
And that says one of one.
1:44
So, let's read that.
1:46
So what it says is for all elements with
the class of main find all descendant
1:48
that are of div, and then of that find
all descendants that are of input.
1:56
Now you might have noticed
that I said descendants.
2:01
In CSS selectors they like to think
of HTML tree structure as a family.
2:03
So the parent of the input box,
this input box here, is this div, right?
2:09
It's parent.
2:14
And this div has two children,
label and input, right?
2:15
So it's like a family tree.
2:19
So, I guess this would be the grandparent
but these are all descendants, right?
2:21
Even if this was the grandparent,
these are the descendants.
2:26
All of these fields here
are the descendants.
2:28
So maybe we want to get a little
bit more specific about our tree.
2:31
So we really only want this div here.
2:35
If any other div was added anywhere in
the descendants of this main class,
2:38
we'd end up selecting it.
2:42
And we really only want
a direct child at will,
2:44
like a direct child of this class main.
2:46
Well, as you might have guess by now,
we can specify that.
2:49
So, if between the main and
the div here, between this,
2:52
if we add a greater than sign,
what that points out,
2:58
let's get rid of this input so
we can show that it's selecting.
3:02
What that points out is that
this is a direct child,
3:05
this says from the class main
giving a direct child of div.
3:08
And then within that div let's search for
input.
3:12
And we can see over here that
it's only returning one.
3:16
So, I'm gonna grab our selector here and
I'll put it in the code.
3:18
We'll put it as a locator and
we'll call that
3:24
toggleNoneRespondersVisiblity: By.css,
3:29
I'll paste in our finder there.
3:35
And now that we've got that locator,
let's use it.
3:38
So, let's write a function so
3:41
that we can abstract away the knowledge of
the page, just like we did for addInvitee.
3:43
So we'll say function
toggleNonResponderVisibility,
3:47
we used the same word there,
so that's a function, right?
3:52
And we will go ahead and find the element.
3:55
FindElement and we'll do
locators.toggleNonResponderVisibility and
3:59
we will click that.
4:05
Perfect.
4:11
All right, so
then let's go ahead and recall that.
4:13
We'll say toggleNonResponderVisibility,
and we'll call that function.
4:16
Let's open this up.
4:21
I'm gonna go ahead and close out.
4:21
Looks like I have two of these running,
I'm gonna quit both of these.
4:23
Those are kept separate from my other
Google Chrome that I have opened
4:28
elsewhere.
4:31
Okay, so, let's go ahead and I'll use
the up arrow, and I will kick that off.
4:32
Let's move over to that, and here we go.
4:36
And so, you'll notice that it's
checked just like we wanted.
4:39
And there it is they're there,
they're just checking in there.
4:41
Nice.
4:45
So let's challenge ourselves a bit here.
4:46
Let's see if we can get a handle
on this remove button, right?
4:48
So first, let's just see what
the button CSS does, okay?
4:52
So let's take a look, we'll inspect this.
4:56
And I'll close this.
5:00
Let's bring this down a little bit here.
5:02
I'm going to search in here.
5:05
I'm going to make this a little
bit bigger for everybody.
5:07
All right, so we're looking for
this button and
5:10
specifically this remove button.
5:12
Okay, so first things that we need to
do is let's just try from the top, so
5:14
we'll say it's a button.
5:17
Okay, there's five buttons.
5:19
Okay, it's also grabbing
the form registrar at the top.
5:21
We don't want that, so we definitely
want it inside of this invited list, so
5:24
let's build that.
5:28
So we'll say invitedList as the ID,
and now we say button.
5:30
Now there's only four,
5:37
and it's the edit and the remove
of each of these, so that's good.
5:38
So this says all descendants of
the invited list that are buttons,
5:44
but there's four now, so
it has edit and remove.
5:49
So there's a couple of ways that we
can find this, so let's explore a few.
5:52
So, what we want is the element
that follows the edit button.
5:56
Now this is called a sibling.
5:59
That makes sense, right?
6:02
This list item here is the parent,
and these are the children and
6:03
these are siblings.
6:08
They look like they get
along better than my kids.
6:10
Okay, so
6:12
if you want to get the next sibling
after the one that you have selected.
6:13
So let's go ahead and
remember this is starting at here.
6:16
So we'll say get the next sibling.
6:19
There we go and this is awesome, right?
6:23
Cuz there's two, there's only two.
6:25
So both of those it's the next
sibling after the first button.
6:26
So we have the remove
button which is awesome.
6:30
So, another trick that we could do
instead of using the sibling there,
6:32
is we can use what is
known as a pseudo class.
6:35
Pseudo classes are keywords that you
can add a selector to specify a state.
6:38
Now in our case, we want the last
button in each of these LIs.
6:43
So what we can do is we can say,
invitedList button.
6:49
So that's finding the first button, each
of these and we're gonna say last-child.
6:53
And that does the same thing as
the following sibling was doing.
6:58
So we get a hold of our remove buttons.
7:01
So, CSS provides a wonderful concise way
to explain what you were trying to select.
7:05
Now, I've put lots of great information
in the teacher's notes of this video.
7:10
I want to make sure that you
know that selenium is using your
7:13
browser's CSS engine.
7:16
So, if you are driving an older browser,
7:18
be cautious about what
selectors you are using.
7:20
See the teacher's notes for
more on that concern.
7:24
And one more thing that I wanted to add.
7:27
If you want to test your selector's
programatically like in the console,
7:29
you can do this.
7:32
So let's go to the console and I can use
$$ and that will let me do a CSS selector.
7:33
So #invitedList, button: last-child
using that pseudo selector there.
7:40
If I do that it will return
those two buttons, right?
7:47
And nice thing about Chrome is if I
highlight over it shows me what I got.
7:50
Just a different way of doing it if you
don't want to use that search thing.
7:55
So now let's say that I wanted to find
a specific list item by the specific
7:57
content, right?
8:02
Like let's say that I wanted
to grab Steve Hunter here and
8:03
I wanted to click remove, right?
8:06
Do you think we could do that?
8:07
Well we can, and it's time to revisit
Xpath, right after this quick break.
8:10
You need to sign up for Treehouse in order to download course files.
Sign up