progress bar changes

playwright-tests/business-logic/types/Enums.ts

@@ -130,5 +130,26 @@ export enum AppointmentTimeslot{
     overnight = "Overnight"
 }
 
+export enum ProgressBarPercentages {
+            VehicleSelectionPage = '4%',
+            VehicleDamagePage = '16%',
+            EstimatePage = '28%',
+            ServiceZipPage = '32%',
+            VehicleLookupAddressPage = '32%',
+            VehicleLookupLicensePage = '32%',
+            VinLookupPage = '32%',
+            PartQuestionsPage = '40%',
+            MoldingQuestionsPage = '40%',
+            CapabilityQuestionsPage = '40%',
+            VehiclePartsPage = '40%',
+            ServicePackagePage = '48%',
+            InsuranceCompanyPage = '52%',
+            ServiceLocationPage = '60%',
+            SchedulePage = '72%',
+            ContactDetailsPage = '84%',
+            PaymentMethodPage = '92%',
+            OrderConfirmationPage = '100%'
+        }
+
 
 

playwright-tests/pages/BasePage.ts

@@ -1,5 +1,6 @@
 import { IAppointmentDetails, ICustomerDetails } from '@business-logic/types/CustomerDetails';
 import Soft from '@business-logic/validations/Soft';
+import { waitUntil } from '@impl/utils/TimingUtils';
 import test, { expect, type Locator, type Page } from '@playwright/test';
 import { error } from 'console';
 
