This page will provide an overview of the test automation framework’s architecture, including the Page Object Model structure and how the various components (like HelperBase, Page Objects, PageManager, and Tests) interact in the automation process. The diagrams will visually represent these relationships and clarify the overall framework setup.
Project Architecture Overview:
This section outlines the folder and file organization of the project, emphasizing the use of the Page Object Model (POM) for test automation. Each folder and file serves a specific purpose, as described below:
-
pageObject/: Contains all the Page Object files representing distinct web pages or components.
-
Subfolders (e.g., biBoardPage/, clientsPage/): Group related pages or components logically.
-
Utility files (utils/): Provide shared helper methods and centralized page management.
-
tests/: Houses the test scripts that validate application functionality using the Page Objects.
-
Configuration and Data Files: Include settings, test data, and dependency management files for the project.
├── pageObject/ # Folder containing all described pages using the Page Object Model (POM)
├── biBoardPage/ # Subfolder for BI Board-related pages
├── biBoardPage.ts # Main page of the BI Board
├── budgetPage.ts # Page for managing budgets
├── consultingPage.ts # Page for consulting services
├── recruitingPage.ts # Page for recruitment analytics
├── clientsPage/ # Subfolder for client-related pages
├── companiesPage.ts # Page for managing companies
├── ordersPage.ts # Page for managing client orders
├── vacanciesPage.ts # Page for viewing and managing vacancies
├── components/ # Subfolder for reusable components
├── navigationPage.ts # Component for navigation menu interactions
├── help/ # Subfolder for help-related pages
├── helpPage.ts # Help page for user support
├── processes/ # Subfolder for processes-related pages
├── processesPage.ts # Page for viewing and managing business processes
├── recruiting/ # Subfolder for recruiting-related pages
├── applicationsPage.ts # Page for managing applications
├── publicationsPage.ts # Page for publishing job openings
├── settings/ # Subfolder for settings-related pages
├── sessionsPage.ts # Page for managing user sessions
├── settingsPage.ts # General settings page
├── signInAndSecurityPage.ts # Page for managing sign-in and security settings
├── talents/ # Subfolder for talent-related pages
├── talentsPage.ts # Page for managing talent profiles
├── users/ # Subfolder for user-related pages
├── staffPage.ts # Page for managing staff members
├── utils/ # Subfolder for shared utilities and helpers
├── helperBase.ts # Base helper class for shared logic across pages
├── pageManager.ts # Centralized page manager for handling navigation between pages
├── test-options.ts # Defines custom fixtures for setting up reusable test utilities
loginPage.ts # Page for login-related actions and elements
├── testData/ # Folder containing pre-configured test data
├── testData.ts # File with test data for use in test scenarios
├── tests/ # Folder containing test scripts
├── testLoginPage.spec.ts # Test file for login page functionality
├── testCompanyPage.spec.ts # Test file for login page functionality
├── testOrderPage.spec.ts # Test file for order page functionality
├──testPublicationPage.spec.ts # Test file for publication page functionality
├──testUserPgae.spec.ts # Test file for user page functionality
├──testVacanciesPage.spec.ts # Test file for vacancies page functionality
.gitignore # File specifying files and folders to be ignored by Git
eslint.config.mjs # Configuration file for ESLint to enforce coding standards
package-lock.json # Auto-generated file for dependency locking
package.json # File managing project dependencies and scripts
playwright.config.ts # Configuration file for Playwright with settings for browser, timeouts, etc.
Test Automation Framework Architecture:
This diagram illustrates the class hierarchy and the interaction flow within the test automation framework using the Page Object Model (POM). The structure defines the relationships between key components, which are responsible for managing page interactions, navigation, and test execution:
-
HelperBase (Base class)
-
Role: Provides shared utility methods for interacting with web pages (e.g., clicking elements, filling forms).
-
Purpose: Acts as the foundation for all page objects, ensuring consistent behavior across different pages.
-
Page Object (Inherits from HelperBase)
-
Role: Represents individual web pages or components (e.g., login page, dashboard, settings page).
-
Purpose: Encapsulates the logic for interacting with specific page elements and actions, inheriting from HelperBase to reuse common methods.
-
PageManager (Factory for page instances)
-
Role: Centralizes the creation and management of page objects.
-
Purpose: Provides a single interface to navigate and interact with various pages, helping to streamline the test process.
-
Tests
-
Role: Contains the test scenarios that validate the application’s behavior.
-
Purpose: Uses the PageManager to access and perform actions on the page objects, executing assertions to verify application functionality.
+-----------------+
| HelperBase | <-------- Base class: shared methods for interactions
+-----------------+
↓
|
+------------------+
| Page Object | <--- Inherits from HelperBase
+------------------+
↓
|
+-------------------------------+
| PageManager | <--- Factory for creating page instances
+-------------------------------+
↓
|
+-------------------------------+
| Tests | <--- Uses PageManager
+-------------------------------+
Test structure example:
-
Create a HelperBase class: Define common methods for shared interactions, such as clicking buttons, filling fields, or waiting for elements.
-
Define Page Object classes: For each page in the application, create a class that contains methods specific to that page’s elements and actions. These classes inherit from HelperBase to reuse common functionality.
-
Implement a PageManager: Create a PageManager that acts as a factory, managing the creation and navigation of page objects across tests.
-
Write Tests: In the test files, import the necessary page objects and the PageManager, use it to instantiate pages, and write assertions to validate functionality.
-
Use Fixtures (Optional): For repetitive tasks, such as login, use fixtures to streamline setup and teardown in tests.
-
Execute Tests: Run the tests with Playwright and ensure that each action is executed on the appropriate page objects.
+--------------------------+
| Test Options |
| Defines fixtures: |
| loginAsAdmin, pageManager|
| Example: |
| export const test = |
| base.extend({ |
| loginAsAdmin: async |
| (...) => { ... }, |
| }); |
+--------------------------+
↓
+--------------------------+
| Test Suite |
| Groups related tests: |
| Example: |
| test.describe("Suite", |
| () => { ... }); |
+--------------------------+
↓
+--------------------------+
| Test Case Setup |
| Defines preconditions: |
| login, navigation setup |
| Example: |
| test.beforeEach(async |
| ({ loginAsAdmin }) => |
| { ... }); |
+--------------------------+
↓
+--------------------------+
| Test Cases |
| Runs specific scenarios: |
| Example: |
| test("Scenario", async |
| ({ pageManager }) => |
| { ... }); |
+--------------------------+
↓
+--------------------------+
| Test Execution |
| Runs tests via CLI: |
| Example: |
| Command: npx playwright |
| test |
+--------------------------+
↓
+--------------------------+
| Test Result Analysis |
| Reviews output reports: |
| Example: |
| Open: playwright-report/ |
| index.html |
+--------------------------+
