More Locator Strategies

Okay, so now that we know that we really shouldn't be sprinkling IDs all over our 0:00 document, we need to come up with some better ways to approach this problem. 0:05 Let's take a look at what else we have available in the documentation. 0:09 So what I'm gonna do is I'm gonna navigate over to our By class here. 0:13 So let's go in here, in this By class, and 0:17 let's take a look at what else we have in these static functions here. 0:19 By.className, that's kinda nice. 0:23 So that's like a CSS class. 0:25 Let's see if our code has that. 0:26 So it does have a class on the wrapper, but our input file doesn't have that. 0:30 It does have this name attribute, which the form uses when it's submitted. 0:35 So let's look and see if that exists in here. 0:39 By.name, perfect. 0:45 The name attribute has the given value, awesome. 0:47 So let's use that, all form inputs have a name. 0:49 So let's go ahead and make sure that the workspace is loaded. 0:52 I'm gonna click this, cuz I've got a little surprise for you here. 0:56 So let's click this, we'll launch our preview here. 0:59 I'm gonna grab that URL one more time. 1:02 And to save us some time, 1:06 what I've done is I have written the code that you can just paste. 1:08 But it's gonna require you to, when you start this up, 1:13 we're gonna have to paste in an environment variable. 1:19 So that's gonna be URL=, and I'm gonna paste in what I just had. 1:22 So if you haven't seen this before, this pushes stuff into the environment and 1:26 you can then use it in your program. 1:30 It's a little bit different in Windows, so check the teacher's notes for that. 1:32 So I'm passing in my URL and now I'm gonna type node. 1:35 Then, in the teacher's notes below, 1:40 there is a string of text that you can copy for the command. 1:41 So I'm just gonna grab that, then copy it, and then I'm gonna paste it. 1:45 We have our app running, I'm gonna close this other one. 1:51 See, they keep on piling up. 1:54 So this is our new one here. 1:56 And see, what happened, in the code that was pasted out, 1:58 this process.env.URL that's what we set up here. 2:02 So as long as we set that, 2:05 now the reason why I had to do that was because mine is different than yours. 2:06 My workspace ID is different than what yours looks like. 2:09 So yours will look a little bit differently here, but it's now saved and 2:10 you can pass that through each time. 2:13 So we don't need to type all that beginning stuff again. 2:15 Okay, so let's get it by name. 2:18 So we'll say driver.findElement. 2:21 And remember, it's By.name. 2:24 Now, the name of the attribute is actually name, right? 2:28 So the value was name, because it's gathering the first name there. 2:33 Cool, so that found it. 2:39 And now, since we have it, instead of storing that in a variable, 2:41 what we can do is a thing called method chaining, all right? 2:44 So we know that that returns the element. 2:47 So now we can say sendKeys, and we'll say found by name. 2:49 See, what's happening here is it found the element and 2:56 then it's calling sendKeys on it. 2:58 So let's do this, let's bring that up so we can see it, shrink our window here. 3:01 Boom, found by name, awesome. 3:07 So that's by name, but what if I wanted to grab it by the tag name, right, 3:10 the tag name input. 3:15 Well, let's hit that documentation again, I think I saw that in there. 3:16 So By.name, partialLink, By.tagName. 3:21 But look at this, it's deprecated. 3:27 So it says locates an element with a given tag, this is what we want. 3:29 It says, instead use By.css(tagName). 3:32 So it's deprecated and that means it'll work now. 3:36 But in the future releases, it very well won't. 3:39 So let's go ahead and let's use that new version. 3:42 So let's see, so it says just use By.css(tag.Name), so we can do that. 3:46 Uh-oh, my spidey sense is going off. 3:52 Isn't there more than one input on the page? 3:55 Yeah, I think there must be, right? 3:58 There must be something more than just that input. 4:01 So let's go ahead and bring this up with Inspect. 4:03 So we've got the input here. 4:10 And this check box here, I think that this, yeah, look, it's also an input. 4:13 So there's a couple of options when you have this problem. 4:21 You could call a method named findElements. 4:23 Now note, the S there is making it plural. 4:27 It returns an array of WebElement, and you could loop through it and try and 4:29 suss out the right one, or let's do this. 4:34 So you might have noticed that on the WebElement object there's 4:36 also a findElement method. 4:39 What's cool about this is it searches only within the children of that element. 4:42 So what we could do first is we could find the form, could find this form, right? 4:46 And then find the input. 4:53 And because the form children only has one input and 4:55 it's not catching this other input down here, that would do it. 4:58 So let's find the form like we did before. 5:03 So we'll say driver.findElement and 5:06 we wanna get that by its ID and its ID was registrar. 5:12 And then let's just method chain our findElement to get the input tag. 5:18 So, again, we'll just do that, so we've got an element and 5:24 it has a findElement, right? 5:27 So we're gonna say, inside of the form let's find 5:28 the first tag that is input. 5:33 And we know there's only one right now, right? 5:38 And again, it said to use By.css instead of By.tagName. 5:41 So let's do that, let's go ahead, let's close this up. 5:45 And first, let's clear it. 5:50 Okay, so what that will do is that will erase everything that is in there, boom. 5:53 And then we will update one more time, and we'll do sendKeys. 5:59 And we'll say, let's see, Found form and 6:06 then found input by css. 6:11 So we did a chain find there. 6:14 Awesome, so again, first we found the form using the ID and 6:17 then we chained off of that form element and found the first input. 6:22 And then we chained off of that and called sendKeys on that input. 6:28 This kind of nested searching from one element to its children is quite common 6:32 and is a great way to avoid adding attributes to your markup. 6:36 You are now armed with how to find elements on your web page. 6:40 This is huge, this is the fundamental task that you need to know to start 6:43 automating with Selenium WebDriver. 6:47 As you'll soon see, after you've found the element, 6:50 interacting with it is extremely straightforward. 6:52 You've done the challenging part already. 6:55 Great job! 6:57 There are even more ways to locate elements. 6:58 And I suggest that you browse that By locator class API documentation. 7:01 I've linked to it in the teacher's notes. 7:05 Later in this course, we'll dive deeper into how to use the more advanced features 7:07 of the By.css class and the super powerful By.xpath features. 7:10 So let's recap some of the best practices that we just covered. 7:15 Keep your locator strategies concise. 7:19 The shorter, the better. 7:22 The less you have to specify, the better. 7:23 But you wanna make sure that you keep them unambiguous. 7:26 Like we saw, the locator can match multiple elements so 7:30 you need to make sure you're specifying the one that you intend. 7:33 But be careful to make sure that they remain reliable. 7:37 You don't wanna be so specific that things are fragile. 7:41 Your page is going to change. 7:44 You want to make sure that your locator survives the updates. 7:46 Selecting the proper element is a delicate art that you will get better at over time. 7:50 And we'll drop several more examples throughout this course. 7:54 Remember, you can add IDs to help make things concise. 7:57 Use them sparingly, as they pollute the global namespace and 8:01 can lose their reliabilities if your teammates don't understand their purpose. 8:04 And finally, remember that you don't need to locate your element in one fell swoop. 8:08 You can in fact chain finds, further narrowing the possible elements as you go. 8:13 So now that we have gained our element finding muscles, 8:18 let's start interacting with them. 8:20