@@ -24,7 +25,7 @@ export class BasePage {
         this.pageSpinner = page.getByRole('status');
         this.buttonLoadSpin = page.getByRole('alert');
         this.hamburgerMenu = this.page.getByRole('button', { name: 'Hamburger Menu (modal window)' });
-        this.progressBar = this.page.locator('#progress-bar-container progress');
+        this.progressBar = this.page.locator('.progress-bar-inner');
     }
     
     async nextPage() {
@@ -133,8 +134,15 @@ export class BasePage {
     }
 
     async validateProgressBar(progressPercentage: string, timeout: number = 60000) {
-        await this.page.locator('button .loader, .buy-loader, timeout, .modal-loader').waitFor({ state: 'hidden', timeout: timeout });
+        
-        const actualProgressPercentage = await this.progressBar.getAttribute("value") || "Not Found";
+        
+        await waitUntil(async () => {
+                        let loaderElements = await this.page.locator('button .loader, .buy-loader, timeout, .modal-loader').all();
+                        return !(await Promise.any(loaderElements.map(el => el.isVisible())).catch(() => false));
+                    });
+        const actualProgressPercentage = await this.progressBar.evaluate(
+            (element) => element.style.width || "Not Found"
+        );
         Soft.expect(actualProgressPercentage).toBe(progressPercentage);
         console.log(`Progress Bar Percentage: Actual - ${actualProgressPercentage} vs Expected - ${progressPercentage}`);
     }

playwright-tests/pages/CapabilityQuestionsPage.ts

@@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
 import { PartQuestionsPage } from "./PartQuestionPage";
 import { step } from "@business-logic/types/Step";
 import { ITestData } from "@business-logic/types/ITestData";
+import { ProgressBarPercentages } from "@business-logic/types/Enums";
 
 export default class CapabilityQuestionsPage extends PartQuestionsPage {
     url = process.env['BASE_URL']! + '/fmg/?fmgPage=capability-questions';
@@ -14,7 +15,7 @@ export default class CapabilityQuestionsPage extends PartQuestionsPage {
     async handleCapabilityQuestionsPage(testCase: Partial<ITestData>) {
         const { capabilityQuestions } = testCase;
 
-        await this.validateProgressBar("40");
+        await this.validateProgressBar(ProgressBarPercentages.CapabilityQuestionsPage);
         // Validate the capability questions are on the page
         await this.validatePartQuestions(capabilityQuestions!);
 

playwright-tests/pages/ContactDetailsPage.ts

@@ -3,6 +3,7 @@ import { BasePage } from './BasePage';
 import { ICustomerDetails } from '@business-logic/types/CustomerDetails';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 export class ContactDetailsPage extends BasePage {
     readonly page: Page;
@@ -46,7 +47,7 @@ export class ContactDetailsPage extends BasePage {
     async handleContactDetailsPage(testData: Partial<ITestData>) {
         const { customerDetails } = testData;
 
-        await this.validateProgressBar("84");
+        await this.validateProgressBar(ProgressBarPercentages.ContactDetailsPage);
         await this.enterContactDetails(customerDetails!);
         await this.nextPage();
     }

playwright-tests/pages/EstimatePage.ts

@@ -1,6 +1,6 @@
 import { type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
-import { VehicleLookupType } from '@business-logic/types/Enums';
+import { ProgressBarPercentages, VehicleLookupType } from '@business-logic/types/Enums';
 import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
 import { VinLookupPage } from './VinLookupPage';
 import { VehicleLookupAddressPage } from './VehicleLookupAddressPage';
@@ -74,7 +74,7 @@ export class EstimatePage extends BasePage {
     @step("EstimatePage >> Select Lookup Type")
     async handleEstimatePage(testData: Partial<ITestData>) {
         const { vehicleDetails } = testData;
-        await this.validateProgressBar("28");
+        await this.validateProgressBar(ProgressBarPercentages.EstimatePage);
         await this.vehicleLookup(vehicleDetails!);
     }
 }

playwright-tests/pages/InsuranceCompanyPage.ts

@@ -4,6 +4,7 @@ import { IClaimDetails } from '@business-logic/types/CustomerDetails';
 import { step } from '@business-logic/types/Step';
 import TestCase from '@business-logic/types/TestCase';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 
 export class InsuranceCompanyPage extends BasePage {
@@ -52,7 +53,7 @@ export class InsuranceCompanyPage extends BasePage {
     async handleInsuranceCompanyPage(testData: Partial<ITestData>) {
         const { claimDetails } = testData;
         
-        await this.validateProgressBar("52");
+        await this.validateProgressBar(ProgressBarPercentages.InsuranceCompanyPage);
         await this.enterInsuranceCompany(claimDetails!.client!);
         await this.nextPage();
     }

playwright-tests/pages/MoldingQuestionsPage.ts

@@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
 import { PartQuestionsPage } from "./PartQuestionPage";
 import { step } from "@business-logic/types/Step";
 import { ITestData } from "@business-logic/types/ITestData";
+import { ProgressBarPercentages } from "@business-logic/types/Enums";
 
 export default class MoldingQuestionsPage extends PartQuestionsPage {
     url = process.env['BASE_URL']! + '/fmg/?fmgPage=molding-questions';
@@ -14,7 +15,7 @@ export default class MoldingQuestionsPage extends PartQuestionsPage {
     async handleMoldingQuestionsPage(testCase: Partial<ITestData>) {
         const { moldingQuestions } = testCase;
 
-        await this.validateProgressBar("40");
+        await this.validateProgressBar(ProgressBarPercentages.MoldingQuestionsPage);
         await this.validatePartQuestions(moldingQuestions!);
         await this.selectPartQuestionResponses(moldingQuestions!);
         await this.nextPage();

playwright-tests/pages/OrderConfirmationPage.ts

@@ -2,7 +2,7 @@ import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
 import { test } from '@business-logic/types/Test';
 import { ICustomerDetails, IVehicleDetails } from '@business-logic/types/CustomerDetails';
-import { ServicePackage, PaymentType, PaymentMethod, AppointmentType } from '@business-logic/types/Enums';
+import { ServicePackage, PaymentType, PaymentMethod, AppointmentType, ProgressBarPercentages } from '@business-logic/types/Enums';
 import { ITestData } from '@business-logic/types/ITestData';
 import { step } from '@business-logic/types/Step';
 
@@ -179,7 +179,7 @@ export class OrderConfirmationPage extends BasePage {
     @step("OrderConfirmationPage >>  Validate order")
     async verifyOrderConfirmationPage(testData: Partial<ITestData>) {
         await this.page.waitForURL(new RegExp('(.+)confirmation'), {timeout: 60000});
-        await this.validateProgressBar("100");
+        await this.validateProgressBar(ProgressBarPercentages.OrderConfirmationPage);
         await this.validateOrderConfirmationPage(testData);
         const workOrderNumber = await this.logOrderNumber();
         await test.step(`Session Storage Work Order Number: ${workOrderNumber}`, async () => {

playwright-tests/pages/PartQuestionPage.ts

@@ -3,6 +3,7 @@ import { BasePage } from './BasePage';
 import { IPartQuestion } from '@business-logic/types/CustomerDetails';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 export class PartQuestionsPage extends BasePage {
     readonly page: Page;
@@ -63,7 +64,7 @@ export class PartQuestionsPage extends BasePage {
     async handlePartQuestionsPage(testData: Partial<ITestData>) {
         const { partQuestions } = testData;
 
-        await this.validateProgressBar("40");
+        await this.validateProgressBar(ProgressBarPercentages.PartQuestionsPage);
         await this.validatePartQuestions(partQuestions!);
         await this.selectPartQuestionResponses(partQuestions!);
         await this.nextPage();

playwright-tests/pages/PaymentMethodPage.ts

@@ -1,7 +1,7 @@
 import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
 import { IPaymentDetails } from '@business-logic/types/CustomerDetails';
-import { AppointmentTimeslot, AppointmentType, PaymentMethod, PaymentType, ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
+import { AppointmentTimeslot, AppointmentType, PaymentMethod, PaymentType, ProgressBarPercentages, ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
 import { PaymentPage } from './PaymentPage';
 import { AfterpayPage } from './AfterpayPage';
 import { PaypalPage } from './PaypalPage';
@@ -470,7 +470,7 @@ l
     async handlePaymentMethodPage(testData: Partial<ITestData>) {
         const { servicePackage, isRecalVehicle, paymentDetails } = testData;
 
-        await this.validateProgressBar("92");
+        await this.validateProgressBar(ProgressBarPercentages.PaymentMethodPage);
         await this.validatePaymentDetailsPage(testData);
             
         // Verify VAPS wipers on backend for standard and premium packages

playwright-tests/pages/SchedulePage.ts

@@ -2,7 +2,7 @@ import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
 import { IAppointmentDetails, ICustomerDetails } from '@business-logic/types/CustomerDetails';
 import { formatDate, formatTime } from '@impl/utils/DateUtils';
-import { AppointmentTimeslot, AppointmentType, ServiceLocation } from '@business-logic/types/Enums';
+import { AppointmentTimeslot, AppointmentType, ProgressBarPercentages, ServiceLocation } from '@business-logic/types/Enums';
 import { time } from 'console';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
@@ -104,7 +104,7 @@ export class SchedulePage extends BasePage {
     @step("SchedulePage >> Schedule appointment: ")
     async handleSchedulePage(testData: Partial<ITestData>) {
 
-        await this.validateProgressBar("72");
+        await this.validateProgressBar(ProgressBarPercentages.SchedulePage);
         await this.scheduleFirstAppointment(testData);
     }
 }   

playwright-tests/pages/ServiceLocationPage.ts

@@ -1,7 +1,7 @@
 import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
 import { IAppointmentDetails } from '@business-logic/types/CustomerDetails';
-import { AppointmentTimeslot, AppointmentType } from '@business-logic/types/Enums';
+import { AppointmentTimeslot, AppointmentType, ProgressBarPercentages } from '@business-logic/types/Enums';
 import { AddressForm } from './forms/AddressForm';
 import { faker } from '@faker-js/faker';
 import { step } from '@business-logic/types/Step';
@@ -162,7 +162,7 @@ export class ServiceLocationPage extends BasePage {
     @step("ServiceLocationPage >> Select service location: ")
     async handleServiceLocationPage(testData: Partial<ITestData>) {
 
-        await this.validateProgressBar("60");
+        await this.validateProgressBar(ProgressBarPercentages.ServiceLocationPage);
         await this.selectLocation(testData);
         await this.nextPage();
     }

playwright-tests/pages/ServicePackagesPage.ts

@@ -1,6 +1,6 @@
 import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
-import { ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
+import { ProgressBarPercentages, ServicePackage, VehicleDamage } from '@business-logic/types/Enums';
 import { PaymentMethod } from '@business-logic/types/Enums';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
@@ -185,7 +185,7 @@ export class ServicePackagesPage extends BasePage {
     async handleServicePackagePage(testData: Partial<ITestData>) {
         const { customerDetails, paymentMethod, servicePackage, promoCode, canNotRecal, dynamicRecal, hasOemEndorsement, vehicleDamage } = testData;
         
-        await this.validateProgressBar("48");
+        await this.validateProgressBar(ProgressBarPercentages.ServicePackagePage);
         // Define repair damage types (vs. replacement types)
         const repairTypes: VehicleDamage[] = [
             VehicleDamage.WindshieldOneChip,

playwright-tests/pages/ServiceZipPage.ts

@@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
 import { LookupPage } from "./LookupPage";
 import { step } from "@business-logic/types/Step";
 import { ITestData } from "@business-logic/types/ITestData";
+import { ProgressBarPercentages } from "@business-logic/types/Enums";
 
 export class ServiceZipPage extends LookupPage {
 
@@ -14,7 +15,7 @@ export class ServiceZipPage extends LookupPage {
     @step("ZipLookupPage >> Lookup by service ZIP: ")
     async handleServiceZipPage(testData: Partial<ITestData>) {
         const { customerDetails, vehicleDetails, alertFlags } = testData;
-        await this.validateProgressBar("32");
+        await this.validateProgressBar(ProgressBarPercentages.ServiceZipPage);
         await this.enterZip(customerDetails!.address.postalCode!);
         await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
     }

playwright-tests/pages/VehicleDamagePage.ts

@@ -1,6 +1,6 @@
 import { type Locator, type Page, expect, test } from '@playwright/test';
 import { BasePage } from './BasePage';
-import { SideDoorDamage, VehicleDamage, WindshieldDamage } from '@business-logic/types/Enums';
+import { ProgressBarPercentages, SideDoorDamage, VehicleDamage, WindshieldDamage } from '@business-logic/types/Enums';
 import TestSuccessAlert from '@business-logic/types/TestSuccessAlert';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
@@ -169,7 +169,7 @@ export class VehicleDamagePage extends BasePage {
         const {vehicleDamage} = testData;
         const {isRepairReplace, isRepairOnly} = testData.alertFlags || {};
         
-        await this.validateProgressBar("16");
+        await this.validateProgressBar(ProgressBarPercentages.VehicleDamagePage);
         await this.selectDamage(vehicleDamage!);
         // Handle alert conditions for vehicle damage
         if (isRepairReplace) {

playwright-tests/pages/VehicleLookupAddressPage.ts

@@ -5,6 +5,7 @@ import { VehicleSelectionForm } from './forms/VehicleSelectionForm';
 import { ICustomerDetails, IVehicleDetails } from '@business-logic/types/CustomerDetails';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 export class VehicleLookupAddressPage extends LookupPage {
     readonly addressForm: AddressForm;
@@ -32,7 +33,7 @@ export class VehicleLookupAddressPage extends LookupPage {
     async handleVehicleLookupAddressPage(testData: Partial<ITestData>) {
         const { customerDetails, vehicleDetails, alertFlags } = testData;
 
-        await this.validateProgressBar("32");
+        await this.validateProgressBar(ProgressBarPercentages.VehicleLookupAddressPage);
         await this.lookupVehicleByAddress(customerDetails!, vehicleDetails!);
         await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
     }

playwright-tests/pages/VehicleLookupLicensePage.ts

@@ -3,6 +3,7 @@ import { LookupPage } from './LookupPage';
 import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 export class VehicleLookupLicensePage extends LookupPage {
     readonly licensePlateNumTextBox: Locator;
@@ -31,7 +32,7 @@ export class VehicleLookupLicensePage extends LookupPage {
     async handleVehicleLookupLicensePage(testData: Partial<ITestData>) {
         const { customerDetails, vehicleDetails, alertFlags } = testData;
 
-        await this.validateProgressBar("32");
+        await this.validateProgressBar(ProgressBarPercentages.VehicleLookupLicensePage);
         await this.enterPlateDetails(vehicleDetails!);
         await this.enterZip(customerDetails!.address.postalCode!);
         await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);

playwright-tests/pages/VehiclePartsPage.ts

@@ -2,6 +2,7 @@ import { Page } from "@playwright/test";
 import { PartQuestionsPage } from "./PartQuestionPage";
 import { step } from "@business-logic/types/Step";
 import { ITestData } from "@business-logic/types/ITestData";
+import { ProgressBarPercentages } from "@business-logic/types/Enums";
 
 export default class VehiclePartQuestionsPage extends PartQuestionsPage{
     url = process.env['BASE_URL']! + '/fmg/?fmgPage=vehicle-parts';
@@ -14,7 +15,7 @@ export default class VehiclePartQuestionsPage extends PartQuestionsPage{
     async handleVehiclePartsPage(testCase: Partial<ITestData>) {
         const { vehiclePartQuestions } = testCase;
 
-        await this.validateProgressBar("40");
+        await this.validateProgressBar(ProgressBarPercentages.VehiclePartsPage);
         await this.validatePartQuestions(vehiclePartQuestions!);
         await this.selectPartQuestionResponses(vehiclePartQuestions!);
         await this.nextPage();

playwright-tests/pages/VehicleSelectionPage.ts

@@ -4,6 +4,7 @@ import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
 import TestSuccessAlert from '@business-logic/types/TestSuccessAlert';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 export class VehicleSelectionPage extends BasePage {
     readonly page: Page;
@@ -47,7 +48,7 @@ export class VehicleSelectionPage extends BasePage {
 
     @step("VehicleSelectionPage >> Select Vehicle: ")
     async handleVehicleSelectionPage(testData: Partial<ITestData>) {
-        await this.validateProgressBar("4");
+        await this.validateProgressBar(ProgressBarPercentages.VehicleSelectionPage);
         const { vehicleDetails } = testData;
         const { isHeavyTruckVehicle, isSplitWindshield } = testData.alertFlags || {};
          

playwright-tests/pages/VinLookupPage.ts

@@ -2,6 +2,7 @@ import { type Locator, type Page } from '@playwright/test';
 import { LookupPage } from './LookupPage';
 import { step } from '@business-logic/types/Step';
 import { ITestData } from '@business-logic/types/ITestData';
+import { ProgressBarPercentages } from '@business-logic/types/Enums';
 
 export class VinLookupPage extends LookupPage {
     readonly vinLookupTextBox: Locator;
@@ -27,7 +28,7 @@ export class VinLookupPage extends LookupPage {
     async handleVehicleLookupVinPage(testData: Partial<ITestData>) {
         const { customerDetails, vehicleDetails, alertFlags } = testData;
 
-        await this.validateProgressBar("32");
+        await this.validateProgressBar(ProgressBarPercentages.VinLookupPage);
         await this.enterVin(vehicleDetails!.vin!);
         await this.enterZip(customerDetails!.address.postalCode!);
         await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);