add: add JS doc comments and snapshots

Author: rishavjeet

.gitignore

@@ -6,4 +6,3 @@ node_modules/
 .env
 .DS_Store
 artifacts/
-visual-automation-snapshots/

specs/visual-automation-snapshots/add-employee-form.png

@@ -1,5 +1,7 @@
 const { test, expect } = require("@playwright/test");
 
+
+// Import utility functions for login, navigation, and employee management
 const { userLogin } = require("../../utils/visualUtils/loginUtils");
 
 const {
@@ -16,7 +18,11 @@ const {
   addEmployeeRecord,
 } = require("../../utils/visualUtils/addEmployeeUtils");
 
-test.describe("Admin Dashboard Verification", () => {
+
+/**
+ * Test suite for verifying the add employee functionality.
+ */
+test.describe("Add Employee Feature Verification", () => {
   let empName = "";
   let testCode = 0;
 
@@ -27,26 +33,42 @@ test.describe("Admin Dashboard Verification", () => {
   let employeeUsername = "";
   let employeePassword = "";
 
+  /**
+   * Setup function executed once before all tests.
+   * Generates static employee details for consistency in visual tests.
+   */
   test.beforeAll(() => {
-    empName = employeeNameGenerator(5);
-    testCode = generateTestCode();
+    empName = employeeNameGenerator(5); // Generate a random employee name prefix
+    testCode = generateTestCode(); // Generate a unique test code
 
-    employeeFirstName = `${empName}Fname${testCode}`;
-    employeeMiddleName = `${empName}Lname${testCode}`;
-    employeeLastName = `${empName}Lname${testCode}`;
+	// Reduced some dynamic inputs to avoid excessive masks in visual tests.
+    // employeeFirstName = `${empName}Fname${testCode}`;
+    // employeeMiddleName = `${empName}Lname${testCode}`;
+    // employeeLastName = `${empName}Lname${testCode}`;
 
+	// Use static employee details to minimize dynamic elements in visual tests
+	employeeFirstName = 'test_Emp_FName';
+	employeeMiddleName = 'test_Emp_MName';
+	employeeLastName = 'test_Emp_LName';
+
+	// Employee Credentials
     employeeUsername = `${empName}_${testCode}`;
     employeePassword = `${empName}pwd123`;
   });
 
   test.beforeEach(async ({ page }) => {
-    await userLogin(page);
 
-    await visitAddEmployeePage(page);
+    await userLogin(page); // Perform user login
+
+    await visitAddEmployeePage(page); // Navigate to the Add Employee page
   });
 
+  /**
+   * Test to validate the UI of the Add Employee form.
+   * Captures and compares a screenshot with the baseline image.
+   */
   test("It should Validate the add employee form UI", async ({ page }) => {
-    await page.waitForTimeout(3000);
+    await page.waitForTimeout(3000); // Wait for elements to stabilize
 
     // Capture the screenshot and compare with the baseline
     await expect(page).toHaveScreenshot("add-employee-form.png", {
@@ -55,11 +77,16 @@ test.describe("Admin Dashboard Verification", () => {
     });
   });
 
+  /**
+   * Test to validate the Employee Details page after adding a new employee.
+   * Captures and compares a screenshot with the baseline image.
+   */
   test.only("It should validate the employee details page after adding new employee", async ({
     page,
   }) => {
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(2000); // Wait before starting interactions
 
+	// Add a new employee using predefined details
     await addEmployeeRecord(
       page,
       employeeFirstName,
@@ -69,17 +96,17 @@ test.describe("Admin Dashboard Verification", () => {
       employeePassword
     );
 
-    await page.waitForTimeout(7000);
+    await page.waitForTimeout(7000); // Allow time for employee details page to load
 
     // Capture the screenshot and compare with the baseline
     await expect(page).toHaveScreenshot("employee-details.png", {
       timeout: 3000, // Set the timeout for the screenshot action
       fullPage: true, // Capture a full-page screenshot
       mask: [
-        page.locator("div.orangehrm-edit-employee-navigation"),
-        page.locator('input[name="firstName"]'),
-        page.locator('input[name="middleName"]'),
-        page.locator('input[name="lastName"]'),
+        // page.locator("div.orangehrm-edit-employee-navigation"),
+        // page.locator('input[name="firstName"]'),
+        // page.locator('input[name="middleName"]'),
+        // page.locator('input[name="lastName"]'),
 		page
 			.locator("input[data-v-1f99f73c].oxd-input.oxd-input--active")
 			.nth(4),

specs/visual-automation-snapshots/admin-dashboard.png

@@ -1,16 +1,28 @@
 const { test, expect } = require('@playwright/test');
 
+// Import utility function for user login
 const { userLogin } = require('../../utils/visualUtils/loginUtils');
 
+/**
+ * Test suite for verifying the Admin Dashboard functionality.
+ */
 test.describe('Admin Dashboard Verification', ()=>{
 
+	/**
+	 * Setup function executed before each test.
+	 * Ensures user is logged in before proceeding with tests.
+	 */
 	test.beforeEach(async({page})=>{
-		await userLogin(page);
+		await userLogin(page); // Perform user login
 	})
 
+	/**
+	 * Test to validate the visual appearance of the Admin Dashboard after logging in.
+	 * Captures and compares a screenshot with the baseline image.
+	 */
 	test('It should Validate the visual appearance of the Admin Dashboard after logging in', async ({ page }) => {
 
-		await page.waitForTimeout(3000);
+		await page.waitForTimeout(3000); // Wait for the dashboard to load completely
 
 		// Capture the screenshot and compare with the baseline
 		await expect(page).toHaveScreenshot('admin-dashboard.png',{

specs/visual-automation-snapshots/employee-details.png

@@ -1,7 +1,8 @@
 const { test, expect } = require("@playwright/test");
 
-const { userLogin } = require('../../utils/visualUtils/loginUtils');
 
+// Import utility functions for login, navigation, employee management, and search
+const { userLogin } = require('../../utils/visualUtils/loginUtils');
 
 const {
   employeeNameGenerator,
@@ -17,6 +18,10 @@ const { visitAddEmployeePage } = require('../../utils/visualUtils/visitAddEmploy
 
 const { searchEmployee } = require('../../utils/visualUtils/searchEmployeeUtils');
 
+
+/**
+ * Test suite for verifying the Supervisor Assignment UI.
+ */
 test.describe("Supervisor Assignment UI verification ", () => {
   let empName = "";
   let testCode = 0;
@@ -36,37 +41,57 @@ test.describe("Supervisor Assignment UI verification ", () => {
   let supervisorUname = '';
   let supervisorPwd = '';
 
+  /**
+   * Setup function executed before each test.
+   * Generates unique employee and supervisor details.
+   * Logs in the user and navigates to the Add Employee page.
+   */
   test.beforeEach(async ({ page }) => {
-    empName = employeeNameGenerator(5);
-    testCode = generateTestCode();
+    empName = employeeNameGenerator(5); // Generate random name prefix
+    testCode = generateTestCode(); // Generate unique test code
 
+	// Reduced some dynamic inputs to avoid excessive masks in visual tests.
     employeeFirstName = `${empName}Fname${testCode}`;
     employeeMiddleName = `${empName}Lname${testCode}`;
     employeeLastName = `${empName}Lname${testCode}`;
 
+	// Static employee details to ensure consistency in visual tests
+	// employeeFirstName = 'test_Emp_FName';
+	// employeeMiddleName = 'test_Emp_MName';
+	// employeeLastName = 'test_Emp_LName';
+
+	// Dynamic Employee Credentials
     employeeUsername = `${empName}_${testCode}`;
     employeePassword = `${empName}pwd123`;
 
+	// Reduced some dynamic inputs to avoid excessive masks in visual tests.
 	supervisorFirstName = `testsupervisorfname${testCode}`;
 	supervisorMidName = `testsupervisormname${testCode}`;
 	supervisorLastName = `testsupervisorlname${testCode}`;
 
+	// Static supervisor details for consistency
+	// supervisorFirstName = `test_supervisor_fname`;
+	// supervisorMidName = `test_supervisor_mname`;
+	// supervisorLastName = `test_supervisor_lname`;
+
+	// Dynamic Supervisor Crdentials
 	supervisorUname = `testsupervisoruname${testCode}`;
 	supervisorPwd = `testsupervisorpwd${testCode}`;
 
-    await userLogin(page);
+    await userLogin(page); // Perform user login
 
-    await visitAddEmployeePage(page);
+    await visitAddEmployeePage(page); // Wait before starting interactions
   });
 
   test("It should verify the UI after supervisor assignment", async ({
     page,
   }) => {
 
-	test.slow();
+	test.slow(); // Mark test as slow due to multiple interactions
 
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(2000); // Wait before starting interactions
 
+	// Add a new employee
     await addEmployeeRecord(
       page,
       employeeFirstName,
@@ -75,11 +100,10 @@ test.describe("Supervisor Assignment UI verification ", () => {
       employeeUsername,
       employeePassword
     );
-
 	await page.waitForTimeout(5000);
 
+	// Add a new supervisor
 	await visitAddEmployeePage(page);
-
 	await addEmployeeRecord(
 		page,
 		supervisorFirstName,
@@ -92,42 +116,49 @@ test.describe("Supervisor Assignment UI verification ", () => {
 	  await page.waitForTimeout(5000);
 
 
-
+	// Navigate to Employee List
 	const employeeListTab = page.locator('.oxd-topbar-body-nav-tab:nth-child(2)');
 	await employeeListTab.click();
 
+	// Search for the added employee
 	await searchEmployee(page,employeeFirstName);
 
+	// Edit employee record
 	const editEmployeeRecord = page.locator('div.oxd-table-row.oxd-table-row--with-border.oxd-table-row--clickable:nth-child(1) i.oxd-icon.bi-pencil-fill');
 	await page.waitForTimeout(2000);
 	await editEmployeeRecord.click();
 
+	// Navigate to 'Reports To' tab
 	const reportsToTab = page.locator('.orangehrm-tabs-wrapper:nth-child(8) a');
 	await reportsToTab.click();
 
+	// Click 'Add Supervisor' button
 	const addSupervisorBtn = page.locator('div').filter({ hasText: /^Assigned Supervisors Add No Records FoundNameReporting MethodActions$/ }).getByRole('button');
 	await addSupervisorBtn.click();
 
 	// const supervisorNameField = page.locator('input[data-v-75e744cd]');
 	// await supervisorNameField.fill(`${supervisorFirstName} ${supervisorMidName} ${supervisorLastName}`);
 
+	// Select Supervisor
 	await page.getByPlaceholder('Type for hints...').fill(supervisorFirstName);
 	await page.waitForTimeout(2000);
   	await page.getByText(supervisorFirstName).click();
 
+	// Select 'Direct' as Reporting Method
 	await page.getByText('-- Select --').click();
     await page.getByText('Direct', { exact: true }).click();
 
+	// Save Supervisor Assignment
 	await page.getByRole('button', { name: 'Save' }).click();
-
 	await page.waitForTimeout(5000);
 
 	// Capture the screenshot and compare with the baseline
 	await expect(page).toHaveScreenshot('supervisor-assignment.png',{
 		timeout: 2000, // Set the timeout for the screenshot action
 		fullPage: true, // Capture a full-page screenshot
-		mask: [page.locator('div.orangehrm-edit-employee-navigation'),
-			page.locator('div[data-v-6c07a142]').nth(0)
+		mask: [
+			page.locator('div.orangehrm-edit-employee-navigation'),
+			page.locator('div[data-v-6c07a142]').nth(0) // Masking dynamic elements to prevent unnecessary test failures
 		],
 	});
 

specs/visual-automation-snapshots/employee-searchlist.png

@@ -6,18 +6,29 @@ const { userLogin } = require('../../utils/visualUtils/loginUtils');
 // Utiliy function for employee search
 const { searchEmployee } = require('../../utils/visualUtils/searchEmployeeUtils');
 
+/**
+ * Test suite for verifying the UI consistency of the Employee List page after searching.
+ */
 test.describe('Employee Search Results',()=>{
 
+	/**
+	 * Setup function executed before each test.
+	 * Ensures user is logged in and performs a search for "Amy".
+	 */
 	test.beforeEach(async ({page})=>{
 
-		await userLogin(page);
+		await userLogin(page); // Perform user login
 
-		await searchEmployee(page, "Amy");
+		await searchEmployee(page, "Amy"); // Perform search operation
 	});
 
+	/**
+	 * Test to verify the UI consistency of the Employee List page after performing a search.
+	 * Captures and compares a screenshot with the baseline image.
+	 */
 	test('It should Verify the UI consistency of the Employee List page after performing a search.', async({page})=>{
 
-		await page.waitForTimeout(3000);
+		await page.waitForTimeout(3000); // Wait for UI elements to load fully
 
 		// Capture the screenshot and compare with the baseline
 		await expect(page).toHaveScreenshot('employee-searchlist.png',{