All right, so we're back once again, and we all know that the application that we're going to automate
is mostly on the Abdulsalam website.
So we need to somehow write the code in such a way that we need to grab those details from the from
the UI and we're going to create an abstraction of the complete DOM element over here.
So.
If we go to this particular page, the Abdah Tommy dot com website, so we have a login button over
here, we need to click this Amedee under the username and password over here.
And the user name can be identified to using it's using its name or ID, whatever it is, and then we
can perform an operation over there so we can write the exact same code over here as well.
So as we all know that the page object model, we used to write the whole page element within a class
file so that we can access just that element like an operation element on this particular page, so
that we can actually hold all the elements as well as the operation that we perform on the particular
page.
For example, in the login page, I'm probably going to have the login link as well, or a link login,
and then I'm going to write a async method because we know that everything in the.
JavaScript is actually a thing that the playwright is fully using, so I need to write everything in
an asynchronous operation, so I'm going to identify the login link using its text identifier, something
like this.
And you can see that because this page is going to be basically an asynchronous page, as we all know
over here, and I need to somehow get this particular page and its value into an asynchronous method
which is going to store the value on this particular.
Login page so that he can resolve the promise for the element handles as well, and that's exactly what
I'll be doing for the username as well.
For example, for the username, which I am going to be writing.
I'm going to create an asynchronous arrow function method, which is going to hold the page of I'm going
to identify the particular element, probably using its input.
Of.
Name is equal to I guess it's user name like that.
That's it.
So this is the way that I can identify the user name as well.
Similarly, I can identify the password and the submit button, something like this.
So you can see that we are actually creating an abstraction of all the UI elements of the page in one
place, because so far, all these days, while you write any test, we write all the test on one single
one single class file, something like these.
Right.
This is how we used to write and.
You see or hear all the corsets over here, which is the way that we were writing all these days under
the intent of and with the test and with the designers were able to abstract it a bit.
But using the space of the model, we can abstract even more something like this, and then we can just
write all the operations that we are looking for.
And now, because this is a login page, we also need to do a click on the link for the login button
or the login link.
So I'm just going to do a public, a sing of click login, something like that, probably.
And then I'm going to do and I'll wait and you can see that this is where the coding goes even more
crazy.
And because it should return an upgrade and our property itself is an, I think, property.
So we need to make this like a log EnLink, something like this.
And then we need to call a click method, which is sitting within our.
Playwright, right?
So this looks a bit more weird coding, but, yeah, this is how you can actually do so.
This is the element that you want to perform a click operation.
And because this click is going to end a raid as well to perform using an array to operation.
And similarly, we need to perform the logging operation as well, which I'm going to do something like
public, I think of login and that is the power of the typescript.
Right.
I mean, you can define the type as well if you want to.
Something like name string and password string.
So you're defining the types over here.
And then we're going to perform the same operation.
I need to perform a Senaki operation.
So this start to use a name.
Um, so the second is nothing but the type operation in in playwrite.
So if I just do something like this.
You can see that it is automatically going to cast it for us, which is pretty nice, and then I need
to type the name and similarly, I want to do for the password and I need to perform a click submit
button, something like this.
So I'm sorry about that, to perform a D.
D and submit quite good.
So that is the click operation, and once everything is done, we then need to start writing our test
over here.
So for writing the test, we actually need to use our fixture of our playwright astronaut.
So this way is going to make things more easier, which we'll be doing in our next video.