Skip to content

Commit e1abbce

Browse files
nesrineabdmoulehnesrineabdmouleh
committed
Enable quick view and block cart modals
1 parent f506458 commit e1abbce

File tree

6 files changed

+680
-0
lines changed

6 files changed

+680
-0
lines changed

‎src/interfaces/FO/modal/blockCart.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {FOBasePagePageInterface} from '@interfaces/FO';
2+
3+
// Import data
4+
import type {ProductAttribute} from '@data/types/product';
5+
import type {CartProductDetails} from '@data/types/cart';
6+
7+
import type {Page} from '@playwright/test';
8+
9+
export interface FoModalBlockCartPageInterface extends FOBasePagePageInterface {
10+
getBlockCartModalTitle(page: Page): Promise<string>;
11+
isBlockCartModalVisible(page: Page): Promise<boolean>;
12+
getProductDetailsFromBlockCartModal(page: Page): Promise<CartProductDetails>;
13+
getProductAttributesFromBlockCartModal(page: Page): Promise<ProductAttribute[]>;
14+
proceedToCheckout(page: Page): Promise<void>;
15+
continueShopping(page: Page): Promise<boolean>;
16+
closeBlockCartModal(page: Page, clickOutside?: boolean): Promise<boolean>;
17+
}

‎src/interfaces/FO/modal/quickView.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {FOBasePagePageInterface} from '@interfaces/FO';
2+
3+
// Import data
4+
import type {ProductAttribute, ProductDetails, ProductDetailsWithDiscount} from '@data/types/product';
5+
6+
import type {Page} from '@playwright/test';
7+
8+
export interface FoModalQuickViewPageInterface extends FOBasePagePageInterface {
9+
quickViewModalDiv: string;
10+
11+
addToCartByQuickView(page: Page): Promise<void>;
12+
closeQuickViewModal(page: Page, clickOutside?: boolean): Promise<boolean>;
13+
getProductAttributesFromQuickViewModal(page: Page): Promise<ProductAttribute[]>;
14+
getProductAvailabilityText(page: Page): Promise<string>;
15+
getProductDetailsFromQuickViewModal(page: Page): Promise<ProductDetails>;
16+
getProductQuantityFromQuickViewModal(page: Page): Promise<number>;
17+
getProductWithDiscountDetailsFromQuickViewModal(page: Page): Promise<ProductDetailsWithDiscount>;
18+
getQuickViewCoverImage(page: Page): Promise<string | null>;
19+
getQuickViewImageMain(page: Page): Promise<string | null>;
20+
getSelectedAttributes(page: Page): Promise<ProductAttribute[]>;
21+
getSelectedAttributesFromQuickViewModal(page: Page, attribute: ProductAttribute): Promise<ProductAttribute[]>;
22+
getSocialSharingLink(page: Page, socialSharing: string): Promise<string>;
23+
isAddToCartButtonDisabled(page: Page): Promise<boolean>;
24+
isAddToCartButtonEnabled(page: Page): Promise<boolean>;
25+
isQuickViewProductModalVisible(page: Page): Promise<boolean>;
26+
selectThumbImage(page: Page, position: number): Promise<string>;
27+
setAttribute(page: Page, attributes: ProductAttribute): Promise<void>;
28+
setAttributes(page: Page, attributes: ProductAttribute[]): Promise<void>;
29+
setAttributesAndAddToCart(page: Page, attributes: ProductAttribute[], quantity: number): Promise<void>;
30+
setQuantity(page: Page, quantity: number | string): Promise<void>;
31+
setQuantityAndAddToCart(page: Page, quantityWanted?: number | string): Promise<void>;
32+
setQuantityByArrowUpDown(page: Page, quantityWanted: number, direction: string): Promise<void>;
33+
34+
}

‎src/pages/FO/classic/modal/blockCart.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type {FoModalBlockCartPageInterface} from '@interfaces/FO/modal/blockCart';
2+
import testContext from '@utils/test';
3+
import semver from 'semver';
4+
5+
const psVersion = testContext.getPSVersion();
6+
7+
/* eslint-disable global-require, @typescript-eslint/no-var-requires */
8+
function requirePage(): FoModalBlockCartPageInterface {
9+
if (semver.gte(psVersion, '0.0.0')) {
10+
return require('@versions/develop/pages/FO/classic/modal/blockCart').blockCartModal;
11+
}
12+
return require('@versions/develop/pages/FO/classic/modal/blockCart').blockCartModal;
13+
}
14+
/* eslint-enable global-require, @typescript-eslint/no-var-requires */
15+
16+
export default requirePage();

