First Page Object | Bondar Academy

Lesson Summary

In this lesson, we focus on creating our first page object in TypeScript using Playwright. Here’s a structured overview of the key concepts discussed: Creating a Page Object We start by creating a new spec file named testWithPageObjects.spec.ts . It is recommended to create a page object for every independent page in the application, such as: Form Layouts Date Picker For shared interfaces like the navigation menu or header , it's good practice to create separate page object classes. Folder Structure Page objects should be stored in a dedicated folder to maintain organization. We create a folder called page objects and a file named navigationPage.page.ts . Class Structure Define a class with a capitalized name, e.g., NavigationPage . Include a constructor to initialize the page instance passed from the test. Use this.page to reference the page instance within the class. Methods for Navigation Inside the class, create methods for specific actions, such as navigating to the form layouts page: async formLayoutsPage() { // navigation steps } Usage in Tests Import the page object class in the spec file. Create an instance of the class and pass the page fixture to the constructor. Call the navigation methods directly, enhancing reusability and maintainability. In summary, using page objects simplifies test automation by encapsulating page-specific logic, allowing for cleaner and more maintainable code. In the next lesson, we will extend the functionality of the navigation page class.