Interacting with Elements

All right, the moment that you've all been waiting for, interaction. 0:00 Let's interact with the RSVP form to see if we can't add some invitees. 0:03 Okay, I'm gonna make sure that my server is running, and then I'm gonna go over and 0:08 use the up arrow, and get my environment variable set to my URL, and 0:12 I'm gonna open up that ripple. 0:17 Then from the teacher's notes, attach this one too, I have a little script that will 0:19 get our page open for us, so we can start working right away. 0:23 So I'm gonna copy that. 0:26 Paste it, and when we press Enter, we'll open up our new window. 0:29 So here's our window. 0:34 All right, so for this, what we wanna do is we want to fill in a first 0:36 name here and then we wanna click this Submit button, we wanna submit the form. 0:41 So first, I need to get a handle on the form. 0:45 So remember, I'm gonna make a new variable, 0:47 const form, and how did we do that before? 0:51 The form had an ID, but you know what? 0:55 I'll tell you what. 0:58 Why don't you try? 1:00 How about you pause me, and you practice getting a handle on the form, and 1:00 then un-pause me and I'll show you how I did it. 1:04 Go ahead, pause me now. 1:06 Ready? 1:09 Now, this is how I did it. 1:10 So I did it using the by ID locator. 1:11 So we say driver.findElement and it has an ID of registrar. 1:14 Okay, and now the form variable is set. 1:24 Okay, and so 1:26 now what we wanna do is we want to find the field with the name of name. 1:26 [LAUGH] Say that ten times fast. 1:31 The field with the name of name. 1:33 So good thing we have a handle, that specific form that we want, 1:35 because I'm sure that name is a common field name. 1:37 We can actually search from within our form, remember? 1:41 So let's do that. 1:45 So we'll do form.findElement, 1:47 and we'll do By.name. 1:52 Cool, and then I can chain right? 1:56 Cuz I don't need to store that. 1:58 And I'll say sendKeys, and we'll send them my name. 1:59 Make sure we got that right, boom. 2:05 Okay, so let's get a hold of that button. 2:09 Let's take a look and let's look at what's going on with this button here. 2:13 Okay, let's pump this up a little bit. 2:17 Inside of the form, it is the first button, right? 2:22 It is the only button that's in this form. 2:25 So we can do a findElement on that, right? 2:27 So let's do that. 2:31 Let's go here. 2:32 I'm gonna close this so we get a better view. 2:33 Let's go here and 2:37 we'll say form.findElement cuz it's inside that form still. 2:38 We wanna find it by tag name, but remember, that was deprecated. 2:44 So we'll do By.cssbutton, you just do the name of the tag there. 2:47 All right, so we also don't need to store that one, right? 2:51 We're just gonna chain off of that. 2:54 We got a hold of it and we were gonna click it. 2:55 Boom, look at that. 3:00 See how this element is down here now? 3:02 And look, this element has a button. 3:04 So good thing we were inside of the form that we were searching, 3:06 otherwise there would have been multiple buttons. 3:09 It would have been confusing. 3:11 But because like what we did, we did that, it was inside the form find.Element. 3:13 It was only searching inside of there. 3:18 So making up fake data to use is fun and 3:20 you get a bunch of names like Test McTesterson sort of thing. 3:23 But I thought I'd do the lazy thing and just send out a tweet 3:26 to my followers on Twitter and ask if anybody wanted to be in here. 3:30 So let me show you what that tweet looked like really quick. 3:34 Just sent one of these out, and I got a bunch of names in. 3:37 And actually, it worked out pretty good because some people's names are very long, 3:40 and it actually broke the formatting, I think, we'll see. 3:44 So all right, so let's do this. 3:49 So using those names, I'd like to show off a shortcut for form submission. 3:50 So let's add another name. 3:54 So I'm gonna use the up arrow, and 3:55 instead of my name here, let's put in Zee Alexander. 3:57 Awesome, so there's Zee, and now remember we still have access to the form. 4:03 Well the form has a handy feature called submit, okay? 4:07 So if I click Submit, it's gonna go ahead and find that button for me and click it. 4:14 We didn't need to do all that work that we did before. 4:18 And actually, you don't even need to have access to the form, right? 4:20 So let's do this one more time. 4:24 So let's go, let's add another name here. 4:25 Let's add Jonathan. 4:27 So we'll add Jonathan Grieve, he's looking forward to being famous. 4:29 So we'll go ahead and we'll send the keys there. 4:35 And then, actually, I don't even need to have access to the form. 4:37 I can just do, from the element, this is the element here. 4:41 I could say submit and it automatically added him. 4:44 So now we've got three people coming to this party. 4:47 What a nice tree house party. 4:50 Now sometimes what will happen is you'll run into situations where you wanna 4:51 get values from the page. 4:56 Now a common example of this is you wanna check what the display header is. 4:57 So maybe you're in a test and 5:00 you wanna make sure the header changed to the right thing. 5:01 So what we can do, let's go ahead, let's look here. 5:03 So this is underneath an h1, if we look at the code. 5:06 Let's look at the code really quick. 5:10 The h1 here, so it says h1 RSVP. 5:11 So we wanna get the text here. 5:13 Let's just assume that we were in an application, we really wanted to get that. 5:15 I just wanna show this off real quick. 5:18 So let's see if we can't grab what is in the h1 of this page. 5:19 So let's go ahead, let's take a look at that help really quick. 5:23 So here is a WebElementPromise, so 5:27 we can get a hold of one of those web elements, okay? 5:29 And then, let's see what we have in here. 5:32 We have getText, so that will get the inside text. 5:35 So let's take a look what it says. 5:38 Says gets the visible, not hidden by CSS, that's important. 5:40 The inner text of this element including sub-elements without any leading or 5:44 trailing whitespaces. 5:47 That's really nice, so it shortens everything in there. 5:48 So let's go ahead, let's see if we can't find that. 5:50 So let's say we wanna do driver.findElement, 5:53 and we know that it's an h1, right? 5:57 And there's only one of those so 5:59 we're gonna say By.css, and the tag name is h1, right? 6:01 And we're gonna get the text from that and that returned a thenable. 6:06 That returned a thenable so we need to call then on it and 6:12 it returns, it expects a function that takes a string. 6:14 So let's do that. 6:19 So getText, we need to call then on it and after it's found it, 6:21 it's gonna call this function and it's gonna pass the text in to the function, 6:25 to this callback function, right? 6:29 So I'm gonna say txt and then we'll just print it out here on the line. 6:31 So we'll say console.log txt. 6:36 Okay, so this is again that arrow function. 6:41 So we're defining a function that takes one parameter, and 6:43 when then is called, it's gonna pass that in, all right? 6:48 So bam there it is, RSVP awesome. 6:51 You might also want to check and 6:54 see if code is working the way that you intend it to. 6:55 So when I click this confirmed checkbox here, do you see how nice the styling is? 6:58 It gets blue around there, right? 7:03 See the blue? 7:05 The confirm turns blue and it turns blue. 7:06 Let's see what's doing that. 7:08 Let's go ahead and let's inspect this element, and 7:10 here I see that there's this li class of responded which I'm assuming is confirmed. 7:14 Yeah, so when I click that, see it's going in and out. 7:19 So that's what's setting that. 7:21 Let's see if we can't get access to this list item here, all right? 7:24 So what we'll do is, let's see, let's see what that is again. 7:28 So we've got a list item and it's inside of ul with invitedList. 7:34 So we've got a ID that we can grab and then we can just get this li. 7:39 Let's just get this first one here and see if we can't get some information about it. 7:43 So we'll get access to this list item. 7:46 Okay, let's do it. 7:48 All right, so first we need to find the invited list. 7:49 So let's just say invitedList = driver.findElement, 7:54 and that one has an id. 8:00 So that's super easy to get at, right? 8:02 So we'll say invitedList. 8:03 Now I wanna grab the first list item. 8:08 Now even though there may be multiple matches for a locator, 8:11 I'm gonna use the singular findElement, so it finds just the first element. 8:14 So there would be multiple LIs as there are now, that there's three LIs. 8:20 But I’m only gonna get the first one and the way that I’m going to do that 8:23 is by using findElement and that will find the first element. 8:28 And we wanna get the li, so we wanna it by tag name, 8:34 so again, we're gonna use By.css li. 8:38 Cool, all right, so now we have the first item. 8:41 And now we want to check that box, so let's do that. 8:46 So we'll say, firstItem.findElement and that first thing there is an input. 8:49 It's a checkbox, right? 8:57 So by CSS and we'll say input, click. 8:59 So click is going to click that item. 9:04 Boom, we did it. 9:07 See how this changed down here? 9:08 It got clicked. 9:11 So I think I can toggle it. 9:13 If I come back I can just click it and it turns off and on and off and on. 9:14 So now what we can do is we can check that the specific 9:18 attribute that is making our design show up is there. 9:22 So remember, on our item here, 9:25 what's happening is that there is a class attribute, an attribute for 9:26 the element that says responded when it shows up, right? 9:32 So what we can do is we can get attributes off of the specific elements. 9:35 And the way that you do that is with a method 9:41 quite intuitively called getAttribute. 9:44 And you name it what you want, so we wanna get class there. 9:47 So we're gonna pull class and this is gonna give us that back. 9:50 So we'll say, then, and we'll just have it, then expects a function 9:54 that gives you back the attribute and let's print out what's there. 10:00 This should be the value for that. 10:04 So responded is there and if I turn it off, We'll check and 10:07 you'll see that it's not there. 10:13 One more time, we'll click it and we'll look and see if the attribute is there and 10:15 it is, and then we'll click it and we'll look and see if it isn't, and it isn't. 10:21 Cool, there's also a pretty handy check for 10:25 something that is common in most web applications. 10:27 Just like here how we have this button, this click hide button, 10:30 I'm gonna go ahead and I wanna check this. 10:33 I'm gonna click this Hide button, and you'll see that it hid Zee and 10:35 Jonathan because they have not yet confirmed, right? 10:39 So one thing that you wanna make sure is that you wanna see if this is show or not. 10:42 So I'm gonna make Zee confirmed here and 10:46 we'll say hide all those who haven't responded. 10:48 And remember first item is me, is Craig. 10:50 So what you can do on an element is use a method called is displayed and 10:56 that returns a Boolean, a true or false. 11:00 So let's check that out really quick, so 11:02 let's get a handle on this hide those who haven't responded and 11:04 we'll make sure that it's working the way that it is supposed to. 11:07 Okay, so let's get a handle on this hide checkbox, 11:10 let's take a look at it Okay, so 11:14 it is inside the class main, and it is the first input inside of the class main. 11:19 So if we do input, if we just find input, 11:26 we're gonna find our first input which is this name here. 11:29 So let's do this, let's say we'll find the main and 11:32 then we'll look further inside of it, we'll get the checkbox. 11:35 Wanna give it a go? 11:37 Go ahead, pause me, and see if you can do that. 11:39 Okay, here's how I did it. 11:44 So we'll make it a hideCheckbox. 11:46 We'll say driver.findElement and 11:49 we'll say By.className main. 11:54 So at first, I'm gonna get the main div there. 11:58 I'm just gonna chain off of that findElement. 12:02 And this is getting to be a long line and that's okay. 12:04 By.css and we'll say input cuz the first input inside of that main div. 12:08 So that's gonna get the hide checkbox for us. 12:14 Okay, so now before we click it, let's check and 12:17 see if the firstItem is displayed. 12:22 FirstItem, and again, it is displayed and it is thenable as well and 12:27 that thenable returns whether or not it's displayed. 12:32 So let's just call isDisplay again, we can call it whatever we want. 12:37 And that makes a new function that takes that true or false, and 12:41 we'll just use that value to say if it's displayed or not. 12:44 And it should be true, right? 12:47 Cuz you can see me there. 12:48 I'm the first one there. 12:49 So that's true. 12:51 Let's click our hideCheckbox. 12:51 Click, okay. 12:57 And now let's check if I'm displayed and boom, I'm not. 13:00 Nice, right? 13:04 This way you don't need to check specific class names or 13:04 CSS properties because this is usually all you care about. 13:07 Checking if things are being hidden and shown as you expect. 13:10 Now that we can find, check the state, and 13:14 interact with elements on a webpage, we can do all sorts of automation. 13:16 What we've been doing at the command line is great for exploring, but 13:20 I'm guessing you're getting ready to see what this looks like in actual code files. 13:23 There are some design considerations and 13:27 best practices that have evolved in this automation space. 13:29 So let's take a walk through some of those and dive deeper into CSS Electras and 13:32 Xpath Queries in the next stage. 13:36