‎src/pages/FO/classic/modal/quickView.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type {FoModalQuickViewPageInterface} from '@interfaces/FO/modal/quickView';
2+
import testContext from '@utils/test';
3+
import semver from 'semver';
4+
5+
const psVersion = testContext.getPSVersion();
6+
7+
/* eslint-disable global-require, @typescript-eslint/no-var-requires */
8+
function requirePage(): FoModalQuickViewPageInterface {
9+
if (semver.gte(psVersion, '0.0.0')) {
10+
return require('@versions/develop/pages/FO/classic/modal/quickView').quickViewModal;
11+
}
12+
return require('@versions/develop/pages/FO/classic/modal/quickView').quickViewModal;
13+
}
14+
/* eslint-enable global-require, @typescript-eslint/no-var-requires */
15+
16+
export default requirePage();

‎src/versions/develop/pages/FO/classic/modal/blockCart.ts

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// Import pages
2+
import type {FoModalBlockCartPageInterface} from '@interfaces/FO/modal/blockCart';
3+
import FOBasePage from '@pages/FO/FOBasePage';
4+
5+
// Import data
6+
import type {ProductAttribute} from '@data/types/product';
7+
import type {CartProductDetails} from '@data/types/cart';
8+
9+
import type {Page} from 'playwright';
10+
11+
/**
12+
* Block cart modal, contains functions that can be used on the modal
13+
* @class
14+
* @extends FOBasePage
15+
*/
16+
class BlockCartModal extends FOBasePage implements FoModalBlockCartPageInterface {
17+
private readonly blockCartLabel: string;
18+
19+
protected readonly blockCartModalDiv: string;
20+
21+
protected blockCartModalCloseButton: string;
22+
23+
private readonly cartModalProductNameBlock: string;
24+
25+
private readonly cartModalProductPriceBlock: string;
26+
27+
private readonly cartModalProductSizeBlock: string;
28+
29+
private readonly cartModalProductColorBlock: string;
30+
31+
private readonly cartModalProductQuantityBlock: string;
32+
33+
private readonly cartContentBlock: string;
34+
35+
protected cartModalProductsCountBlock: string;
36+
37+
protected cartModalShippingBlock: string;
38+
39+
protected cartModalSubtotalBlock: string;
40+
41+
protected cartModalProductTaxInclBlock: string;
42+
43+
protected cartModalCheckoutLink: string;
44+
45+
protected continueShoppingButton: string;
46+
47+
/**
48+
* @constructs
49+
* Setting up texts and selectors to use on home page
50+
*/
51+
constructor(theme: string = 'classic') {
52+
super(theme);
53+
54+
this.blockCartModalDiv = '#blockcart-modal';
55+
this.blockCartLabel = '#myModalLabel';
56+
this.blockCartModalCloseButton = `${this.blockCartModalDiv} button.close`;
57+
this.cartModalProductNameBlock = `${this.blockCartModalDiv} .product-name`;
58+
this.cartModalProductPriceBlock = `${this.blockCartModalDiv} .product-price`;
59+
this.cartModalProductSizeBlock = `${this.blockCartModalDiv} .size strong`;
60+
this.cartModalProductColorBlock = `${this.blockCartModalDiv} .color strong`;
61+
this.cartModalProductQuantityBlock = `${this.blockCartModalDiv} .product-quantity`;
62+
this.cartContentBlock = `${this.blockCartModalDiv} .cart-content`;
63+
this.cartModalProductsCountBlock = `${this.cartContentBlock} .cart-products-count`;
64+
this.cartModalShippingBlock = `${this.cartContentBlock} .shipping.value`;
65+
this.cartModalSubtotalBlock = `${this.cartContentBlock} .subtotal.value`;
66+
this.cartModalProductTaxInclBlock = `${this.cartContentBlock} .product-total .value`;
67+
this.cartModalCheckoutLink = `${this.blockCartModalDiv} div.cart-content-btn a`;
68+
this.continueShoppingButton = `${this.blockCartModalDiv} div.cart-content-btn button.btn-secondary`;
69+
}
70+
71+
/**
72+
* Get block cart modal title
73+
* @param page {Page} Browser tab
74+
* @returns {Promise<string>}
75+
*/
76+
async getBlockCartModalTitle(page: Page): Promise<string> {
77+
return this.getTextContent(page, this.blockCartLabel);
78+
}
79+
80+
/**
81+
* Is block cart modal visible
82+
* @param page {Page} Browser tab
83+
* @returns {Promise<boolean>}
84+
*/
85+
async isBlockCartModalVisible(page: Page): Promise<boolean> {
86+
return this.elementVisible(page, this.blockCartModalDiv, 2000);
87+
}
88+
89+
/**
90+
* Get product details from blockCart modal
91+
* @param page {Page} Browser tab
92+
* @returns {Promise<CartProductDetails>}
93+
*/
94+
async getProductDetailsFromBlockCartModal(page: Page): Promise<CartProductDetails> {
95+
return {
96+
name: await this.getTextContent(page, this.cartModalProductNameBlock),
97+
price: parseFloat((await this.getTextContent(page, this.cartModalProductPriceBlock)).replace('€', '')),
98+
quantity: await this.getNumberFromText(page, this.cartModalProductQuantityBlock),
99+
cartProductsCount: await this.getNumberFromText(page, this.cartModalProductsCountBlock),
100+
cartSubtotal: parseFloat((await this.getTextContent(page, this.cartModalSubtotalBlock)).replace('€', '')),
101+
cartShipping: await this.getTextContent(page, this.cartModalShippingBlock),
102+
totalTaxIncl: parseFloat((await this.getTextContent(page, this.cartModalProductTaxInclBlock)).replace('€', '')),
103+
};
104+
}
105+
106+
/**
107+
* Get product attributes from block cart modal
108+
* @param page {Page} Browser tab
109+
* @returns {Promise<ProductAttribute[]>}
110+
*/
111+
async getProductAttributesFromBlockCartModal(page: Page): Promise<ProductAttribute[]> {
112+
return [
113+
{
114+
name: 'size',
115+
value: await this.getTextContent(page, this.cartModalProductSizeBlock),
116+
},
117+
{
118+
name: 'color',
119+
value: await this.getTextContent(page, this.cartModalProductColorBlock),
120+
},
121+
];
122+
}
123+
124+
/**
125+
* Click on proceed to checkout after adding product to cart (in modal homePage)
126+
* @param page {Page} Browser tab
127+
* @return {Promise<void>}
128+
*/
129+
async proceedToCheckout(page: Page): Promise<void> {
130+
await this.clickAndWaitForURL(page, this.cartModalCheckoutLink);
131+
await page.waitForLoadState('domcontentloaded');
132+
}
133+
134+
/**
135+
* Click on continue shopping
136+
* @param page {Page} Browser tab
137+
* @returns {Promise<boolean>}
138+
*/
139+
async continueShopping(page: Page): Promise<boolean> {
140+
await this.waitForSelectorAndClick(page, this.continueShoppingButton);
141+
142+
return this.elementNotVisible(page, this.blockCartModalDiv, 2000);
143+
}
144+
145+
/**
146+
* Close block cart modal
147+
* @param page {Page} Browser tab
148+
* @param clickOutside {boolean} True if we need to click outside to close the modal
149+
* @returns {Promise<boolean>}
150+
*/
151+
async closeBlockCartModal(page: Page, clickOutside: boolean = false): Promise<boolean> {
152+
if (clickOutside) {
153+
await page.waitForTimeout(1000);
154+
await page.mouse.click(5, 5);
155+
} else {
156+
await this.waitForSelectorAndClick(page, this.blockCartModalCloseButton);
157+
}
158+
return this.elementNotVisible(page, this.blockCartModalDiv, 1000);
159+
}
160+
}
161+
162+
const blockCartModal = new BlockCartModal();
163+
export {blockCartModal, BlockCartModal};

0 commit comments

Comments
 (0)