Now that we've got our home page all set up,

it quickly became evident that we have a bunch of repeated elements.

Well, mainly those invitees.

All of them have very similar properties and functionality.

Now, we could write methods on our main page object, but that would require us to

continually pass the name of the invitee to each of our new methods.

There's probably a better API that we could design.

It's important to remember that just like how you take your time to

design a software, you should also do the same with your automation and test code.

You should always follow best practices and create clean, understandable APIs.

You want other people to be able to not only read your code, but

also being encourage to reuse it.

Remember, even though this pattern of abstracting away knowledge

of the structure of a page is called page object,

the classes you create don't need to be entire pages.

They can be sub-pages as well.

Let's model our invitee as a sub-page.

Okay, so first things first,

let's think about how we can get a handle on each of these little invitee blocks.

So we've kinda done that already, haven't we, with our locator function here, right,

this removeButtonForInvitee.

It basically just goes and it only gets the button, though.

So why don't we do one where we get the invitee by name.

I'm gonna leave that one there for reference, and

actually I'll duplicate that.

So make a new one of those.

And what we want is we want invitee,

I'm gonna get ahold of the invitee element there.

So we'll say inviteeByName.

And just to be clear,

we'll change our parameter from being called invitee to be called name.

And we'll pass that in here, to name.

And instead of going to the button, let's just go to the parent there.

So that will get that li, won't it?

That li is this here.

We go ahead and we inspect this here.

That's this li, this is the parent that we're gonna get from that.

Okay, awesome, and

then let's give our page a way to get a handle on those elements.

So I kinda like the way that Selenium API works when you call find element.

So why don't we add new method to our homepage.

And we we'll kinda follow the same structure, this is pretty common.

So we can say findInviteeByName.

And that takes a name.

And then what we'll do is we'll get an element,

and we will do this.driver.

We'll say findElement, and we will pass in

this.locators.inviteeByName, which we just created.

And we'll pass in that name, awesome.

So then we have the element.

And then we'll say, return, so we wanna return a new Invitee.

And we haven't built that yet, so let's be careful.

So we're gonna pass in the element to that, cool.

So what we'll do, Keep that function there.

And we need to define what a new Invitee looks like.

So we'll just build one right here.

We'll say class Invitee, and we know that it's gonna take an element.

So we need to pass that into the constructor, right?

So we'll say, constructor, we'll pass in an element.

And then we'll just store a reference to it in the instance, right?

So when this is called it will have a reference to that element, awesome.

So this is much like we did here with the constructor when we passed in the driver.

But this is going to be built and it's gonna be given an element.

So this is where things probably differ a bit depending on your

programming language.

Basically we only really want our HomePage class here

to create these Invitees, right?

And we want to convey to users of our API that our invitee class shouldn't be

created.

Now maybe in your language you would mark a private or protected class.

Or maybe you would tweak the accessibility of the constructor.

Over here in JavaScript Landia, we simply won't add it to our module exports.

So nobody can see it, which is more or

less a private class since you can't import it elsewhere.

Great, so now that we have our specific invitee class,

we can now refactor the removeInvitee bit, right?

So we have this removeInvitee bit that we had.

So let's take a look at what this locator looks like.

So if I press Command here I can click it.

So let's go ahead and let's grab this off.

And let's go and let's add a new locators to our invitee.

So it'll be specific to this class.

So let's call this removeButton, right,

cuz that's the Remove button in that little block there.

Let's take a look at what it was, it was just button[last()].

So, you know what, let's switch what our locator was there.

So we'll say removeButton is a By.css.

And we'll say, button:last-child, right?

Cuz it's is gonna search within element is what we'll do.

So now that we have that removeButton we can use it in an element.

And so, instead of saying remove invitee, we can just say remove, right?

Cuz you'll have a hold of the Invitee and we'll just call remove on it.

And we'll say this.element, right?

Instead of using the driver, we're gonna search from within that element.

We'll say findElement and then we'll say this.locators.removeButton.

And then we wanna click, beautiful.

Okay, so let's get rid of this

removeInvitee here cuz now that is not the responsibility anymore.

So, let's see.

So we've got this invitee form and we're gonna do findInviteeByName.

So it's usage is gonna look a little bit different in index.js.

So here, before what we we're doing, we were removing Shadd.

We're gonna get rid of this, and we'll say homePage.findInviteeByName.

And we're gonna pass in David Riesz.

And then we're gonna call, that's what's wrong.

