Page Objects Helper | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Page Objects
Instructor: Artem Bondar
Lesson Summary
In this lesson, we enhance our framework by introducing PageObjectHelper . This helper allows us to consolidate reusable functions across different PageObjects , minimizing code duplication. Implementation of PageObjectHelper We will implement the PageObjectHelper using inheritance from object-oriented programming. Here’s how: Create a new class named HelperBase in HelperBase.ts . Define the standard structure for HelperBase : Page fixture Class definition Constructor Add a method called waitForNumberOfSeconds to demonstrate a hard-coded wait function. Method Implementation The method waitForNumberOfSeconds takes a parameter timeInSeconds and uses it to create a wait time in milliseconds: await this.page.waitForTimeout(timeInSeconds * 1000); Using the Helper in PageObjects To utilize this method in a PageObject , such as NavigationPage , follow these steps: Extend HelperBase using extends HelperBase . Resolve any constructor conflicts using super(page) . Call the method as needed: await this.waitForNumberOfSeconds(...); Framework Architecture Overview Our framework is organized into two main areas: Test Area: Contains spec files for tests. Code Area: Houses all implementation code, including PageObjects and HelperBase . The PageManager manages instances of all PageObjects , facilitating their use within tests. Summary In this lesson, we created a HelperBase class for reusable methods, utilized inheritance to extend this base class in PageObjects , and adjusted our approach to accessing the page fixture. This architecture is scalable and suitable for real projects.