1
00:00:00,380 --> 00:00:04,790
CSS selectors are super powerful for
making concise, specific, and

2
00:00:04,790 --> 00:00:06,500
understandable DOM queries.

3
00:00:06,500 --> 00:00:10,250
The more you get familiar with them,
the easier your automation will become.

4
00:00:10,250 --> 00:00:12,220
You'll find you can query
just about anything.

5
00:00:13,250 --> 00:00:16,320
We have quite a few courses
here just on CSS alone, so

6
00:00:16,320 --> 00:00:18,150
make sure to check those
in the teacher's notes.

7
00:00:18,150 --> 00:00:18,680
Ready?

8
00:00:18,680 --> 00:00:19,460
Let's get practicing.

9
00:00:21,120 --> 00:00:23,570
Okay, so I still have my browser open and

10
00:00:23,570 --> 00:00:28,520
I thought that we navigate around a bit
using the Finder in Chrome dev tools.

11
00:00:28,520 --> 00:00:31,683
So again, that's here in few,
it's a Cmd+F or

12
00:00:31,683 --> 00:00:35,090
Ctrl+F in the element tab and
we'll show this row.

13
00:00:36,700 --> 00:00:39,280
Things here.
All right, so

14
00:00:39,280 --> 00:00:43,130
what do you say that we get a whole of
this check box like we just did but

15
00:00:43,130 --> 00:00:47,450
we do it with CSS as opposed to the
chained finds that we have done before?

16
00:00:47,450 --> 00:00:49,460
So let's take a look on
how we could get in there.

17
00:00:49,460 --> 00:00:52,660
So first, it's inside of this div, right?

18
00:00:52,660 --> 00:00:57,363
It's inside of this div class main and
then, it's inside of this div, and

19
00:00:57,363 --> 00:00:59,810
then it's this checkbox.

20
00:00:59,810 --> 00:01:03,120
Let's start working from the top.

21
00:01:03,120 --> 00:01:07,950
So, the way that you specify
a class in CSS is with a dot.

22
00:01:07,950 --> 00:01:09,710
So, let's do .main.

23
00:01:09,710 --> 00:01:12,080
There we go.
So, we got that div.

24
00:01:12,080 --> 00:01:14,170
Okay?
And then we can just do input.

25
00:01:15,450 --> 00:01:20,628
Awesome, so that works, but look at this,
it's matching three, right?

26
00:01:20,628 --> 00:01:24,120
If I press this down arrow it will
show that I'm catching those that

27
00:01:24,120 --> 00:01:25,540
are in the other checkboxes.

28
00:01:25,540 --> 00:01:27,355
So, we don't want those.

29
00:01:27,355 --> 00:01:30,580
And just specifying that it's
kind of dangerous, right?

30
00:01:30,580 --> 00:01:33,500
Cuz we want just
specifically that checkbox.

31
00:01:33,500 --> 00:01:37,290
If we did find element, it would just
get that, but let's be more specific.

32
00:01:37,290 --> 00:01:40,410
So, it's inside of a div, so
it's div main class, it's inside of a div.

33
00:01:40,410 --> 00:01:42,930
So, let's go ahead and
try to do that let's say div.

34
00:01:44,197 --> 00:01:46,930
And that says one of one.

35
00:01:46,930 --> 00:01:48,610
So, let's read that.

36
00:01:48,610 --> 00:01:56,280
So what it says is for all elements with
the class of main find all descendant

37
00:01:56,280 --> 00:02:01,080
that are of div, and then of that find
all descendants that are of input.

38
00:02:01,080 --> 00:02:03,740
Now you might have noticed
that I said descendants.

39
00:02:03,740 --> 00:02:09,150
In CSS selectors they like to think
of HTML tree structure as a family.

40
00:02:09,150 --> 00:02:14,350
So the parent of the input box,
this input box here, is this div, right?

41
00:02:14,350 --> 00:02:15,590
It's parent.

42
00:02:15,590 --> 00:02:19,340
And this div has two children,
label and input, right?

43
00:02:19,340 --> 00:02:21,030
So it's like a family tree.

44
00:02:21,030 --> 00:02:26,430
So, I guess this would be the grandparent
but these are all descendants, right?

45
00:02:26,430 --> 00:02:28,910
Even if this was the grandparent,
these are the descendants.

46
00:02:28,910 --> 00:02:31,210
All of these fields here
are the descendants.

47
00:02:31,210 --> 00:02:35,440
So maybe we want to get a little
bit more specific about our tree.

48
00:02:35,440 --> 00:02:38,270
So we really only want this div here.

49
00:02:38,270 --> 00:02:42,355
If any other div was added anywhere in
the descendants of this main class,

50
00:02:42,355 --> 00:02:44,030
we'd end up selecting it.