You gotta put the dot at the front of each one of these lines, .remove, there we go.

So first, we're gonna find it and then we're gonna method chain and

do a remove, sorry, David.

Now, let's get insider of here.

Now that we've got this little invitee, I feel like we're on a roll.

Let's get this little checkbox working, okay?

So let's add to our invitee sub-page.

Let's go over to our invitee sub page.

And let's add the confirmedCheckbox.

Now, these finders start getting a lot easier, right?

So is there anymore, there's only that one, right?

There's only one checkbox on there.

And it's, let's see, it's an input type of checkbox.

So, let's just do that.

Let say, By.css, and we'll do,

input [type='checkbox'].

And I use the single quotes there because they were double quotes.

And I'm gonna actually fix this, cuz I accidentally typed single quotes there.

Cool, so we now have a confirmedCheckbox.

That it's complaining about cuz there's no comma, there we go.

And then let's go ahead and let's use it.

So if you get ahold of an invitee, you can toggleConfirmation, right?

So what we'll do is we'll say this.element, findElement,

search within there, and we'll do this.locators.confirmedCheckbox.

Awesome, and then we'll do a .click.

So that will check that box for us from inside.

And then in index.js, let's use it.

So let's see, so we'll do homePage.

We'll do findInviteeByName and let's see, if this is a treehouse party,

if anybody's gonna be there, I know that it's gonna be Jennifer Nordell.

She's got something like 100,000 points or something.

You've probably met her in the forums.

She's an amazing moderator.

So let's do that, she's gonna come, for sure she's gonna come.

So we'll toggle her confirmation true.

And thanks for all your help and dedication, Jennifer.

And thanks for RSVPing so promptly through this app.

So let's do it, let's give it a go.

So I'm gonna close that existing one that I have.

And let's open it up again, and here we go.

She's confirmed, and we click hide those that aren't there, so there's Jennifer.

And let's make sure that David's gone.

Yeah so we had to kick him out of that party.

He just kept talking about Java and algorithms.

We just [LAUGH] had to kick him out.

Okay, our new API is feeling pretty good.

Now I could imagine how you'd do the rest of these actions, right,

the rest of these ones that are left.

I could kinda see how you'd do edit, right?

Cuz edit comes in and you can change the name.

Actually, that's a good idea.

If you wanna challenge yourself, go ahead and give changing this name a try.

Now I've dropped how I did it in the teacher's notes, no cheating.

One thing that I noticed here, is that this page is a little weird, right?

The line up of these buttons is a little strange.

I was thinking that maybe I should share this in a screenshot to my designer.

And I thought well, maybe I can make this screenshot myself.

But get this, Selenium can do it for you.

But first, we're gonna need to be able to get access to our file system.

So that is a node thing called fs for file system.

So we'll require fs.

And what we'll do is we'll make Selenium take the screenshot.

So we'll go down here to the bottom, half of this is all done.

Let's not toggle this off, we wanna be able to show everybody on there.

So we'll say, drive.takeScreenshot, okay?

And that's thenable, that gets returned, right?

So, and we'll do then and

that expects a callback that takes in an image and an err if it didn't work, okay?

So our function will have an image and it's kind of a blob there.

So we'll say fs.writeFile and we'll just call this weird-layout.

Those buttons aren't lining up.

We wanna show our designer, she loves it when we send screenshots.

Because that's the nice thing about this, right?

You could set this up, and because those names were a little bit longer,

we saw that the thing was breaking a little bit.

So let's send this over to her so she can see it.

And finally, it takes an error, a method that takes an error.

So we'll just drop a new function here that says err.

And we'll log out to the console if there is one, log in that error out.

Okay, so there we go.

So it's complaining about something.

I forgot this and this, there we go.

That's not quite lining up.

I have an extra, so that closes the then, this closes the function.

And I've got, this closes the right file, cool.

All right, so what will happen is it will write out this weird-layout.

And it will push the image in there.

So let's do that, let's go and drop this here.

Let's run it one more time, and then we'll, should, when it all said and done,

we should see a new file pop in here.

Cool, so there's this weird-layout.png.

And look at that, we can just show them right here.

Show our designer that these buttons aren't lining up when you have

longer names.

This Gonzalo Torres del Fierro has broken this here.

And I'm sure that this is not the first time that he's witnessed this,

right Gonzalo?

So there are actually quite a bit of things that Selenium can do at the browser

like this.

Now why don't you take a quick break and then come back and

get ready to practice your new skills and pick up a few more.