Page Object Model

The functions that we created to add and 0:00 remove invitees do a great job of having us not repeat ourselves in code. 0:02 Meaning we don't need to write code to find the form, fill it out, and 0:07 then click the Submit button over and over. 0:11 We just call the function and pass it a name. 0:14 It also provides another benefit, 0:17 it abstracts away the need to know what is actually required to add an invitee. 0:19 As a user of this function, i don't need to know how the invitee is added, 0:25 I just know it happens. 0:29 This way of thinking should feel pretty familiar if you've done any 0:32 object oriented programming, or OOP. 0:35 Where you keep hidden or encapsulate the information that you don't want your users 0:37 to worry about, and you expose what you want them to use. 0:42 Well users of our automation code should have that same sort of respect and care. 0:46 We should be able to say, this is the homepage, and you can add invitees, and 0:51 remove them. 0:55 Don't worry how it's done, I got this. 0:56 Now, over time, best practices have evolved on how to do this, and 0:58 a pattern has emerged, it's called the Page Object Model. 1:01 Now note the word there, object, the first O in OOP. 1:05 So languages have different ways of doing OOP. 1:11 And while we're doing this in JavaScript, 1:14 you can imagine this extended to whatever programming language your code base is in. 1:16 So what do you say we go about creating our first page object? 1:20 Okay, so we have a pretty good start here already. 1:25 And the way that we built this code up is actually pretty common. 1:28 First you work on your selectors, next you work on your abstractions. 1:31 So what we wanna do now is build a new place to store page-specific information. 1:35 So in JavaScript land, we'll make a module. 1:41 Now this is equivalent to packages or namespaces in other languages. 1:44 So what I'll do is I'll come over here ,and I'm gonna make a new folder, 1:47 and I'm gonna call that pages. 1:52 And I'll add a new file to this folder, and 1:55 I'm gonna call it home.js. 2:00 Our app only has one page, and it's typical to name your main page home. 2:03 Okay, so you might not have seen this before, but 2:09 in the later version of JavaScript, they introduced a new class keyword. 2:12 It's syntactic sugar for how you build objects in JavaScript. 2:16 I'm gonna use it here because it's the most language agnostic way to get 2:20 the point across. 2:23 Please don't let it trip you up, more information on the teacher's notes. 2:25 So we are gonna create a class called HomePage, 2:28 and we'll add a constructor method to our class. 2:31 Now, this is method that's called when the new object is created or constructed. 2:35 So it's common to pass the web driver into the page object, so I'll say constructor. 2:40 And that's how you do this in JavaScript, it's called constructor, and 2:45 then this is what is expected. 2:48 And then now I can use this, right? 2:50 So we'll store a reference to the driver in our instance. 2:52 Okay, and 2:59 now let's explicitly state that this is the class that we wanna have exported. 3:00 So the way that you do that in Node is you say, nodule.exports, 3:05 and we're gonna say HomePage. 3:10 So this is specifically saying hey, if you import this file, you can export HomePage. 3:12 So now, let's go import it, so in our index file, 3:18 we'll come over here and we'll say const HomePage = require, 3:23 So in the current directory, pages/home. 3:31 Cool, so now we have it, right? 3:35 So now we have the ability to create one of these, so that's our class definition. 3:37 And then after we build our driver here, 3:41 what we'll do is we'll pass it into our HomePage object. 3:44 So we'll make a lower case of homePage here, right? 3:47 So we're gonna make an instance of that page, HomePage, 3:50 and we're gonna pass in driver. 3:53 Now we move page-specific stuff from index js into our page. 3:56 So it's a common approach that your page understands how to navigate to itself. 4:01 So let's do this, let's cut this driver.get, we'll cut that from this file. 4:06 And we'll come over here into the HomePage, and 4:13 what we'll do is we'll make a new method called open, okay? 4:14 And in here, we will paste our code. 4:20 Now, normally you wouldn't have to use the dynamic process.env, 4:25 right, URL from the command line, but that is because ours is dynamic, and 4:30 I want this code to work for everybody. 4:33 So the thing that we need to remember is that we need to use this.driver. 4:35 Cool, so now we have a method that we can call on our instance, so 4:40 we can say homePage.open(). 4:44 And see, it knew about it there, pretty neat, right? 4:47 Okay, so let's keep these invitees here. 4:50 I'm gonna collapse this, invitees, there we go. 4:53 Now, this doesn't really belong here, does it? 4:56 If we take this locators out, this really belongs in the page object. 4:58 So I'm gonna cut, and I'm gonna come over to my page object, 5:03 and I am going to paste in the constructor, 5:09 paste in here, this.locators. 5:13 Cuz I wanted to be a property of this class. 5:17 Now different languages handle this a little bit differently, so 5:20 check the teacher's notes for more information. 5:23 Go head and semicolon there, okay and check this out, we're using this By, so 5:26 we need to do our imports over here. 5:31 So let's go ahead and let's bring in 5:33 let's bring in this, both of these. 5:37 Or actually, what we could do is we could just say, let's do this a little proper. 5:42 That's one way of getting very specific about what it is that you need. 5:48 So we just need the By, so we'll say By = require("selenium-webdriver").By, 5:53 there you go. 5:58 And we don't have to bring in Selenium over there, cuz we're not using it, 6:00 it's not in the namespace. 6:03 Okay, so back in index.js, let's grab our functions that don't belong here anymore. 6:05 So I'm gonna grab the function, the removeInvitee and the toggle right here. 6:11 So I'm gonna grab all these functions, and I'm gonna cut them out, and 6:17 I'm gonna come over to my home.js. 6:21 I'm gonna come down in here, let's get this up here a bit, and I'm gonna paste. 6:25 And you'll see the squiggle, 6:31 says that the function doesn't belong here inside of a class. 6:32 So I need to get rid of all those. 6:35 So what I'm gonna do is I'm gonna use the multiple cursor shortcut 6:38 in Visual Studio Code. 6:41 And it's kind of one of those killer features that when you need it, 6:42 it's exactly what you need. 6:46 Here, check this out, so I'm gonna turn on a little key tracker so 6:48 you can see what I'm doing here. 6:51 So I'm gonna turn this on, and I'm just gonna press Cmd+D, and I get all of them. 6:53 And I see there's a cursor on each one of them. 6:59 I'm gonna select the word function up until the function there, and 7:02 then I'm gonna delete it, bam. 7:07 And then I'm gonna press Escape to get rid of it, there we go. 7:10 And now we're back to a single cursor, but I'm gonna move over here and I'm gonna get 7:13 each one of these drivers, because the driver needs to access this driver, right? 7:17 So I'm gonna highlight this one, get all of them. 7:22 I'm gonna go to the front, I'm gonna type this dot, and press Escape. 7:26 We have the same problem with these locators, don't we? 7:32 So I'm gonna go here, and I'm gonna do locators, 7:34 get all those locators, jump over to the front, and do this.locators. 7:38 Wow, let's take a moment and just appreciate how amazing that feature is. 7:43 Okay, now let's flip back the index. 7:49 [LAUGH] This is looking pretty great, isn't it? 7:51 So this is our whole file now, 7:54 we've got the home page here, it can fit on one screen. 7:57 So let's do this, first things that we need to do 7:59 is we need to change the calls to use them currently, right? 8:03 So, let's see, let's flip this back really quick, so it's more clear. 8:05 So forEach invitee we want to call homePage.addInvitee and 8:08 then pass in the invitee. 8:16 And just a little JavaScript free hint here, 8:19 you can still do what we were doing before where we just passed in the method right? 8:21 So we could just say homePage.addInvitee. 8:26 But the problem is that when it calls this function, 8:29 it doesn't know what this should be. 8:33 So that's what the second parameter here is, 8:35 it's called thisArg, see that up there? 8:37 So it needs to know what this is, and 8:40 this in the case is homePage, here we go. 8:43 All right, and before this Shadd call, 8:48 what we wanna do is call homePage, we'll call that method. 8:51 And we also wanna do that for our toggle, so we can say, 8:57 homePage.toggle, awesome. 9:01 Wow, this looks great right? 9:08 Not many lines at all. 9:09 So let's go ahead and give this a run. 9:11 I'm gonna close this existing one, let's give that a run. 9:14 Make sure everything's still working, sure looks like it is. 9:22 Okay, so let's say that we wanted to click this 9:26 Confirmed check box here for a specific invitee. 9:31 Hm, we already have one for our remove invitee function, but 9:36 that's not exactly great, isn't it? 9:41 It means we'd have to build a function for each one of those new, 9:44 parse the invitee and each time for that. 9:48 I don't really wanna do that for 9:50 each of this interactions that the invitees can do. 9:51 So now that these things are in classes, we could probably do a better job of 9:54 returning an invitee and modeling that as a page object model. 9:58 Common misconception of this page object pattern is that you 10:03 need to make a page object the entire page only. 10:05 But you can for sure make them a part of the page only, a sub page, if you will. 10:08 Now this ends up feeling a lot like web components. 10:13 So let's do this, you're doing great, you're cruising through this content. 10:15 Why don't you take a quick break, do some stretching or jumping jacks, and 10:18 get the brain juice flowing. 10:22 And then come back and we'll build the page object just for 10:23 this little invitee thing here. 10:26 Sound good? 10:30 See you in a bit 10:31