Creating a page object in Playwright - Microsoft Playwright Tutorial

- [Instructor] For our first step into abstractions, we'll keep things really simple. There will be some extra code you may not understand right away. Just type along with me. Trust me, it is needed, and you will get to understand it. For this exercise, we are going to abstract away the email address input, the password input in this login button in our off.spec.ts file. So, let's go open up our code base, and if you haven't already, you can go ahead and check out the Branch 01_02b. This is going to be where we're starting. And open up this off.setup.ts file in the test directory. In this file, you can see we have these three elements that we're interacting with. We are filling this email, the password in the login submit button. Our plan is to extract away these locators into their own page object file. So, to do that we first need to create a folder. So, if you come up to the top here, I'm just going to close this directory and you know, click in this main directory so it creates the folder at the right level. I'm going to click new folder. We're going to create a folder named lib, short for libraries. We're going to in that folder, create another new folder. So, this is another way you can create a folder other than clickin' this button, right click, click New Folder. We're going to call this folder pages. This is going to be where our page objects live. And just in this folder we're just going to create a new file. We're going to call it login.page.ts. This is where we'll build out and abstract away the page object language. So, we're going to start with importing. So, let's do our import. It's going to look a little different than what we've we're used to, but we're going to import the type Locator. (keyboard clicking) We're going to import the type page from @playwright/test. So, we've got locators and pages within this file that we can start to work with. The next thing we're going to do is we're going to export a login page class. So, we're going to type in export class, LoginPage. One thing to note is any classes you create in TypeScript should be uppercase at the beginning and uppercase in the middle. And we're going to do a open bracket, and this is going to be the start of our class. Within the main class, we'll add some read-only calls to establish which elements we will be abstracting, and then we will create a constructor which uses those elements. So, let's start by doing read-only, space, page, colon, so lowercase page. And then we're going to type in uppercase Page. So, we're setting the page has a type of uppercase Page. We're also going to establish those elements. So, read-only emailInput. So, this is a name that I am giving it. And this is going to be a Locator, read-only passwordInput. This is going to be a Locator, read-only loginButton. And this will also be a Locator. The next thing we're going to do is add a constructor. A constructor in TypeScript is automatically invoked when a new instance of the class is created. For playwright page objects, it is important to get this syntax right. So, within this constructor, let's go ahead and start typing here. We're going to type in constructor. We've got some nice auto complete there. We're going to do an open parentheses. We're going to pass in page with a type of Page. And then after this parentheses, we're going to create an open bracket. And this is going to be our constructor code. This is really where the magic happens. Specifically, in this line, we're going to type in this.page equals page. This is the magic that allows the abstraction to work properly along with all the other defined locators. So, let's add those other locators now. We're going to start with this.emailInput. We're going to set that equal to page.getByTestId, and we're going to pass in email. So, this is the same locator that was listed on the other page that we were looking at, the auth setup, page.getByTestId. So, we could simplify this. We're going to go ahead and just copy and paste these next ones. This.passwordInput equals, and we're going to say, this.LoginButton equals, and we will go ahead and copy and paste from auth setup page.getByTestId login-submit. Now, that we have built the basic page object, we're ready to use this page object in our test.