jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding afterpay breakout changes

Browse source
This commit is contained in:
kpatel8hs4io 2025-10-22 11:14:24 -04:00
parent 94174fd53b
commit 84768ef658
13 changed files with 258 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
playwright-tests/.env.dev
View file

@ -9,11 +9,11 @@ SKIP_CONTENT_SITE=false
# Base URLs by environment
# qa
BASE_URL="https://www-qa2.safelite.com/"
# BASE_URL="https://www-qa2.safelite.com/"
# local version of FMG (after running the local server)
# BASE_URL="http://localhost:8080/fmg/"
# qa with skipToInsurance Turned Off
# BASE_URL="https://fixmyglassqa.safelite.com/?cns=all&experiments=ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_VinAndEmailOptional=true,NextGen_IGQSkipToInsurance=NextGen_IGQSkipToInsurance_V1=NextGen_IGQSkipToInsurance_CONTROL=true"
BASE_URL="https://www-qa2.safelite.com/?&experiments=ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_VinAndEmailOptional=true"
# sys
# BASE_URL="https://www-test2.safelite.com/fmg/?fmgPage=vehicle"
# dev

1
playwright-tests/framework/TestData.ts
View file

@ -5,4 +5,5 @@ export interface ITestData extends base {
// Put any project-specific data here. Anything useful to other Safelite projects should be submitted as a pull request to safelite-playwright-core.
paymentMethod: PaymentMethod
isOptedInForTextMessages: boolean
totalAmount?: number
}

47
playwright-tests/pages/BasePage.ts
View file

