The functions that we created to add and

remove invitees do a great job of having us not repeat ourselves in code.

Meaning we don't need to write code to find the form, fill it out, and

then click the Submit button over and over.

We just call the function and pass it a name.

It also provides another benefit,

it abstracts away the need to know what is actually required to add an invitee.

As a user of this function, i don't need to know how the invitee is added,

I just know it happens.

This way of thinking should feel pretty familiar if you've done any

object oriented programming, or OOP.

Where you keep hidden or encapsulate the information that you don't want your users

to worry about, and you expose what you want them to use.

Well users of our automation code should have that same sort of respect and care.

We should be able to say, this is the homepage, and you can add invitees, and

remove them.

Don't worry how it's done, I got this.

Now, over time, best practices have evolved on how to do this, and

a pattern has emerged, it's called the Page Object Model.

Now note the word there, object, the first O in OOP.

So languages have different ways of doing OOP.

And while we're doing this in JavaScript,

you can imagine this extended to whatever programming language your code base is in.

So what do you say we go about creating our first page object?

Okay, so we have a pretty good start here already.

And the way that we built this code up is actually pretty common.

First you work on your selectors, next you work on your abstractions.

So what we wanna do now is build a new place to store page-specific information.

So in JavaScript land, we'll make a module.

Now this is equivalent to packages or namespaces in other languages.

So what I'll do is I'll come over here ,and I'm gonna make a new folder,

and I'm gonna call that pages.

And I'll add a new file to this folder, and

I'm gonna call it home.js.

Our app only has one page, and it's typical to name your main page home.

Okay, so you might not have seen this before, but

in the later version of JavaScript, they introduced a new class keyword.

It's syntactic sugar for how you build objects in JavaScript.

I'm gonna use it here because it's the most language agnostic way to get

the point across.

Please don't let it trip you up, more information on the teacher's notes.

So we are gonna create a class called HomePage,

and we'll add a constructor method to our class.

Now, this is method that's called when the new object is created or constructed.

So it's common to pass the web driver into the page object, so I'll say constructor.

And that's how you do this in JavaScript, it's called constructor, and

then this is what is expected.

And then now I can use this, right?

So we'll store a reference to the driver in our instance.

Okay, and

now let's explicitly state that this is the class that we wanna have exported.

So the way that you do that in Node is you say, nodule.exports,

and we're gonna say HomePage.

So this is specifically saying hey, if you import this file, you can export HomePage.

So now, let's go import it, so in our index file,

we'll come over here and we'll say const HomePage = require,

So in the current directory, pages/home.

Cool, so now we have it, right?

So now we have the ability to create one of these, so that's our class definition.

And then after we build our driver here,

what we'll do is we'll pass it into our HomePage object.

So we'll make a lower case of homePage here, right?

So we're gonna make an instance of that page, HomePage,

and we're gonna pass in driver.

Now we move page-specific stuff from index js into our page.

So it's a common approach that your page understands how to navigate to itself.

So let's do this, let's cut this driver.get, we'll cut that from this file.

And we'll come over here into the HomePage, and

what we'll do is we'll make a new method called open, okay?

And in here, we will paste our code.

Now, normally you wouldn't have to use the dynamic process.env,

right, URL from the command line, but that is because ours is dynamic, and

I want this code to work for everybody.

So the thing that we need to remember is that we need to use this.driver.

Cool, so now we have a method that we can call on our instance, so

we can say homePage.open().

And see, it knew about it there, pretty neat, right?

Okay, so let's keep these invitees here.

I'm gonna collapse this, invitees, there we go.

Now, this doesn't really belong here, does it?

If we take this locators out, this really belongs in the page object.

So I'm gonna cut, and I'm gonna come over to my page object,

and I am going to paste in the constructor,

paste in here, this.locators.

Cuz I wanted to be a property of this class.

Now different languages handle this a little bit differently, so

check the teacher's notes for more information.

Go head and semicolon there, okay and check this out, we're using this By, so

we need to do our imports over here.

So let's go ahead and let's bring in

let's bring in this, both of these.

Or actually, what we could do is we could just say, let's do this a little proper.

That's one way of getting very specific about what it is that you need.

So we just need the By, so we'll say By = require("selenium-webdriver").By,

there you go.

And we don't have to bring in Selenium over there, cuz we're not using it,

it's not in the namespace.

Okay, so back in index.js, let's grab our functions that don't belong here anymore.

So I'm gonna grab the function, the removeInvitee and the toggle right here.

So I'm gonna grab all these functions, and I'm gonna cut them out, and

I'm gonna come over to my home.js.

I'm gonna come down in here, let's get this up here a bit, and I'm gonna paste.

And you'll see the squiggle,

says that the function doesn't belong here inside of a class.

So I need to get rid of all those.

So what I'm gonna do is I'm gonna use the multiple cursor shortcut

in Visual Studio Code.

And it's kind of one of those killer features that when you need it,

it's exactly what you need.

Here, check this out, so I'm gonna turn on a little key tracker so

you can see what I'm doing here.

So I'm gonna turn this on, and I'm just gonna press Cmd+D, and I get all of them.

And I see there's a cursor on each one of them.

I'm gonna select the word function up until the function there, and

then I'm gonna delete it, bam.

And then I'm gonna press Escape to get rid of it, there we go.

And now we're back to a single cursor, but I'm gonna move over here and I'm gonna get

each one of these drivers, because the driver needs to access this driver, right?

So I'm gonna highlight this one, get all of them.

I'm gonna go to the front, I'm gonna type this dot, and press Escape.

We have the same problem with these locators, don't we?

So I'm gonna go here, and I'm gonna do locators,

get all those locators, jump over to the front, and do this.locators.

Wow, let's take a moment and just appreciate how amazing that feature is.

Okay, now let's flip back the index.

[LAUGH] This is looking pretty great, isn't it?

So this is our whole file now,

we've got the home page here, it can fit on one screen.

So let's do this, first things that we need to do

is we need to change the calls to use them currently, right?

So, let's see, let's flip this back really quick, so it's more clear.

So forEach invitee we want to call homePage.addInvitee and

then pass in the invitee.

And just a little JavaScript free hint here,

you can still do what we were doing before where we just passed in the method right?

So we could just say homePage.addInvitee.

But the problem is that when it calls this function,

it doesn't know what this should be.

So that's what the second parameter here is,

it's called thisArg, see that up there?

So it needs to know what this is, and

this in the case is homePage, here we go.

All right, and before this Shadd call,

what we wanna do is call homePage, we'll call that method.

And we also wanna do that for our toggle, so we can say,

homePage.toggle, awesome.

Wow, this looks great right?

Not many lines at all.

So let's go ahead and give this a run.

I'm gonna close this existing one, let's give that a run.

Make sure everything's still working, sure looks like it is.

Okay, so let's say that we wanted to click this

Confirmed check box here for a specific invitee.

Hm, we already have one for our remove invitee function, but

that's not exactly great, isn't it?

It means we'd have to build a function for each one of those new,

parse the invitee and each time for that.

I don't really wanna do that for

each of this interactions that the invitees can do.

So now that these things are in classes, we could probably do a better job of

returning an invitee and modeling that as a page object model.

Common misconception of this page object pattern is that you

need to make a page object the entire page only.

But you can for sure make them a part of the page only, a sub page, if you will.

Now this ends up feeling a lot like web components.

So let's do this, you're doing great, you're cruising through this content.

Why don't you take a quick break, do some stretching or jumping jacks, and

get the brain juice flowing.

And then come back and we'll build the page object just for

this little invitee thing here.

Sound good?

See you in a bit