51
00:02:44,030 --> 00:02:46,900
And we really only want
a direct child at will,

52
00:02:46,900 --> 00:02:49,620
like a direct child of this class main.

53
00:02:49,620 --> 00:02:52,710
Well, as you might have guess by now,
we can specify that.

54
00:02:52,710 --> 00:02:58,410
So, if between the main and
the div here, between this,

55
00:02:58,410 --> 00:03:02,640
if we add a greater than sign,
what that points out,

56
00:03:02,640 --> 00:03:05,190
let's get rid of this input so
we can show that it's selecting.

57
00:03:05,190 --> 00:03:08,382
What that points out is that
this is a direct child,

58
00:03:08,382 --> 00:03:12,031
this says from the class main
giving a direct child of div.

59
00:03:12,031 --> 00:03:16,100
And then within that div let's search for
input.

60
00:03:16,100 --> 00:03:18,960
And we can see over here that
it's only returning one.

61
00:03:18,960 --> 00:03:22,900
So, I'm gonna grab our selector here and
I'll put it in the code.

62
00:03:24,780 --> 00:03:29,783
We'll put it as a locator and
we'll call that

63
00:03:29,783 --> 00:03:35,052
toggleNoneRespondersVisiblity: By.css,

64
00:03:35,052 --> 00:03:38,747
I'll paste in our finder there.

65
00:03:38,747 --> 00:03:41,970
And now that we've got that locator,
let's use it.

66
00:03:41,970 --> 00:03:43,400
So, let's write a function so

67
00:03:43,400 --> 00:03:47,360
that we can abstract away the knowledge of
the page, just like we did for addInvitee.

68
00:03:47,360 --> 00:03:52,180
So we'll say function
toggleNonResponderVisibility,

69
00:03:52,180 --> 00:03:55,000
we used the same word there,
so that's a function, right?

70
00:03:55,000 --> 00:03:58,160
And we will go ahead and find the element.

71
00:03:59,285 --> 00:04:05,420
FindElement and we'll do
locators.toggleNonResponderVisibility and

72
00:04:05,420 --> 00:04:06,470
we will click that.

73
00:04:11,270 --> 00:04:12,130
Perfect.

74
00:04:13,170 --> 00:04:16,320
All right, so
then let's go ahead and recall that.

75
00:04:16,320 --> 00:04:21,148
We'll say toggleNonResponderVisibility,
and we'll call that function.

76
00:04:21,148 --> 00:04:21,981
Let's open this up.

77
00:04:21,981 --> 00:04:23,724
I'm gonna go ahead and close out.

78
00:04:23,724 --> 00:04:26,570
Looks like I have two of these running,
I'm gonna quit both of these.

79
00:04:28,590 --> 00:04:31,466
Those are kept separate from my other
Google Chrome that I have opened

80
00:04:31,466 --> 00:04:32,640
elsewhere.

81
00:04:32,640 --> 00:04:36,713
Okay, so, let's go ahead and I'll use
the up arrow, and I will kick that off.

82
00:04:36,713 --> 00:04:39,638
Let's move over to that, and here we go.

83
00:04:39,638 --> 00:04:41,850
And so, you'll notice that it's
checked just like we wanted.

84
00:04:41,850 --> 00:04:45,770
And there it is they're there,
they're just checking in there.

85
00:04:45,770 --> 00:04:46,650
Nice.

86
00:04:46,650 --> 00:04:48,320
So let's challenge ourselves a bit here.

87
00:04:48,320 --> 00:04:52,950
Let's see if we can get a handle
on this remove button, right?

88
00:04:52,950 --> 00:04:56,510
So first, let's just see what
the button CSS does, okay?

89
00:04:56,510 --> 00:04:58,880
So let's take a look, we'll inspect this.

90
00:05:00,890 --> 00:05:02,500
And I'll close this.

91
00:05:02,500 --> 00:05:05,592
Let's bring this down a little bit here.

92
00:05:05,592 --> 00:05:07,000
I'm going to search in here.

93
00:05:07,000 --> 00:05:09,080
I'm going to make this a little
bit bigger for everybody.

94
00:05:10,310 --> 00:05:12,938
All right, so we're looking for
this button and

95
00:05:12,938 --> 00:05:14,869
specifically this remove button.

96
00:05:14,869 --> 00:05:17,640
Okay, so first things that we need to
do is let's just try from the top, so

97
00:05:17,640 --> 00:05:18,690
we'll say it's a button.

98
00:05:19,800 --> 00:05:21,700
Okay, there's five buttons.

99
00:05:21,700 --> 00:05:24,950
Okay, it's also grabbing
the form registrar at the top.

100
00:05:24,950 --> 00:05:28,992
We don't want that, so we definitely
want it inside of this invited list, so

101
00:05:28,992 --> 00:05:30,060
let's build that.

