Navigation Page Object | Bondar Academy

Lesson Summary

In this lesson, we enhance the NavigationPage object by adding methods for navigating to different pages and implementing custom logic to validate the menu's status (collapsed or expanded). Here are the key points covered: New Navigation Methods Created methods for navigation to DatePickerPage , SmartTable , ToolTip , and ToasterPage . Utilized existing code from previous lessons for consistency. Handling Menu State We encountered an issue where the menu collapsed when navigating to the DatePickerPage . This was due to the sequence of clicks collapsing the menu item. To resolve this, we implemented logic to: Check the aria-expanded attribute of the menu item. Expand the menu only if it is collapsed before selecting the desired page. Implementation Details private async selectGroupMenuItem(groupItemTitle: string) { const groupMenuItem = this.page.getByTitle(groupItemTitle); const expandedState = await groupMenuItem.getAttribute('aria-expanded'); if (expandedState === 'false') { await groupMenuItem.click(); } } We then called this helper method in our main navigation methods, ensuring that the menu state is checked before any clicks are made. Testing and Refactoring After implementing the changes, we ran tests to confirm that: All pages could be navigated to successfully. The menu state was correctly handled, allowing smooth navigation. In summary, we improved the NavigationPage methods to be more intelligent, allowing navigation regardless of the menu's state. This ensures robust page transitions in our test application. Thank you for watching, and see you in the next lesson!