First Page Object | Bondar Academy

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.