102
00:05:30,060 --> 00:05:37,077
So we'll say invitedList as the ID,
and now we say button.

103
00:05:37,077 --> 00:05:38,380
Now there's only four,

104
00:05:38,380 --> 00:05:41,930
and it's the edit and the remove
of each of these, so that's good.

105
00:05:44,740 --> 00:05:49,420
So this says all descendants of
the invited list that are buttons,

106
00:05:49,420 --> 00:05:52,965
but there's four now, so
it has edit and remove.

107
00:05:52,965 --> 00:05:56,270
So there's a couple of ways that we
can find this, so let's explore a few.

108
00:05:56,270 --> 00:05:59,890
So, what we want is the element
that follows the edit button.

109
00:05:59,890 --> 00:06:02,730
Now this is called a sibling.

110
00:06:02,730 --> 00:06:03,960
That makes sense, right?

111
00:06:03,960 --> 00:06:08,310
This list item here is the parent,
and these are the children and

112
00:06:08,310 --> 00:06:10,020
these are siblings.

113
00:06:10,020 --> 00:06:12,510
They look like they get
along better than my kids.

114
00:06:12,510 --> 00:06:13,050
Okay, so

115
00:06:13,050 --> 00:06:16,870
if you want to get the next sibling
after the one that you have selected.

116
00:06:16,870 --> 00:06:19,120
So let's go ahead and
remember this is starting at here.

117
00:06:19,120 --> 00:06:23,087
So we'll say get the next sibling.

118
00:06:23,087 --> 00:06:25,326
There we go and this is awesome, right?

119
00:06:25,326 --> 00:06:26,980
Cuz there's two, there's only two.

120
00:06:26,980 --> 00:06:30,020
So both of those it's the next
sibling after the first button.

121
00:06:30,020 --> 00:06:32,630
So we have the remove
button which is awesome.

122
00:06:32,630 --> 00:06:35,750
So, another trick that we could do
instead of using the sibling there,

123
00:06:35,750 --> 00:06:38,900
is we can use what is
known as a pseudo class.

124
00:06:38,900 --> 00:06:43,750
Pseudo classes are keywords that you
can add a selector to specify a state.

125
00:06:43,750 --> 00:06:49,570
Now in our case, we want the last
button in each of these LIs.

126
00:06:49,570 --> 00:06:53,310
So what we can do is we can say,
invitedList button.

127
00:06:53,310 --> 00:06:58,230
So that's finding the first button, each
of these and we're gonna say last-child.

128
00:06:58,230 --> 00:07:01,760
And that does the same thing as
the following sibling was doing.

129
00:07:01,760 --> 00:07:04,220
So we get a hold of our remove buttons.

130
00:07:05,270 --> 00:07:10,770
So, CSS provides a wonderful concise way
to explain what you were trying to select.

131
00:07:10,770 --> 00:07:13,450
Now, I've put lots of great information
in the teacher's notes of this video.

132
00:07:13,450 --> 00:07:16,906
I want to make sure that you
know that selenium is using your

133
00:07:16,906 --> 00:07:18,401
browser's CSS engine.

134
00:07:18,401 --> 00:07:20,771
So, if you are driving an older browser,

135
00:07:20,771 --> 00:07:24,250
be cautious about what
selectors you are using.

136
00:07:24,250 --> 00:07:25,820
See the teacher's notes for
more on that concern.

137
00:07:27,630 --> 00:07:29,450
And one more thing that I wanted to add.

138
00:07:29,450 --> 00:07:32,800
If you want to test your selector's
programatically like in the console,

139
00:07:32,800 --> 00:07:33,950
you can do this.

140
00:07:33,950 --> 00:07:40,630
So let's go to the console and I can use
$$ and that will let me do a CSS selector.

141
00:07:40,630 --> 00:07:47,780
So #invitedList, button: last-child
using that pseudo selector there.

142
00:07:47,780 --> 00:07:50,270
If I do that it will return
those two buttons, right?

143
00:07:50,270 --> 00:07:54,180
And nice thing about Chrome is if I
highlight over it shows me what I got.

144
00:07:55,410 --> 00:07:57,780
Just a different way of doing it if you
don't want to use that search thing.

145
00:07:57,780 --> 00:08:02,359
So now let's say that I wanted to find
a specific list item by the specific

146
00:08:02,359 --> 00:08:03,570
content, right?

147
00:08:03,570 --> 00:08:06,114
Like let's say that I wanted
to grab Steve Hunter here and

148
00:08:06,114 --> 00:08:07,659
I wanted to click remove, right?

149
00:08:07,659 --> 00:08:09,120
Do you think we could do that?

150
00:08:10,350 --> 00:08:13,830
Well we can, and it's time to revisit
Xpath, right after this quick break.