Locating by ID

We found our element to interact with but our locator was way too specific. 0:00 Any change to the page can potentially break our ability to access that element. 0:05 Now detailed knowledge about the structure of the layout of the page 0:09 is definitely an automation anti-pattern. 0:13 You want to be as specific as you can be, but not as rigid 0:16 as to require the entire structure of the document to remain unchanged. 0:19 If you fall into that trap, 0:23 any change to the layout of your page breaks the locator strategy. 0:25 This how do I be specific about an element without 0:29 relying on the page structure problem is actually quite common. 0:33 We see this a lot in both CSS and 0:37 JavaScript in the DOM, or document object model. 0:39 We want to be able to specify the exact element that we're talking about. 0:43 Now a typical solution to this is to add an identifier to your element. 0:47 In HTML, we do this with the id attribute. 0:51 Then in CSS, we can reference it with the id selector or 0:54 we could use get element= by id in JavaScript. 0:58 So the good news is, most of the time, the page you are trying to automate is 1:01 already setup to have easily locatable elements. 1:05 Because others have needed to access things either for style or interactivity. 1:08 Selenium allows you to leverage that work. 1:13 Why don't we take a look at accessing these elements by their identifier? 1:16 Okay, so let's start by looking at the layout of our page. 1:20 Well first, is your server running? 1:23 [LAUGH] It's sounds like that old prank call, doesn't it? 1:25 You better go catch it. 1:28 So mine isn't, so I'm gonna click Continue Working. 1:29 And I'm gonna choose Reload. 1:31 And this should be enough to start our preview up and running again. 1:33 All right, so I'm going to flip back and let's go back to our ripple. 1:38 And we'll say, node get that up and running. 1:46 And I'm gonna again press the up arrow. 1:48 Let's bring in Selenium and let's also bring in By over here. 1:51 And then we will go ahead and might as well set our url. 1:57 And let's get the driver built, so 2:05 we're gonna build the driver using the builder pattern there. 2:08 And then we are going to, 2:11 and you saw it pop up behind there, let's go ahead and open up our page. 2:13 Okay, now let's try to see what sort of id we have. 2:18 So we're looking again, we're looking at this text input. 2:22 So right click and Inspect, okay, I'm gonna look at the Elements tab here. 2:24 I'm gonna close this, let's go ahead and bring this down here. 2:29 And I'm gonna pop this up for visibility purposes. 2:35 Okay so we've got an id, not on the input tag, but 2:39 we do have one on the form tag here, so it has an id. 2:42 So, let's see what that looks like, so let's flip back over to our code here. 2:47 So what we'll do is we'll make a new variable called form. 2:50 And we will use the find element method of the driver. 2:55 And our locator strategy this time is going to be using By. 2:59 And there's another method here, named id, and it takes the id. 3:03 And again, that id, let's flip back real quick and make sure that id was registrar. 3:11 So we should be able to get a hold of that by ID registrar. 3:16 Cool, so now we have a form element. 3:22 Well, eventually, remember this is a premise. 3:26 But it is in our field, so we can't just send keys to the form, but 3:29 what could we do with this element, we have a hold of it. 3:34 So this is a great time to look at the documentation. 3:37 Let's do a search for Selenium WebDriver API. 3:39 And I'm just gonna throw on a JS there just to make sure 3:47 we get the one that we're talking about. 3:50 Cuz remember, there's a bunch of different languages for it. 3:51 So I"m gonna click this selenium-webdriver one right here, awesome. 3:54 Let's open up these modules here, and if you click the selenium-webdriver, 4:00 this will show all of the documentation here and they're pretty great. 4:04 You can see here that if you scroll down, we have this WebElementPromise. 4:09 And that's what we have, let's click into that. 4:14 If we scroll down, you'll see that it has some methods, right? 4:16 So, you can cancel or click or find, get an attribute. 4:19 So, let's see, which one we can do here? 4:25 Here's getTagName, let's go ahead and if we click it will open up and 4:28 will tell you what it does. 4:31 So it says it schedules a command to query for the tag/node name of this element. 4:32 Awesome, so that's the tag name. 4:39 So the tag name should be form, right? 4:40 But let's look, in this case, this is saying that it returns a Thenable, so 4:43 that's a promise, okay? 4:47 And it's probably like you're usually accustomed to. 4:49 So, what happens is you call the function this getTagName, and it returns a promise. 4:52 And see how it's a Thenable of type string. 4:57 So that string is gonna be the name. 5:00 So, to get access to that value, you need to call and 5:03 then provide it a function, so let's do that. 5:07 So we're gonna get the tag name for the form that we got. 5:10 So let's come back to where we're at, here we are. 5:14 So we're gonna say form.getTagName, okay? 5:16 And again, that returns a promise. 5:22 So a promise has a then on it, okay? 5:25 So after it's gone and gotten the tag name, it's gonna call a function for us. 5:27 Now we're gonna use the arrow function syntax. 5:31 If this is new to you, check the teacher's notes. 5:34 So the function expects a string called name and 5:36 then we're just gonna print it out. 5:41 We'll say console.log("Tag 5:42 name is " + name)). 5:47 Make sure we close that out properly, awesome. 5:52 So tag name is form, cool, there's our value. 5:56 So let's look at another one really quick, let's flip back to that doc. 6:00 So let's say, get Let's see, there's text, getSize, that's fun, so let's do this. 6:03 So it's Thenable that returns an object that has a height and a width. 6:11 And it computes the size of the elements bounding box in pixels. 6:16 Well, that's pretty cool right, so let's try that. 6:19 Let's go back to our form, we'll say form.getSize. 6:23 And again, it returns a promise, it's a thenable. 6:30 And the size object, 6:33 it's gonna be an object that has a height and width on there. 6:35 So we'll say console.dir(size), cuz we'll wanna spit that out so 6:37 it looks a little bit prettier. 6:41 So then, and look at that, so, the size of the form is 54 by 520. 6:43 It looks like it has some other information in here, it's not filled out. 6:49 Okay, so we still need to get to our input field though, right? 6:51 We need get here, how can we do that? 6:56 Well, you know what, I do have access to that source. 7:01 Why don't I just go in there and add my ID, right? 7:04 I mean, what could go wrong? 7:06 So I am gonna come in here. 7:07 Here's our input type I'm just gonna go ahead and I'm gonna say id="invitee". 7:09 Cool and then if I come back here and I can just go get that, right? 7:15 It looks pretty easy so we'll 7:21 say const field = driver.findElement. 7:25 And again, we want to find it by id, and 7:30 the id that we just added is called invitee. 7:34 So it should fail now, right, because the document's open, so it can't find it. 7:37 So wow, that failed really hard. 7:42 So it says, no such element: Unable to locate element. 7:44 ID invitee. 7:49 Ok, so, it can't find that, so. 7:50 Let's go ahead and, I'm gonna go ahead and, see, left this thing up and running. 7:52 And these will start piling up here. 7:56 Let's go ahead and let's close this. 7:59 And I'll start things up again. 8:04 Boy, we need to do something about this, don't we? 8:06 Selenium and we're gonna go ahead and 8:10 build the driver we need to make sure that we get by here. 8:13 There's our by, and then we need to do the builder, we've got the builder already. 8:18 We need to get the url which we haven't set yet, so we need to set the url. 8:24 Now we can do driver.get (url), okay, so now our page is open again. 8:31 And I wanna try and find that field, there we go. 8:36 Field = driver.findElement(By.id"invitee"));. 8:39 And it should be there now, because the page just refreshed, right? 8:42 Okay, so now we've got the field, and let's do our trick there. 8:46 And we can say field.sendKeys("Found by id"), boom, we did it. 8:52 Now, before we go celebrating too much, 9:01 I kinda led you down a path towards a bad practice. 9:04 Adding specific attributes for automation purposes 9:07 only is a common trap that people just getting started tend to fall into. 9:10 So I wanted to walk you through it, sorry for misleading a little bit. 9:14 But let's think this through, 9:18 we don't really wanna add an id to every element, do we? 9:19 First off, you might not have access to make the modifications to the source, 9:23 like we just did. 9:26 Maybe you're on a team that doesn't have the ability to make those kind of changes. 9:27 And second, it's a lot of work, imagine all those ids that you'd have to create. 9:31 You'll find that when working on a team that relying on ids that you created 9:37 might mean that people using them for CSS won't understand what they're for and 9:41 [SOUND] remove them. 9:46 If you need another reason to avoid using ids just for locator purposes, 9:47 this will probably seal the deal. 9:52 One thing you might not realize is that elements with the id 9:54 attribute actually pollute the global name space. 9:58 Here, let me show you real quick, so I'm wanna go ahead and 10:00 open up, let's full screen this. 10:04 I'm gonna go ahead and open up our Tools, I'm going to Inspect this element. 10:06 I'm gonna flip over to the console here and close this. 10:12 So, you probably know that already, with JavaScript, 10:18 we could say document.getElementbyId and it has an invitee right? 10:22 Check this out, if I do window.invitee, look at that. 10:31 Also, it's available on the window. 10:38 That means that a variable was created just to store that element. 10:41 And because window is in the default scope, 10:46 we also just have a plain old variable called invitee. 10:49 Just available, yeah, there is, 10:53 let's remove that id and be a good teammate and a good JavaScript citizen. 10:56 So I'm gonna get rid of that id that we added. 11:01 Save that, now in order to get at that unidentified input element, 11:07 we're going to need to explore a few more locator strategies. 11:11 Let's do just that right after this quick break. 11:16