@ -3,6 +3,7 @@ import { Soft } from 'safelite-playwright-core';
import { waitUntil } from 'safelite-playwright-core';
import test, { expect, type Locator, type Page } from '@playwright/test';
import { error } from 'console';
import { ITestData } from 'framework/TestData';
/**
* Base class for all page objects.
@ -18,7 +19,7 @@ export class BasePage {
readonly hamburgerMenu: Locator;
readonly progressBar: Locator;
constructor(page: Page){
constructor(page: Page) {
this.page = page;
this.continueButton = page.locator('[id="infoBox"]').getByRole('button');
this.backButton = page.locator('[id="infoBox"]').getByRole('link');
@ -29,16 +30,17 @@ export class BasePage {
}
async nextPage() {
await waitUntil(async () => {;
return (await this.continueButton.getAttribute('aria-disabled')) !== 'true'
});
await waitUntil(async () => {
;
return (await this.continueButton.getAttribute('aria-disabled')) !== 'true'
});
await this.continueButton.click();
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));
});
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));
});
}
@ -53,10 +55,10 @@ export class BasePage {
}).toPass({ timeout: 240_000 });
}
async fillAndValidate(element: Locator, value: string){
async fillAndValidate(element: Locator, value: string) {
await expect(async () => {
var text = await element.textContent();
if(text !== value) {
if (text !== value) {
await element.clear();
await element.fill(value);
}
@ -79,7 +81,7 @@ export class BasePage {
}
await page.waitForTimeout(100); // Small delay before retrying
}
console.log(`Failed to click the the element within ${timeout/1000} seconds` + error);
console.log(`Failed to click the the element within ${timeout / 1000} seconds` + error);
}
async logReferralNumber() {
@ -107,7 +109,7 @@ export class BasePage {
const apiUrl = `https://digitalapi.${process.env['PLAYWRIGHT_ENV']!.replace('sys', 'test').toLowerCase()}.safelite.io/schedule/api/v1/schedule/mobile-time-slots`;
await this.page.route(apiUrl, async (route) => {
const currentDate = new Date().toISOString().split('T')[0]; // e.g., "2025-07-23"
if(route.request().postDataJSON().startDate === currentDate) {
if (route.request().postDataJSON().startDate === currentDate) {
const response = await route.fetch();
const responseBody = await response.json();
@ -130,13 +132,30 @@ export class BasePage {
});
}
async getRepairPartsTotal(testData: Partial<ITestData>) {
const apiUrl = `https://digitalapi.${process.env['PLAYWRIGHT_ENV']!.replace('sys', 'test').toLowerCase()}.safelite.io/price/api/v1/price/order-items`;
await this.page.on('response', async (response) => {
const orderItemRequest = response.request();
if (response.request().url() === apiUrl && orderItemRequest.postDataJSON().lineItems.some(item => item.partNumber === "WSREPAIR")) {
const responseBody = await response.json();
const targetParts = ['WSREPAIR']; // ["SUPPLIES-REPAIR", "WSREPAIR"];
testData.totalAmount = responseBody.lineItems
.filter(item => targetParts.includes(item.partNumber))
.reduce((sum: number, item: any) => {
return sum + item.laborAmount + item.sellingPrice + item.kitPrice;
}, 0).toFixed(2);
}
});
testData.totalAmount! > 0 ? console.log(`Total Amount: ${testData.totalAmount}`) : console.error('No repair parts found in the order items.');
}
async validateProgressBar(progressPercentage: string, timeout: number = 60000) {
// This section has been commented out until progress bar work is completed for parity.
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));
});
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));
});
// Take a screenshot of the page before validating the progress bar
await this.page.screenshot({ path: `test-results\\ortoni-data\\progress-bar-${Date.now()}.png`, fullPage: true });

2
playwright-tests/pages/HomePage.ts
View file

@ -30,7 +30,7 @@ export class HomePage extends BasePage {
super(page);
this.page = page;
this.letsGetStartedButton = this.page.locator('a.btn.btn-primary.ghost');
this.letsGetStartedButton = this.page.locator('.hero-content #zipCodeTextboxButton');
this.cusmodalPopup = this.page.locator('#Cusmodalpopup');
this.closePopupButton = this.page.getByRole('button', { name: '×' });

10
playwright-tests/pages/LookupPage.ts
View file

@ -1,6 +1,7 @@
import { type Locator, type Page, expect } from '@playwright/test';
import { BasePage } from './BasePage';
import { IAlertFlags, TestSuccessAlert } from 'safelite-playwright-core';
import { IAlertFlags, TestSuccessAlert, VehicleDamage } from 'safelite-playwright-core';
import { ITestData } from 'framework/TestData';
import { VehicleLookupType } from 'safelite-playwright-core';
export class LookupPage extends BasePage {
@ -105,8 +106,9 @@ export class LookupPage extends BasePage {
}
}
async handleZipValidation(zip: string, lookupType: VehicleLookupType, alertFlags?: IAlertFlags): Promise<boolean> {
async handleZipValidation(testData: Partial<ITestData>, zip: string, lookupType: VehicleLookupType, alertFlags?: IAlertFlags): Promise<boolean> {
let { vehicleDamage } = testData;
// Only proceed with validation if alertFlags is provided
if (alertFlags) {
if (alertFlags.isUnserviceableZip) {
@ -123,6 +125,10 @@ export class LookupPage extends BasePage {
}
}
if (vehicleDamage?.some(damage => damage === VehicleDamage.WindshieldThreeChips)) {
await this.getRepairPartsTotal(testData);
};
// If no alert flags or no matching condition, just continue
await this.nextPage();
return true;

1
playwright-tests/pages/OrderConfirmationPage.ts
View file

@ -169,6 +169,7 @@ export class OrderConfirmationPage extends BasePage {
: appointmentDetails?.serviceLocation == ServiceLocation.InShop
? formattedExpectedAppointmentDate + `${customerDetails!.apptTime}`
: formattedExpectedAppointmentDate + "Drop off before 9:30 AM"
// : formattedExpectedAppointmentDate + "before 9:30 AM"
);
appointmentSummary.push("Add to calendar");
appointmentSummary.push(

137
playwright-tests/pages/PaymentMethodPage.ts
View file

@ -1,7 +1,7 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { IPaymentDetails, Soft, waitUntil } from 'safelite-playwright-core';
import { AppointmentTimeslot, ServiceLocation, PaymentType, ServicePackage, VehicleDamage, } from 'safelite-playwright-core';
import { AppointmentTimeslot, ServiceLocation, PaymentType, ServicePackage, VehicleDamage, } from 'safelite-playwright-core';
import { PaymentMethod, ProgressBarPercentages } from 'framework/localTypes/Enums';
import { PaymentPage } from './PaymentPage';
import { AfterpayPage } from './AfterpayPage';
@ -26,6 +26,8 @@ export class PaymentMethodPage extends BasePage {
readonly recalibrationCheckbox: Locator;
readonly paymentPage: PaymentPage;
readonly paypalPage: PaypalPage;
readonly afterPayBreakoutSection: Locator;
readonly afterPayToggle: Locator;
// Payment detail page validation locators
readonly reviewTable: Locator;
@ -64,7 +66,7 @@ export class PaymentMethodPage extends BasePage {
// Section locators - find by heading text
this.serviceLocationDateandTimeSection = this.page.locator('.review-table').locator('div .service-location');
this.vehicleDamageLocationsSection= this.page.locator('.review-table').locator('div.py-3[damagelocationswidgetname="DamageLocationsWidget"]');
this.vehicleDamageLocationsSection = this.page.locator('.review-table').locator('div.py-3[damagelocationswidgetname="DamageLocationsWidget"]');
this.contactDetailsSection = this.page.locator('.review-table').locator('div', { hasText: 'Contact details' }).first();
// Cart panel elements
@ -75,6 +77,8 @@ export class PaymentMethodPage extends BasePage {
this.wiperBladesText = this.page.locator('div', { hasText: /^New wiper blades$/ });
this.rainDefenseText = this.page.locator('div', { hasText: /^Rain Defense™$/ });
this.deductibleText = this.page.locator('#deductible-value');
this.afterPayBreakoutSection = this.page.locator('div.alert-info:has(.after-pay)');
this.afterPayToggle = this.page.locator('.after-pay-toggle');
}
async validatePaymentDetailsPage(testData: Partial<ITestData>) {
@ -84,11 +88,11 @@ export class PaymentMethodPage extends BasePage {
isUseVehicleOnPolicy, paymentMethod, vehicleDamage } = testData;
// Wait for review table to be visible to ensure page is loaded
await this.appointmentDetailsDropdown.waitFor({state: "visible"});
await this.appointmentDetailsDropdown.waitFor({ state: "visible" });
await this.appointmentDetailsDropdown.click().then(
async () => {
await waitUntil(async () => {
return (await this.page.locator('.review-toggle.expanded').evaluate(el => window.getComputedStyle(el, ':after').transform)) === 'matrix(-1, 0, 0, -1, 0, 0)';
await waitUntil(async () => {
return (await this.page.locator('.review-toggle.expanded').evaluate(el => window.getComputedStyle(el, ':after').transform)) === 'matrix(-1, 0, 0, -1, 0, 0)';
});
}
);
@ -102,7 +106,7 @@ export class PaymentMethodPage extends BasePage {
let actualAppointmentDetails = await this.getActualAppointmentDetails();
for (const key in expectedAppointmentDetails) {
Soft.expect(actualAppointmentDetails[key]?.map(item => item.toLowerCase()))
.toEqual(expectedAppointmentDetails[key].map(item => item.toLowerCase()));
.toEqual(expectedAppointmentDetails[key].map(item => item.toLowerCase()));
}
// Expand cart to see all details
@ -128,8 +132,8 @@ export class PaymentMethodPage extends BasePage {
if (paymentDetails?.paymentType === PaymentType.PayAtService) {
Soft.expect(finalAmountDueAmount).toBeGreaterThan(0);
} else if (paymentDetails?.paymentType === PaymentType.Credit ||
paymentDetails?.paymentType === PaymentType.Paypal ||
paymentDetails?.paymentType === PaymentType.AfterPay) {
paymentDetails?.paymentType === PaymentType.Paypal ||
paymentDetails?.paymentType === PaymentType.AfterPay) {
// For payment types that charge immediately, amount due could be 0
// This logic might need adjusting based on actual business rules
}
@ -190,7 +194,7 @@ export class PaymentMethodPage extends BasePage {
async executePayment(paymentDetails: IPaymentDetails, isRecalVehicle: boolean) {
const browserContext = this.page.context();
switch(paymentDetails.paymentType) {
switch (paymentDetails.paymentType) {
case PaymentType.Credit:
await this.selectCreditCard();
await this.nextPage();
@ -228,15 +232,15 @@ export class PaymentMethodPage extends BasePage {
}
}
async selectPaypal(){
async selectPaypal() {
await this.payNowButton.click();
}
l
async selectCreditCard(){
l
async selectCreditCard() {
await this.payNowButton.click();
}
async selectPayAtService(isRecalVehicle: boolean){
async selectPayAtService(isRecalVehicle: boolean) {
if (await this.payAtServiceButton.isVisible()) {
await this.payAtServiceButton.click();
} else if (isRecalVehicle) {
@ -282,9 +286,9 @@ l
async getExpectedVehicleDamageAndVehicle(testdata: Partial<ITestData>, expectedServicePackageDetails: Map<string, string[]>): Promise<any> {
const {vehicleDetails, vehicleDamage} = testdata;
const { vehicleDetails, vehicleDamage } = testdata;
let vehicleDamageText: string= '';
let vehicleDamageText: string = '';
if (vehicleDamage?.find((item: VehicleDamage) => item == VehicleDamage.WindshieldOneChip || item == VehicleDamage.WindshieldTwoChips || item == VehicleDamage.WindshieldThreeChips)) {
vehicleDamageText = "Repair the windshield of your";
}
@ -310,7 +314,7 @@ l
}
if (vehicleDamage?.find((item: VehicleDamage) => item == VehicleDamage.DriverQuarterPanel)) {
vehicleDamageText.includes("Replace") ? vehicleDamageText += ", Driver Quarter Glass" : "Replace the Driver Quarter Glass";
vehicleDamageText.includes("Replace") ? vehicleDamageText += ", Driver Quarter Glass" : "Replace the Driver Quarter Glass";
}
if (vehicleDamage?.find((item: VehicleDamage) => item == VehicleDamage.PassengerVentGlass)) {
@ -326,16 +330,15 @@ l
}
if (vehicleDamage?.find((item: VehicleDamage) => item == VehicleDamage.PassengerQuarterPanel)) {
vehicleDamageText.includes("Replace") ? vehicleDamageText += ", Passenger Quarter Glass" : "Replace the Passenger Quarter Glass";
vehicleDamageText.includes("Replace") ? vehicleDamageText += ", Passenger Quarter Glass" : "Replace the Passenger Quarter Glass";
}
if (vehicleDamage?.find((item: VehicleDamage) => item == VehicleDamage.RearWindow || item == VehicleDamage.RearSliding)) {
vehicleDamageText.includes("Replace") ? vehicleDamageText += ", Back Glass" : "Replace the Back Glass";
vehicleDamageText.includes("Replace") ? vehicleDamageText += ", Back Glass" : "Replace the Back Glass";
}
// Replace last comma with " and" if there are multiple damages
if (vehicleDamageText.includes(",") && vehicleDamageText !== "Replace the windshield")
{
if (vehicleDamageText.includes(",") && vehicleDamageText !== "Replace the windshield") {
vehicleDamageText = vehicleDamageText.replace(/,([^,]*)$/, " and$1") + " of your";
}
@ -344,11 +347,11 @@ l
}
async expectedServicePackageDetails(testData: Partial<ITestData>, expectedServicePackageDetails: Map<string, string[]>): Promise<any> {
const {servicePackage} = testData;
const { servicePackage } = testData;
let localStorage= JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
let localStorage = JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
let isRepair = localStorage.order.damage.isRepair as boolean;
let isInsurance = localStorage.order.payment.isInsurance as boolean;
let isInsurance = localStorage.order.payment.isInsurance as boolean;
let hasNonWindshieldGlass: boolean = false;
if (!isRepair) {
hasNonWindshieldGlass = localStorage.order.lineItems.glassParts.find((item: any) => item.partType !== "WINDSHIELD") ? true : false;
@ -363,32 +366,31 @@ l
let recalRequired = !isRepair && (isInsurance || isCaliforniaState) && hasRecalPart && canSafeliteRecalibrate
let stringForRepair: string[] = ["Expert windshield repair", "Exclusive resin sealant", "Nationwide lifetime guarantee"];
let stringIfRecal = isRepair
? ""
: recalRequired
? " and recalibration"
: "";
? ""
: recalRequired
? " and recalibration"
: "";
let stringForReplace: string[] = [hasNonWindshieldGlass ? "New replacement glass" : "New replacement windshield", "Expert installation" + `${stringIfRecal}`, "Nationwide lifetime warranty"];
switch (servicePackage)
{
case ServicePackage.GlassOnly:
expectedServicePackageDetails["Glass service only"] = isRepair
? stringForRepair
: stringForReplace;
break;
case ServicePackage.Standard:
stringForRepair.push("New wiper blades");
stringForReplace.push("New wiper blades");
expectedServicePackageDetails["Standard service"] = isRepair
? stringForRepair
: stringForReplace;
break;
case ServicePackage.Premium:
stringForRepair.push("New wiper blades", "Rain repel treatment");
stringForReplace.push("New wiper blades", "Rain repel treatment");
expectedServicePackageDetails["Premium service"] = isRepair
? stringForRepair
: stringForReplace;
break;
switch (servicePackage) {
case ServicePackage.GlassOnly:
expectedServicePackageDetails["Glass service only"] = isRepair
? stringForRepair
: stringForReplace;
break;
case ServicePackage.Standard:
stringForRepair.push("New wiper blades");
stringForReplace.push("New wiper blades");
expectedServicePackageDetails["Standard service"] = isRepair
? stringForRepair
: stringForReplace;
break;
case ServicePackage.Premium:
stringForRepair.push("New wiper blades", "Rain repel treatment");
stringForReplace.push("New wiper blades", "Rain repel treatment");
expectedServicePackageDetails["Premium service"] = isRepair
? stringForRepair
: stringForReplace;
break;
}
return expectedServicePackageDetails;
}
@ -396,8 +398,8 @@ l
async getExpectedServiceLocationDateAndTimeSection(testData: Partial<ITestData>, expectedServicePackageDetails: Map<string, string[]>): Promise<any> {
const { customerDetails, appointmentDetails } = testData;
let serviceLocationTitle = appointmentDetails?.serviceLocation == ServiceLocation.Mobile
? "We're coming to you"
: "You're coming to us";
? "We're coming to you"
: "You're coming to us";
let serviceLocationText = appointmentDetails?.serviceLocation == ServiceLocation.Mobile
? appointmentDetails?.serviceAddress
? appointmentDetails.serviceAddress.street + ", " + appointmentDetails.serviceAddress.city + ", " + appointmentDetails.serviceAddress.state + " " + appointmentDetails.serviceAddress.postalCode
@ -451,6 +453,40 @@ l
return expectedServicePackageDetails;
}
async ValidateAfterPayBreakOutSection() {
/*const vuexState = JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
const isInsurance = vuexState.order.payment.isInsurance;
const currentDeductible = vuexState.order.policy.currentDeductible;
const isVerified = vuexState.order.payment.insuranceCoverage.isVerified;*/
const amountDueText = await this.amountDueTextField.first().textContent();
const verifyAfterpayBreakout = amountDueText?.includes('$')
? Number.parseFloat(amountDueText.replace(/[^0-9.]/g, '')) > 0
: false
if (verifyAfterpayBreakout) {
const afterPayAmountString = await this.afterPayBreakoutSection.locator('.afterpay-amount').textContent();
const afterPayAmount = Number.parseFloat(afterPayAmountString!.replace(/[^0-9.]/g, ''));
Soft.expect(afterPayAmount, `AfterPayAmount (${afterPayAmount}) is > 0`).toBeGreaterThan(0);
await this.afterPayToggle.click().then(
async () => {
await waitUntil(async () => {
return (await this.page.locator('.after-pay-toggle.expanded').evaluate(el => window.getComputedStyle(el, ':after').transform)) === 'matrix(-1, 0, 0, -1, 0, 0)';
});
}
);
const afterPayCards = await this.page.locator('.after-pay-details .payment-card').all();
Soft.expect(afterPayCards.length, `There are 4 afterpay cards`).toBe(4);
for (const afterPayCard of afterPayCards) {
const afterPayAmountWithinCardString = await afterPayCard.locator('.amount-due').textContent();
const afterPayAmountWithinCard = Number.parseFloat(afterPayAmountWithinCardString!.replace(/[^0-9.]/g, ''));
Soft.expect(afterPayAmountWithinCard, `AfterPayAmount (${afterPayAmountWithinCard}) > 0`).toBeGreaterThan(0);
}
}
}
async getFormattedAppointmentDate(appointmentDate: string) {
// Parse the original date
@ -467,6 +503,7 @@ l
await this.validateProgressBar(ProgressBarPercentages.PaymentMethodPage);
await this.validatePaymentDetailsPage(testData);
await this.ValidateAfterPayBreakOutSection();
// Verify VAPS wipers on backend for standard and premium packages
if (servicePackage === ServicePackage.Standard || servicePackage === ServicePackage.Premium) {

7
playwright-tests/pages/PaypalPage.ts
View file

@ -13,19 +13,21 @@ export class PaypalPage extends BasePage {
readonly completePurchaseButton: Locator;
readonly payWithRadioButton: Locator;
readonly payButton: Locator;
readonly tryAnotherWayButton: Locator;
constructor(page: Page) {
super(page);
this.page = page;
this.usernameTextBox = page.getByPlaceholder('Email');
this.usernameTextBox = page.locator('#email');
this.nextButton = page.getByRole('button', { name: 'Next' });
this.loginWithPasswordButton = page.getByRole('link', { name: 'Log in with a password instead' })
this.usePasswordInsteadButton = page.getByRole('button', { name: 'Use Password Instead' });
this.usePasswordInsteadButton = page.getByRole('button', { name: 'Use password instead' });
this.passwordTextBox = page.getByPlaceholder('Password');
this.paypalLoginButton = page.getByRole('button', { name: 'Log In', exact: true });
this.completePurchaseButton = page.getByTestId('submit-button-initial')
this.payWithRadioButton = page.getByRole('button').filter({ hasText: 'Pay with' });
this.payButton = page.locator('#one-time-cta');
this.tryAnotherWayButton = page.getByRole('button', { name: 'Try another way' });
}
async completePaypalPurchase(paymentDetails: IPaymentDetails){
@ -41,6 +43,7 @@ export class PaypalPage extends BasePage {
} else {
await this.usernameTextBox.fill(paymentDetails.username!);
await this.nextButton.click();
await this.tryAnotherWayButton.click();
await this.usePasswordInsteadButton.click();
await this.passwordTextBox.fill(paymentDetails.password!);
await this.paypalLoginButton.click();

2
playwright-tests/pages/SchedulePage.ts
View file

@ -212,7 +212,7 @@ export class SchedulePage extends BasePage {
let formattedTimeSlot: string = "";
if (selectedTimeSlot.toLowerCase().includes("drop"))
{
formattedTimeSlot = selectedTimeSlot.includes("overnight") ? "drop off by 5:30 pm on the night of your scheduled appointment. Pick-up time dependent on shop schedule" : "drop off before 9:30 AM";
formattedTimeSlot = selectedTimeSlot.includes("overnight") ? "drop off by 5:30 pm on the night of your scheduled appointment. Pick-up time dependent on shop schedule" : "before 9:30 AM" // "drop off before 9:30 AM";
}
else if (selectedTimeSlot.includes("-") || selectedTimeSlot.includes("Earlybird")) // - means Mobile time slot where service time is between 8:00 AM - 12:00 PM
{

82
playwright-tests/pages/ServicePackagesPage.ts
View file

@ -1,6 +1,6 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { AppointmentTimeslot, ServicePackage, VehicleDamage } from 'safelite-playwright-core';
import { AppointmentTimeslot, ServicePackage, Soft, VehicleDamage } from 'safelite-playwright-core';
import { ProgressBarPercentages } from 'framework/localTypes/Enums';
import { PaymentMethod } from "framework/localTypes/Enums";
import { step } from 'framework/localTypes/Step';
@ -14,6 +14,8 @@ export class ServicePackagesPage extends BasePage {
readonly payOnMyOwnButton: Locator;
readonly paywithInsuranceButton: Locator;
readonly iHavePromoCodeButton: Locator;
readonly afterPayBanner: Locator;
readonly glassOnlypackagePrice: Locator;
//Your quote is almost ready modal
readonly skipQuoteEmailButton: Locator;
@ -32,16 +34,18 @@ export class ServicePackagesPage extends BasePage {
this.standardPackageButton = this.page.getByText('Standard');
this.premiumPackageButton = this.page.getByText('Premium');
this.glassOnlyButton = this.page.getByText('Glass service only', { exact: true });
this.payOnMyOwnButton = this.page.locator('label').filter({ hasText: 'Pay on my own' }).locator('div');
this.paywithInsuranceButton = this.page.locator('label').filter({ hasText: 'Pay with insurance' }).locator('div');
this.payOnMyOwnButton = this.page.locator('label').filter({ hasText: 'Pay on my own' });
this.paywithInsuranceButton = this.page.locator('label').filter({ hasText: 'Pay with insurance' });
this.iHavePromoCodeButton = this.page.getByRole('link', { name: 'I have a promo code' });
this.skipQuoteEmailButton = this.page.getByRole('button', { name: 'Skip' });
this.emailInput = this.page.getByRole('textbox', { name: 'Enter your email address' });
this.getMyQuoteButton = this.page.getByRole('button', { name: 'Send' });
this.closeButton = this.page. getByRole('dialog').locator('button').filter({ hasText: 'Close' });
this.closeButton = this.page.getByRole('dialog').locator('button').filter({ hasText: 'Close' });
this.promoCodeTextbox = this.page.getByLabel('Enter a promo code');
this.applyPromoButton = this.page.getByRole('button', { name: 'Apply promo code' });
this.repeatedClicksModalCloseButton = this.page.locator('.QSISlider').locator('img[src*=\'close\']');
this.afterPayBanner = this.page.locator('#afterpay-banner');
this.glassOnlypackagePrice = this.page.locator('fieldset:has(legend#ServicePackageQuestion) label').filter({ hasText: 'Glass service only' }).locator('.pricing-info');
}
async selectPaymentMethod(method: PaymentMethod): Promise<void> {
@ -65,6 +69,10 @@ export class ServicePackagesPage extends BasePage {
}
}
async getVuex() {
return JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
}
async handleQuotePopup(email?: string): Promise<void> {
await this.emailInput.waitFor({ state: 'visible' });
if (await this.emailInput.isVisible()) {
@ -90,13 +98,13 @@ export class ServicePackagesPage extends BasePage {
async verifyCanNotRecal(): Promise<boolean> {
// Get Vuex state from localStorage
const vuexState = JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
const vuexState = await this.getVuex();
// Validate in the backend to make sure the can safelite recalibrate data is correct
if (vuexState.order?.lineItems?.glassParts?.length > 0) {
for (const glassPart of vuexState.order.lineItems.glassParts) {
await expect(glassPart.canSafeliteRecalibrate).toBe(false);
await expect(glassPart.requiresRecalibration).toBe(true);
expect(glassPart.canSafeliteRecalibrate).toBe(false);
expect(glassPart.requiresRecalibration).toBe(true);
}
return true;
}
@ -154,15 +162,15 @@ export class ServicePackagesPage extends BasePage {
const glassParts = vuexState.order?.lineItems?.glassParts;
const WINDSHIELD_TYPES = [
  "SINGLE WINDSHIELD",
  "DRIVER SPLIT WINDSHIELD",
  "PASSENGER SPLIT WINDSHIELD"
"SINGLE WINDSHIELD",
"DRIVER SPLIT WINDSHIELD",
"PASSENGER SPLIT WINDSHIELD"
];
if (glassParts?.length > 0) {
for (const partType of vehicleDamage) {
// Normalize part type to "WINDSHIELD" if it matches any of the defined types (Split Windshield types)
  const normalizedPartType = WINDSHIELD_TYPES.includes(partType) ? "WINDSHIELD" : partType;
const normalizedPartType = WINDSHIELD_TYPES.includes(partType) ? "WINDSHIELD" : partType;
const hasPartType = glassParts.some(glassPart => glassPart.partType === normalizedPartType);
@ -173,6 +181,38 @@ export class ServicePackagesPage extends BasePage {
}
}
async VerifyAfterpayBreakout() {
const isAfterPayBannerVisible = await this.afterPayBanner.isVisible({ timeout: 2000 })
await Soft.expect(isAfterPayBannerVisible, "AfterPay Banner is visible.").toBeTruthy();
const localStorage = await this.getVuex();
let isRepair = localStorage.order.damage.isRepair as boolean;
const servicePackages = await this.page.locator('fieldset:has(legend#ServicePackageQuestion) label').filter({ visible: true }).all();
for (const servicePackage of servicePackages) {
const servicePackageButtonLabel = await servicePackage.getAttribute('buttonlabel');
if (!isRepair) {
const hasRecalPart = localStorage.order.lineItems.glassParts.find((item: any) => item.requiresRecalibration === true) ? true : false;
const canSafeliteRecalibrate = localStorage.order.lineItems.glassParts.find((item: any) => item.canSafeliteRecalibrate === true) ? true : false;
if (hasRecalPart && canSafeliteRecalibrate) {
const servicePackageTextContent = await servicePackage.textContent();
await Soft.expect(servicePackageTextContent, `${servicePackageButtonLabel} package contains "Expert installation and recalibration"`).toContain('Expert installation and recalibration');
}
}
const afterPayPricingInfo = await servicePackage.locator('.pricing-info').filter({ visible: true }).textContent();
const classAttribute = await this.payOnMyOwnButton.getAttribute('class');
const isPayOnMyOwnSelected = classAttribute?.includes('selected');
if (isPayOnMyOwnSelected) {
const regex = /^\$\d+.\d{2}in\s4\sinterest-free\spayments\sor\s(\$\d+.\d{2}){1,2}\sin\ssingle\spayment\s$/;
const priceInfoRegexMatch = regex.test(afterPayPricingInfo!)
await Soft.expect(priceInfoRegexMatch, `${servicePackageButtonLabel} Package: Afterpay breakout text matches the regex`).toBeTruthy();
} else {
const regex = /^As\slittle\sas\s\$\d+.\d{2}$/;
const priceInfoRegexMatch = regex.test(afterPayPricingInfo!)
await Soft.expect(priceInfoRegexMatch, `${servicePackageButtonLabel} Package: Afterpay breakout text matches the regex`).toBeTruthy();
}
}
}
async verifyOEMPart(): Promise<void> {
// Get Vuex state from localStorage
const vuexState = JSON.parse(await this.page.evaluate('localStorage.getItem(\'vuex\')'));
@ -189,7 +229,7 @@ export class ServicePackagesPage extends BasePage {
@step("ServicePackagePage >> Select Payment Method and Service Type: ")
async handleServicePackagePage(testData: Partial<ITestData>) {
const { customerDetails, paymentMethod, paymentDetails, servicePackage, isCanNotRecal, isDynamicRecal, hasOemEndorsement, vehicleDamage, appointmentDetails } = testData;
const { customerDetails, paymentMethod, paymentDetails, servicePackage, isCanNotRecal, isDynamicRecal, hasOemEndorsement, vehicleDamage, appointmentDetails, totalAmount } = testData;
await this.validateProgressBar(ProgressBarPercentages.ServicePackagePage);
// Define repair damage types (vs. replacement types)
@ -205,9 +245,27 @@ export class ServicePackagesPage extends BasePage {
});
await this.handleQuotePopup(customerDetails!.email!);
// validate total amount for 3 chip repair
if (vehicleDamage?.some(damage => damage === VehicleDamage.WindshieldThreeChips)) {
const priceText = await this.glassOnlypackagePrice.textContent() || '$0.00';
// Regex to match dollar amounts like $54.99 or $219.97
const regex = /\$(\d+\.\d{2})/g;
// Match all dollar amounts
const matches = priceText.match(regex);
const price = matches!.length > 1 ? matches![1] : matches![0];
const actualPrice = Number.parseFloat(price.replace('$', '')).toString();
Soft.expect(actualPrice).toEqual(totalAmount);
}
await this.selectPaymentMethod(paymentMethod!);
await this.selectServicePackage(servicePackage!);
await this.VerifyAfterpayBreakout();
// Enter promo code
if (paymentDetails?.promoCode) {
await this.enterPromo(paymentDetails.promoCode);

2
playwright-tests/pages/ServiceZipPage.ts
View file

@ -15,6 +15,6 @@ export class ServiceZipPage extends LookupPage {
const { customerDetails, vehicleDetails, alertFlags } = testData;
await this.validateProgressBar(ProgressBarPercentages.ServiceZipPage);
await this.enterZip(customerDetails!.address.postalCode!);
await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
await this.handleZipValidation(testData, customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
}
}

3
playwright-tests/playwright.config.ts
View file

@ -54,6 +54,7 @@ const jiraReportConfig: JiraReporterConfig = {
jiraProjectKey: process.env.JIRA_PROJECT_KEY || '',
jiraEpicKey: process.env.JIRA_EPIC_KEY || '',
jiraCardNumber: process.env.JIRA_CARD_NUMBER || '',
applicationName: 'FMG 2.0',
jiraApiUtilConfig: {
jiraUrl: process.env.JIRA_SERVER || '',
jiraUsername: process.env.JIRA_USERNAME || '',
@ -99,7 +100,7 @@ export default defineConfig({
headless: process.env.CI ? true : false,
screenshot: "only-on-failure",
actionTimeout: 60_000,
navigationTimeout: 60_000,
navigationTimeout: 60_000
},
/* Configure projects for major browsers */