feat: create storefront wishlist page and wishlist tasks

src/page-objects/StorefrontPages.ts

@@ -21,6 +21,7 @@ import { SearchSuggest } from './storefront/SearchSuggest';
 import { CustomRegister } from './storefront/CustomRegister';
 import { CheckoutOrderEdit } from './storefront/CheckoutOrderEdit';
 import { AccountAddressCreate } from './storefront/AccountAddresssCreate';
+import { Wishlist } from './storefront/Wishlist';
 
 export interface StorefrontPageTypes {
     StorefrontHome: Home;
@@ -43,6 +44,7 @@ export interface StorefrontPageTypes {
     StorefrontSearchSuggest: SearchSuggest;
     StorefrontCustomRegister: CustomRegister;
     StorefrontCheckoutOrderEdit: CheckoutOrderEdit;
+    StorefrontWishlist: Wishlist;
 }
 
 export const StorefrontPageObjects = {
@@ -66,6 +68,7 @@ export const StorefrontPageObjects = {
     SearchSuggest,
     CustomRegister,
     CheckoutOrderEdit,
+    Wishlist,
 }
 
 export const test = base.extend<FixtureTypes>({
@@ -150,4 +153,8 @@ export const test = base.extend<FixtureTypes>({
     StorefrontCheckoutOrderEdit: async ({ StorefrontPage }, use) => {
         await use(new CheckoutOrderEdit(StorefrontPage));
     },
+
+    StorefrontWishlist: async ({ StorefrontPage }, use) => {
+        await use(new Wishlist(StorefrontPage));
+    },
 });

src/page-objects/storefront/Home.ts

@@ -28,6 +28,10 @@ export class Home implements PageObject {
     public readonly consentCookieBannerContainer: Locator;
     public readonly offcanvasBackdrop: Locator;
 
+    //wishlist
+    public readonly wishlistIcon: Locator;
+    public readonly wishlistBasket: Locator;
+
     constructor(public readonly page: Page) {
         this.accountMenuButton = page.getByLabel('Your account');
         this.closeGuestSessionButton = page.locator('.account-aside-btn');
@@ -63,6 +67,10 @@ export class Home implements PageObject {
             exact: true,
         });
         this.offcanvasBackdrop = page.locator('.offcanvas-backdrop');
+
+        //wishlist
+        this.wishlistIcon = page.locator('.header-wishlist-icon');
+        this.wishlistBasket = page.locator('.header-wishlist-badge');
     }
 
     async getMenuItemByCategoryName(categoryName: string): Promise<Record<string, Locator>> {
@@ -97,6 +105,9 @@ export class Home implements PageObject {
         const productAddToShoppingCart = listingItem.getByRole('button', {
             name: 'Add to shopping cart',
         });
+        const wishlistNotAddedIcon = listingItem.locator('.product-wishlist-not-added');
+        const wishlistAddedIcon = listingItem.locator('.product-wishlist-added');
+        const removeProductFromWishlist = listingItem.locator('.icon-wishlist-remove');  
 
         return {
             productImage: productImage,
@@ -108,10 +119,13 @@ export class Home implements PageObject {
             productPrice: productPrice,
             productName: productName,
             productAddToShoppingCart: productAddToShoppingCart,
+            wishlistNotAddedIcon: wishlistNotAddedIcon,
+            wishlistAddedIcon: wishlistAddedIcon,
+            removeFromWishlistXButton: removeProductFromWishlist,
         };
     }
 
     url() {
         return './';
     }
-}
+}

src/page-objects/storefront/Wishlist.ts

@@ -0,0 +1,34 @@
+import type { Page, Locator } from '@playwright/test';
+import type { PageObject } from '../../types/PageObject';
+import { Home } from './Home';
+
+export class Wishlist extends Home implements PageObject {
+    public readonly wishListHeader: Locator;
+    public readonly removeAlert: Locator;
+    public readonly emptyListing: Locator;
+
+    public readonly offCanvas: Locator;
+    public readonly offCanvasCartTitle: Locator;
+    public readonly offCanvasCart: Locator;
+    public readonly offCanvasCartGoToCheckoutButton: Locator;
+    public readonly offCanvasLineItemImages: Locator;
+    public readonly offCanvasSummaryTotalPrice: Locator;
+
+    constructor(public readonly page: Page) {
+        super(page);
+        this.wishListHeader = page.locator('.wishlist-headline');
+        this.removeAlert = page.locator('.alert-content');
+        this.emptyListing = page.locator('.wishlist-listing-empty');
+
+        this.offCanvas = page.locator('offcanvas-body');
+        this.offCanvasCartTitle = page.getByText('Shopping cart', { exact: true });
+        this.offCanvasCart = page.getByRole('dialog');
+        this.offCanvasCartGoToCheckoutButton = page.getByRole('link', { name: 'Go to checkout' });
+        this.offCanvasLineItemImages = page.locator('.line-item-img-link');
+        this.offCanvasSummaryTotalPrice = page.locator('.offcanvas-summary').locator('dt:has-text("Subtotal") + dd');
+    }
+
+    url() {
+        return `wishlist`;
+    }
+}

src/tasks/shop-customer-tasks.ts

@@ -24,6 +24,9 @@ import { OpenSearchSuggestPage } from './shop-customer/Search/OpenSearchSuggestP
 import { SearchForTerm } from './shop-customer/Search/SearchForTerm';
 
 import { ValidateAccessibility } from './shop-customer/Accessibility/ValidateAccessibility';
+import { RemoveProductFromWishlist } from './shop-customer/Wishlist/RemoveProductFromWishlist';
+import { AddProductToCartFromWishlist } from './shop-customer/Wishlist/AddProductToCartFromWishlist';
+import { AddProductToWishlist } from './shop-customer/Wishlist/AddProductToWishlist';
 
 export const test = mergeTests(
     Login,
@@ -45,5 +48,8 @@ export const test = mergeTests(
     OpenSearchResultPage,
     OpenSearchSuggestPage,
     SearchForTerm,
-    ValidateAccessibility
+    ValidateAccessibility,
+    RemoveProductFromWishlist,
+    AddProductToCartFromWishlist,
+    AddProductToWishlist
 );

src/tasks/shop-customer/Wishlist/AddProductToCartFromWishlist.ts

@@ -0,0 +1,20 @@
+import { test as base } from '@playwright/test';
+import type { Task } from '../../../types/Task';
+import type { FixtureTypes } from '../../../types/FixtureTypes';
+import { Product } from '../../../types/ShopwareTypes';
+
+export const AddProductToCartFromWishlist = base.extend<{ AddProductToCartFromWishlist: Task }, FixtureTypes>({
+    AddProductToCartFromWishlist: async ({ ShopCustomer, StorefrontWishlist }, use) => {
+        const task = (ProductData: Product) => {
+            return async function AddProductToCart() {
+                const listedItem = await StorefrontWishlist.getListingItemByProductId(ProductData.id);
+                await listedItem.productAddToShoppingCart.click();
+                await StorefrontWishlist.page.waitForResponse((response) => response.url().includes(`checkout/offcanvas`) && response.ok());
+                await ShopCustomer.expects(StorefrontWishlist.offCanvasCartTitle).toBeVisible();
+                await ShopCustomer.expects(StorefrontWishlist.offCanvasCart.getByText(ProductData.name)).toBeVisible();
+            }
+        };
+
+        await use(task);
+    },
+});

src/tasks/shop-customer/Wishlist/AddProductToWishlist.ts

@@ -0,0 +1,18 @@
+import { test as base } from '@playwright/test';
+import type { Task } from '../../../types/Task';
+import type { FixtureTypes } from '../../../types/FixtureTypes';
+import { Product } from '../../../types/ShopwareTypes';
+
+export const AddProductToWishlist = base.extend<{ AddProductToWishlist: Task }, FixtureTypes>({
+    AddProductToWishlist: async ({ StorefrontHome , StorefrontWishlist, ShopCustomer}, use) => {
+        const task = (ProductData: Product) => {
+            return async function AddProductToWishlist() {
+                const listedItem = await StorefrontHome.getListingItemByProductId(ProductData.id);
+                await listedItem.wishlistNotAddedIcon.click();
+                await ShopCustomer.expects(listedItem.wishlistAddedIcon).toBeVisible();
+            }
+        };
+
+        await use(task);
+    },
+});

src/tasks/shop-customer/Wishlist/RemoveProductFromWishlist.ts

@@ -0,0 +1,18 @@
+import { test as base } from '@playwright/test';
+import type { Task } from '../../../types/Task';
+import type { FixtureTypes } from '../../../types/FixtureTypes';
+import { Product } from '../../../types/ShopwareTypes';
+
+export const RemoveProductFromWishlist = base.extend<{ RemoveProductFromWishlist: Task }, FixtureTypes>({
+    RemoveProductFromWishlist: async ({ StorefrontHome , StorefrontWishlist}, use) => {
+        const task = (ProductData: Product) => {
+            return async function AddProductToWishlist() {
+                const listedItem = await StorefrontHome.getListingItemByProductId(ProductData.id);
+                await listedItem.wishlistAddedIcon.click();
+                await StorefrontWishlist.page.waitForResponse((response) => response.url().includes(`remove/${ProductData.id}`) && response.ok());
+            }
+        };
+
+        await use(task);
+    },
+});