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>({
@@ -144,10 +147,13 @@ export const test = base.extend<FixtureTypes>({
 
     StorefrontCustomRegister: async ({ StorefrontPage }, use) => {
         await use(new CustomRegister(StorefrontPage));
-
     },
 
     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 @@
     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,11 @@
             exact: true,
         });
         this.offcanvasBackdrop = page.locator('.offcanvas-backdrop');
+
+        //wishlist
+        this.wishlistIcon = page.locator('.header-wishlist-icon');
+        this.wishlistBasket = page.locator('.header-wishlist-badge');
+        this.contactFormLink = this.page.getByRole('listitem').getByTitle('Contact form', { exact: true });
     }
 
     async getMenuItemByCategoryName(categoryName: string): Promise<Record<string, Locator>> {
@@ -97,6 +106,9 @@
         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 +120,13 @@
             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/services/TestDataService.ts

@@ -100,7 +100,7 @@ export class TestDataService {
      *
      * @private
      */
-    private highPriorityEntities = ['order', 'product', 'landing_page', 'shipping_method', 'sales_channel_domain', 'sales_channel_currency', 'sales_channel_country', 'customer'];
+    private highPriorityEntities = ['order', 'product', 'landing_page', 'shipping_method', 'sales_channel_domain', 'sales_channel_currency', 'sales_channel_country', 'sales_channel_payment_method', 'customer'];
 
     /**
      * A registry of all created records.
@@ -1212,6 +1212,39 @@ export class TestDataService {
         return salesChannel;
     }
 
+    /**
+     * Assigns a payment method to a sales channel.
+     *
+     * @param salesChannelId - The uuid of the sales channel.
+     * @param paymentMethodId - The uuid of the currency.
+     */
+    async assignSalesChannelPaymentMethod(salesChannelId: string, paymentMethodId: string) {
+        const syncSalesChannelResponse = await this.AdminApiClient.post('./_action/sync', {
+            data: {
+                'write-sales-channel-payment-method': {
+                    entity: 'sales_channel_payment_method',
+                    action: 'upsert',
+                    payload: [
+                        {
+                            salesChannelId: salesChannelId,
+                            paymentMethodId: paymentMethodId,
+                        },
+                    ],
+                },
+            },
+        });
+        expect(syncSalesChannelResponse.ok()).toBeTruthy();
+
+        const { data: salesChannel } = await syncSalesChannelResponse.json();
+
+        this.addCreatedRecord('sales_channel_payment_method', {
+            salesChannelId: salesChannelId,
+            paymentMethodId: paymentMethodId,
+        });
+
+        return salesChannel;
+    }
+
     /**
      * Assigns a media resource to a payment method as a logo.
      *

src/tasks/shop-customer-tasks.ts

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

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

@@ -0,0 +1,48 @@
+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);
+    },
+});
+
+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);
+    },
+});
+
+export const AddProductToWishlist = base.extend<{ AddProductToWishlist: Task }, FixtureTypes>({
+    AddProductToWishlist: async ({ StorefrontHome , 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);
+    },
+});