Upping Your CSS Selector Game

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