First Page Object | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Page Objects
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will create our first page object and begin refactoring existing code into more reusable components. Remember to create new commits and push your code to the remote repository. Creating a Navigation Page Object We will create a page object for the navigation bar, referred to as the navigation page . This component is always displayed on the web page when navigating between different pages of the application. Steps to Create the Navigation Page Object Create a new spec file for the page object. Copy relevant code from previous lessons, such as UI components and navigation setup. Create a new folder named page-objects in the root of the project. Create a file named navigation-page.ts within this folder. Define a class NavigationPage with a constructor that accepts a page parameter of type Page from the Playwright library. Assign the page parameter to a read-only field within the class. Create a method, formLayoutsPage , to handle navigation to the form layouts page. Using the Navigation Page Object in Tests To utilize the navigation page object: Import the NavigationPage class into the test file. Create a new instance of the navigation page object, passing the page fixture. Call the formLayoutsPage method using dot notation. Summary of Key Concepts We created a navigation page object in navigation-page.ts with: A constructor that takes a page fixture. A method for navigation that utilizes the this keyword to reference the page instance. This method is now reusable and can be called from other tests, enhancing code readability and maintainability.
Video Transcript
In this lesson we will create our first page object and we will begin refactoring of the existing code that we created before into more reusable components. And by the way don't forget to create a new commits and push your code to remote repository. So let's get into it. So going back to our test application we will create a page object for this navigation bar or let me call it navigation page. This section of the web page is not actually a dedicated page but this menu always displayed on the web page when we navigate into different pages of the application. So we technically can dedicate this menu component into independent page and we will create a navigation page in this lesson to navigate to the form layout page that we used in previous examples many times. So going back to our framework and first let me create a new spec file that we're going to use with page objects. And just to speed up I will copy some of the code from the previous lesson. For example UI components. I take this before each to navigate to the page and we'll create a new test. Navigate to form page. And after that let's create a first page object. We will put our page objects into dedicated folder. Let's create a new folder in the root of our project. New folder and I'm gonna call it page-objects. And inside of this folder I will create a new file which will be navigation-page.ts. Inside of this file let's create a new class. Class navigation page and I remind you a class always should start with a capital case. And here is the body of our class. Inside of the class we need to create a constructor. Constructor. This is the body of the constructor. So what we gonna construct? First we need to create an import of the page fixture from the playwright library. Import. I import page and automatically import it from the playwright test library. Then inside of the constructor we need to put a required parameter that we expect to be constructed when we call this page object. And I call it just simple page and type of page. This is the TypeScript syntax. When you want to define the type of your parameter or the type of your variable you put the colon and then put type page. In our example this page parameter will have type of page. Also what we need? We need to create a new field inside of this class. Read-only. I call it the same name page and type page. And then inside of the constructor we want to assign the parameter that we pass inside of the constructor to this field of this class. And I type this page equals to page. So one more time what is happening here. So we created a constructor. Our constructor expects a page parameter to be passed inside of this class file. Page is our fixture related to the playwright and we assign this parameter to the local field that is related to this particular class. And we use a keyword this page. This means that we want to use a field or the variable or property related only to this particular class which is this one. And now we can create a method and use this page fixture inside of this method. Async and let's say I call this method form layouts page. And I'm simply copy pasting the steps related to navigation to the form layouts page. So going back to the previous lessons and copying these two lines into the navigation page. That's it. So you can see that right now page is highlighted because page cannot be found. And we need to type this dot page and here also this dot page. It means that we're gonna use this instance of the page that we're gonna read from the constructor. And this instance will be passed from our test. I will show you right now in the test and you will understand everything. So that's it. Our page object is ready. Now let's use this method that is responsible for navigating to forms layout page from our test. First thing we need to import navigation page class inside of the test file. Import navigation page and I want to import it from dash dash slash. And VS code provides me the path to my folder structure. So it's located in page objects slash and I'm looking for navigation page. But we see that navigation page is highlighted by the Rex Quigleys. It's because we cannot read it. Why? Because class should be exported in order to be visible to other files inside of the framework. Okay going back and I made a little mistake. Navigation page and right now it's fixed. So navigation page was imported from the navigation page class. And then we can use this inside of our test. First thing we need to create a new instance of this page object inside of the test. I type const and can provide any name I want. For example navigate to equals to new navigation page. And I need to pass a require parameter which is our page fixture inside of this constructor. All right that also done and now we can call our instance of the page object navigate to dot and you can see that forms layout method is visible for us through the IntelliSense. I click enter put the parentheses and that's it. Method is ready to use. So let's run this test. All right that didn't work. Let's look into the code what did we miss. And we forgot to put a wait over here to make a call of our method. Let's run this one more time. And right now it worked. We successfully navigated to the form layouts page. All right so let's quickly summarize what we did in this lesson and let's go through the structure of the first page object one more time. So we created a new navigation page.ts in the new folder page objects folder. Inside of this page object we created a class. We use the export keyword in order to make this file visible for the other files. We imported a page fixture from the playwright library. Then inside of the class we created a field constructor and method. Constructor will wait a parameter of a page fixture that will be passed from the test inside of the navigation page in order to make sure that we are using the same instance of the page during the test run. We assign this instance of the page fixture into the local field related to this navigation page right here. And then we use this instance of the page fixture inside of the method related to navigation on this page. And we use a keyword this in order to read this fixture instance. Then inside of the test we made an import of this navigation page inside of this file called the class name. Then inside of the test we created a new instance of the class using a new keyword. We called new navigation page and passed a required parameter as a page fixture related to this test. So we will make sure our test and our page object use exactly the same instance of the page. And then we simply call the method from our page object using a dot notation NavigateTo FormsLayoutPage. So now this method is fully reusable. You can call it from other tests and it's also very readable. NavigateTo FormLayoutsPage. Alright, that's it guys and see you in the next lesson.